Skip to content

Commit c5203f3

Browse files
committed
Add esm.run
1 parent 5ba6a3c commit c5203f3

11 files changed

Lines changed: 365 additions & 1 deletion
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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/static/botframework-webchat.js",
14+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
15+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
16+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
22+
23+
run(async function () {
24+
const {
25+
testHelpers: { createDirectLineEmulator }
26+
} = window;
27+
28+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
29+
window.WebChat = { createStoreWithOptions };
30+
31+
const { directLine, store } = createDirectLineEmulator();
32+
33+
renderWebChat(
34+
{
35+
directLine,
36+
store
37+
},
38+
document.getElementById('webchat')
39+
);
40+
41+
await pageConditions.uiConnected();
42+
43+
await directLine.emulateIncomingActivity({
44+
attachments: [
45+
{
46+
content: {
47+
type: 'AdaptiveCard',
48+
body: [
49+
{
50+
type: 'TextBlock',
51+
text: 'You can choose one of the followings.'
52+
}
53+
],
54+
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
55+
version: '1.2',
56+
actions: [
57+
{
58+
type: 'Action.Submit',
59+
title: 'What time is it?'
60+
},
61+
{
62+
type: 'Action.Submit',
63+
title: 'What is the weather?'
64+
}
65+
]
66+
},
67+
contentType: 'application/vnd.microsoft.card.adaptive'
68+
}
69+
],
70+
from: { id: 'bot', role: 'bot' },
71+
text: 'What can I do for you?',
72+
type: 'message'
73+
});
74+
75+
await pageConditions.numActivitiesShown(1);
76+
77+
await host.snapshot('local');
78+
79+
expect(typeof globalThis.React).toBe('undefined');
80+
});
81+
</script>
82+
</body>
83+
</html>
17.5 KB
Loading
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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/static/botframework-webchat.js",
14+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
15+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
16+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
22+
23+
run(async function () {
24+
const {
25+
testHelpers: { createDirectLineEmulator }
26+
} = window;
27+
28+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
29+
window.WebChat = { createStoreWithOptions };
30+
31+
const { directLine, store } = createDirectLineEmulator();
32+
33+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
34+
35+
await pageConditions.uiConnected();
36+
37+
await directLine.emulateIncomingActivity('Hello, World!');
38+
39+
await pageConditions.numActivitiesShown(1);
40+
41+
await host.snapshot('local');
42+
43+
expect(typeof globalThis.React).toBe('undefined');
44+
});
45+
</script>
46+
</body>
47+
</html>
8.67 KB
Loading
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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/static/botframework-webchat.js",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
15+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
16+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
17+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
18+
}
19+
}
20+
</script>
21+
<script type="module">
22+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
23+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
24+
import { createElement } from 'react';
25+
import { render } from 'react-dom';
26+
27+
const { useStyleOptions } = hooks;
28+
const {
29+
testHelpers: { createDirectLineEmulator }
30+
} = window;
31+
32+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
33+
window.WebChat = { createStoreWithOptions };
34+
35+
run(async function () {
36+
const { directLine, store } = createDirectLineEmulator();
37+
38+
function MyMiddleware({ nextResult }) {
39+
// THEN: Web Chat hooks can be called.
40+
const [{ accent }] = useStyleOptions();
41+
42+
return createElement(
43+
'div',
44+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
45+
nextResult?.render({})
46+
);
47+
}
48+
49+
render(
50+
createElement(ReactWebChat, {
51+
directLine,
52+
polymiddleware: [
53+
createActivityPolymiddleware(
54+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
55+
)
56+
],
57+
store
58+
}),
59+
document.getElementsByTagName('main')[0]
60+
);
61+
62+
await pageConditions.uiConnected();
63+
64+
await directLine.emulateIncomingActivity('Hello, World!');
65+
66+
await pageConditions.numActivitiesShown(1);
67+
68+
await host.snapshot('local');
69+
});
70+
</script>
71+
</body>
72+
</html>
8.73 KB
Loading
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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/static/botframework-webchat.js",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
15+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
16+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
17+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
18+
}
19+
}
20+
</script>
21+
<script type="module">
22+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
23+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
24+
import { createElement } from 'react';
25+
import { createRoot } from 'react-dom/client';
26+
27+
const { useStyleOptions } = hooks;
28+
const {
29+
testHelpers: { createDirectLineEmulator }
30+
} = window;
31+
32+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
33+
window.WebChat = { createStoreWithOptions };
34+
35+
run(async function () {
36+
const { directLine, store } = createDirectLineEmulator();
37+
38+
function MyMiddleware({ nextResult }) {
39+
// THEN: Web Chat hooks can be called.
40+
const [{ accent }] = useStyleOptions();
41+
42+
return createElement(
43+
'div',
44+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
45+
nextResult?.render({})
46+
);
47+
}
48+
49+
createRoot(document.getElementsByTagName('main')[0]).render(
50+
createElement(ReactWebChat, {
51+
directLine,
52+
polymiddleware: [
53+
createActivityPolymiddleware(
54+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
55+
)
56+
],
57+
store
58+
})
59+
);
60+
61+
await pageConditions.uiConnected();
62+
63+
await directLine.emulateIncomingActivity('Hello, World!');
64+
65+
await pageConditions.numActivitiesShown(1);
66+
67+
await host.snapshot('local');
68+
});
69+
</script>
70+
</body>
71+
</html>
8.73 KB
Loading
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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/static/botframework-webchat.js",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
15+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
16+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
17+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
18+
}
19+
}
20+
</script>
21+
<script type="module">
22+
import { createDirectLine, createStoreWithOptions, hooks, renderWebChat } from 'botframework-webchat';
23+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
24+
import { createElement } from 'react';
25+
26+
const { useStyleOptions } = hooks;
27+
const {
28+
testHelpers: { createDirectLineEmulator }
29+
} = window;
30+
31+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
32+
window.WebChat = { createStoreWithOptions };
33+
34+
run(async function () {
35+
const { directLine, store } = createDirectLineEmulator();
36+
37+
function MyMiddleware({ nextResult }) {
38+
// THEN: Web Chat hooks can be called.
39+
const [{ accent }] = useStyleOptions();
40+
41+
return createElement(
42+
'div',
43+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
44+
nextResult?.render({})
45+
);
46+
}
47+
48+
renderWebChat(
49+
{
50+
directLine,
51+
polymiddleware: [
52+
createActivityPolymiddleware(
53+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
54+
)
55+
],
56+
store
57+
},
58+
document.getElementsByTagName('main')[0]
59+
);
60+
61+
await pageConditions.uiConnected();
62+
63+
await directLine.emulateIncomingActivity('Hello, World!');
64+
65+
await pageConditions.numActivitiesShown(1);
66+
67+
await host.snapshot('local');
68+
});
69+
</script>
70+
</body>
71+
</html>
8.73 KB
Loading

0 commit comments

Comments
 (0)