Skip to content

Commit 5326629

Browse files
compulimcompulim
committed
Add changing middleware tests
1 parent 173be90 commit 5326629

6 files changed

Lines changed: 230 additions & 0 deletions

File tree

‎__tests__/html2/middleware/avatar/legacyAvatarMiddleware/changing.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
13+
"react": "/__dist__/packages/bundle/static/react.js",
14+
"react-dom": "/__dist__/packages/bundle/static/react-dom.js"
15+
}
16+
}
17+
</script>
18+
<script type="module">
19+
import '/test-harness.mjs';
20+
import '/test-page-object.mjs';
21+
22+
import { createStoreWithOptions, renderWebChat, testIds } from 'botframework-webchat';
23+
import { avatarComponent, createAvatarPolymiddleware } from 'botframework-webchat/middleware';
24+
import { createElement } from 'react';
25+
26+
const {
27+
testHelpers: { createDirectLineEmulator }
28+
} = window;
29+
30+
testHelpers.hideKnownError();
31+
32+
// TODO: Should find ways to eliminate this line.
33+
window.WebChat = { createStoreWithOptions, testIds };
34+
35+
run(async function () {
36+
const { directLine, store } = createDirectLineEmulator();
37+
38+
const MiddlewareAvatar = ({ activity, children, fromUser }) =>
39+
createElement(
40+
'div',
41+
{
42+
style: {
43+
borderRadius: 40,
44+
height: 40,
45+
outlineColor: 'green',
46+
outlineOffset: 2,
47+
outlineStyle: fromUser ? 'dotted' : 'dashed',
48+
outlineWidth: 2,
49+
overflow: 'hidden',
50+
width: 40
51+
}
52+
},
53+
children
54+
);
55+
56+
function render(withMiddleware) {
57+
renderWebChat(
58+
{
59+
avatarMiddleware: withMiddleware
60+
? [
61+
() => next => request => {
62+
const children = next(request);
63+
64+
expect(Object.getOwnPropertyNames(request)).toEqual(['activity', 'fromUser', 'styleOptions']);
65+
expect(request.styleOptions).toHaveProperty('botAvatarInitials', 'WC');
66+
67+
return (...args) =>
68+
createElement(
69+
MiddlewareAvatar,
70+
{ activity: request.activity, fromUser: request.fromUser },
71+
children(...args)
72+
);
73+
}
74+
]
75+
: undefined,
76+
directLine,
77+
store,
78+
styleOptions: {
79+
botAvatarImage: '/assets/bot-avatar.jpg',
80+
botAvatarInitials: 'WC',
81+
userAvatarImage: '/assets/user-avatar.jpg',
82+
userAvatarInitials: 'WW'
83+
}
84+
},
85+
document.getElementById('webchat')
86+
);
87+
}
88+
89+
render(false);
90+
91+
await pageConditions.uiConnected();
92+
93+
await directLine.emulateIncomingActivity({
94+
from: { role: 'bot' },
95+
id: 'a-00001',
96+
text: 'Hello, World!',
97+
type: 'message'
98+
});
99+
100+
await directLine.emulateIncomingActivity({
101+
from: { role: 'user' },
102+
id: 'a-00002',
103+
text: 'Aloha!',
104+
type: 'message'
105+
});
106+
107+
// THEN: Should show an image with a green outside border with a red inside border.
108+
// Legacy middleware has higher priority than polymiddleware.
109+
await host.snapshot('local');
110+
111+
render(true);
112+
113+
await host.snapshot('local');
114+
});
115+
</script>
116+
</body>
117+
</html>

‎__tests__/html2/middleware/avatar/legacyAvatarMiddleware/changing.html.snap-1.png‎

16.4 KB
Loading

‎__tests__/html2/middleware/avatar/legacyAvatarMiddleware/changing.html.snap-2.png‎

19.1 KB
Loading

‎__tests__/html2/middleware/avatar/polymiddleware/changing.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
13+
"react": "/__dist__/packages/bundle/static/react.js",
14+
"react-dom": "/__dist__/packages/bundle/static/react-dom.js"
15+
}
16+
}
17+
</script>
18+
<script type="module">
19+
import '/test-harness.mjs';
20+
import '/test-page-object.mjs';
21+
22+
import { createStoreWithOptions, renderWebChat, testIds } from 'botframework-webchat';
23+
import { avatarComponent, createAvatarPolymiddleware } from 'botframework-webchat/middleware';
24+
import { createElement } from 'react';
25+
26+
const {
27+
testHelpers: { createDirectLineEmulator }
28+
} = window;
29+
30+
testHelpers.hideKnownError();
31+
32+
// TODO: Should find ways to eliminate this line.
33+
window.WebChat = { createStoreWithOptions, testIds };
34+
35+
run(async function () {
36+
const { directLine, store } = createDirectLineEmulator();
37+
38+
const PolymiddlewareAvatar = ({ activity, children }) =>
39+
createElement(
40+
'div',
41+
{
42+
style: {
43+
borderRadius: 32,
44+
height: 32,
45+
margin: 4,
46+
outlineColor: 'red',
47+
outlineOffset: 2,
48+
outlineStyle: activity.from?.role === 'user' ? 'dotted' : 'dashed',
49+
outlineWidth: 2,
50+
overflow: 'hidden',
51+
width: 32
52+
}
53+
},
54+
children
55+
);
56+
57+
function render(withPolymiddleware) {
58+
renderWebChat(
59+
{
60+
directLine,
61+
polymiddleware: withPolymiddleware
62+
? Object.freeze([
63+
createAvatarPolymiddleware(next => request => {
64+
expect('styleOptions' in request).toBe(false);
65+
expect(Object.getOwnPropertyNames(request)).toEqual(['activity']);
66+
67+
const children = next(request)?.render();
68+
69+
return avatarComponent(PolymiddlewareAvatar, { activity: request.activity, children });
70+
})
71+
])
72+
: undefined,
73+
store,
74+
styleOptions: {
75+
botAvatarImage: '/assets/bot-avatar.jpg',
76+
botAvatarInitials: 'WC',
77+
userAvatarImage: '/assets/user-avatar.jpg',
78+
userAvatarInitials: 'WW'
79+
}
80+
},
81+
document.getElementById('webchat')
82+
);
83+
}
84+
85+
render(false);
86+
87+
await pageConditions.uiConnected();
88+
89+
await directLine.emulateIncomingActivity({
90+
from: { role: 'bot' },
91+
id: 'a-00001',
92+
text: 'Hello, World!',
93+
type: 'message'
94+
});
95+
96+
await directLine.emulateIncomingActivity({
97+
from: { role: 'user' },
98+
id: 'a-00002',
99+
text: 'Aloha!',
100+
type: 'message'
101+
});
102+
103+
// THEN: Should show an image with a green outside border with a red inside border.
104+
// Legacy middleware has higher priority than polymiddleware.
105+
await host.snapshot('local');
106+
107+
render(true);
108+
109+
await host.snapshot('local');
110+
});
111+
</script>
112+
</body>
113+
</html>

‎__tests__/html2/middleware/avatar/polymiddleware/changing.html.snap-1.png‎

16.4 KB
Loading

‎__tests__/html2/middleware/avatar/polymiddleware/changing.html.snap-2.png‎

15.6 KB
Loading

0 commit comments

Comments
 (0)