Skip to content

Commit 7859c2c

Browse files
compulimcompulim
committed
Add fat module tests
1 parent 8c02eb0 commit 7859c2c

12 files changed

Lines changed: 181 additions & 3 deletions

__tests__/html2/simple.module.html renamed to __tests__/html2/simple/fatModule/simple.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,15 @@
77
</head>
88
<body>
99
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs"
14+
}
15+
}
16+
</script>
1017
<script type="module">
11-
import { createDirectLine, createStoreWithOptions, renderWebChat } from '/packages/bundle/dist/botframework-webchat.mjs';
18+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
1219

1320
run(async function () {
1421
const {
@@ -29,6 +36,12 @@
2936
);
3037

3138
await pageConditions.uiConnected();
39+
40+
await directLine.emulateIncomingActivity('Hello, World!');
41+
42+
await pageConditions.numActivitiesShown(1);
43+
44+
await host.snapshot('local');
3245
});
3346
</script>
3447
</body>

‎__tests__/html2/simple/fatModule/simple.html.snap-1.png‎

8.67 KB
Loading

‎__tests__/html2/simple/fatModule/supportPolymiddleware.reactDOMRender.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
</head>
8+
<body>
9+
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat.middleware.mjs",
15+
"react": "https://esm.sh/react@18",
16+
"react-dom": "https://esm.sh/react-dom@18",
17+
"react-dom/": "https://esm.sh/react-dom@18/"
18+
}
19+
}
20+
</script>
21+
<script type="module">
22+
import React from 'react';
23+
24+
// We should allow using React from environment.
25+
// When web devs import Web Chat as <script type="module">, we want to enable customization.
26+
// Customization requires React.createElement() and calling some hooks.
27+
window.React = React;
28+
</script>
29+
<script type="module">
30+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
31+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
32+
import { createElement } from 'react';
33+
import { createRoot } from 'react-dom/client';
34+
// import React from 'react';
35+
36+
const { useStyleOptions } = hooks;
37+
const {
38+
testHelpers: { createDirectLineEmulator }
39+
} = window;
40+
41+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
42+
window.WebChat = { createStoreWithOptions };
43+
44+
run(async function () {
45+
const { directLine, store } = createDirectLineEmulator();
46+
47+
function MyMiddleware({ nextResult }) {
48+
// THEN: Web Chat hooks can be called.
49+
const [{ accent }] = useStyleOptions();
50+
51+
return createElement(
52+
'div',
53+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
54+
nextResult?.render({})
55+
);
56+
}
57+
58+
createRoot(document.getElementsByTagName('main')[0]).render(
59+
createElement(ReactWebChat, {
60+
directLine,
61+
polymiddleware: [
62+
createActivityPolymiddleware(
63+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
64+
)
65+
],
66+
store
67+
})
68+
);
69+
70+
await pageConditions.uiConnected();
71+
72+
await directLine.emulateIncomingActivity('Hello, World!');
73+
74+
await pageConditions.numActivitiesShown(1);
75+
76+
await host.snapshot('local');
77+
});
78+
</script>
79+
</body>
80+
</html>

‎__tests__/html2/simple/fatModule/supportPolymiddleware.reactDOMRender.html.snap-1.png‎

8.73 KB
Loading

‎__tests__/html2/simple/fatModule/supportPolymiddleware.renderWebChat.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
</head>
8+
<body>
9+
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat.middleware.mjs",
15+
"react": "https://esm.sh/react@18",
16+
"react-dom": "https://esm.sh/react-dom@18"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import React from 'react';
22+
import ReactDOM from 'react-dom';
23+
24+
// We should allow using React from environment.
25+
// When web devs import Web Chat as <script type="module">, we want to enable customization.
26+
// Customization requires React.createElement() and calling some hooks.
27+
window.React = React;
28+
window.ReactDOM = ReactDOM;
29+
</script>
30+
<script type="module">
31+
import { createDirectLine, createStoreWithOptions, hooks, renderWebChat } from 'botframework-webchat';
32+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
33+
import { createElement } from 'react';
34+
35+
const { useStyleOptions } = hooks;
36+
const {
37+
testHelpers: { createDirectLineEmulator }
38+
} = window;
39+
40+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
41+
window.WebChat = { createStoreWithOptions };
42+
43+
run(async function () {
44+
const { directLine, store } = createDirectLineEmulator();
45+
46+
function MyMiddleware({ nextResult }) {
47+
// THEN: Web Chat hooks can be called.
48+
const [{ accent }] = useStyleOptions();
49+
50+
return createElement(
51+
'div',
52+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
53+
nextResult?.render({})
54+
);
55+
}
56+
57+
renderWebChat(
58+
{
59+
directLine,
60+
polymiddleware: [
61+
createActivityPolymiddleware(
62+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
63+
)
64+
],
65+
store
66+
},
67+
document.getElementsByTagName('main')[0]
68+
);
69+
70+
await pageConditions.uiConnected();
71+
72+
await directLine.emulateIncomingActivity('Hello, World!');
73+
74+
await pageConditions.numActivitiesShown(1);
75+
76+
await host.snapshot('local');
77+
});
78+
</script>
79+
</body>
80+
</html>

‎__tests__/html2/simple/fatModule/supportPolymiddleware.renderWebChat.html.snap-1.png‎

8.73 KB
Loading

__tests__/html2/simple.emulator.html renamed to __tests__/html2/simple/simple.emulator.html

File renamed without changes.

__tests__/html2/simple.html renamed to __tests__/html2/simple/simple.html

File renamed without changes.

__tests__/html2/simple.offline.html renamed to __tests__/html2/simple/simple.offline.html

File renamed without changes.

‎packages/bundle/tsup.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function buildApplyConfig(format: Format, bundled: boolean) {
4747
SPEECH_OCSP_CACHE_ROOT: ''
4848
},
4949
// Intentionally overriding existing esbuild plugins.
50-
esbuildPlugins: [],
50+
esbuildPlugins: bundled ? [resolveReact] : [],
5151
format,
5252
noExternal: bundled
5353
? [/./u]

0 commit comments

Comments
 (0)