Skip to content

Commit f6f835b

Browse files
compulimcompulim
committed
Add tests
1 parent 5326629 commit f6f835b

6 files changed

Lines changed: 222 additions & 0 deletions

File tree

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

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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, styleOptions }) =>
39+
createElement(
40+
'div',
41+
{
42+
style: {
43+
borderRadius: styleOptions.avatarBorderRadius,
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(avatarBorderRadius) {
57+
renderWebChat(
58+
{
59+
avatarMiddleware: [
60+
() => next => request => {
61+
const children = next(request);
62+
63+
expect(Object.getOwnPropertyNames(request)).toEqual(['activity', 'fromUser', 'styleOptions']);
64+
expect(request.styleOptions).toHaveProperty('botAvatarInitials', 'WC');
65+
66+
return (...args) =>
67+
createElement(
68+
MiddlewareAvatar,
69+
{
70+
activity: request.activity,
71+
fromUser: request.fromUser,
72+
styleOptions: request.styleOptions
73+
},
74+
children(...args)
75+
);
76+
}
77+
],
78+
directLine,
79+
store,
80+
styleOptions: {
81+
avatarBorderRadius,
82+
botAvatarImage: '/assets/bot-avatar.jpg',
83+
botAvatarInitials: 'WC',
84+
userAvatarImage: '/assets/user-avatar.jpg',
85+
userAvatarInitials: 'WW'
86+
}
87+
},
88+
document.getElementById('webchat')
89+
);
90+
}
91+
92+
render(40);
93+
94+
await pageConditions.uiConnected();
95+
96+
await directLine.emulateIncomingActivity({
97+
from: { role: 'bot' },
98+
id: 'a-00001',
99+
text: 'Hello, World!',
100+
type: 'message'
101+
});
102+
103+
await directLine.emulateIncomingActivity({
104+
from: { role: 'user' },
105+
id: 'a-00002',
106+
text: 'Aloha!',
107+
type: 'message'
108+
});
109+
110+
// THEN: Should show an image with a green outside border with a red inside border.
111+
// Legacy middleware has higher priority than polymiddleware.
112+
await host.snapshot('local');
113+
114+
render(5);
115+
116+
await host.snapshot('local');
117+
});
118+
</script>
119+
</body>
120+
</html>

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

19.1 KB
Loading

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

18.9 KB
Loading

‎__tests__/html2/middleware/avatar/polymiddleware/defaultAvatar.styleOptions.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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, styleOptions }) =>
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(styleOptions) {
58+
renderWebChat(
59+
{
60+
directLine,
61+
store,
62+
styleOptions
63+
},
64+
document.getElementById('webchat')
65+
);
66+
}
67+
68+
render({
69+
botAvatarInitials: 'WC',
70+
userAvatarInitials: 'WW'
71+
});
72+
73+
await pageConditions.uiConnected();
74+
75+
await directLine.emulateIncomingActivity({
76+
from: { role: 'bot' },
77+
id: 'a-00001',
78+
text: 'Hello, World!',
79+
type: 'message'
80+
});
81+
82+
await directLine.emulateIncomingActivity({
83+
from: { role: 'user' },
84+
id: 'a-00002',
85+
text: 'Aloha!',
86+
type: 'message'
87+
});
88+
89+
// THEN: Should show an image with a green outside border with a red inside border.
90+
// Legacy middleware has higher priority than polymiddleware.
91+
await host.snapshot('local');
92+
93+
render({
94+
botAvatarInitials: '1',
95+
userAvatarInitials: '2'
96+
});
97+
98+
await host.snapshot('local');
99+
});
100+
</script>
101+
</body>
102+
</html>

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

11.4 KB
Loading

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

10.6 KB
Loading

0 commit comments

Comments
 (0)