Skip to content

Commit d4ad893

Browse files
committed
Add test
1 parent 63497af commit d4ad893

2 files changed

Lines changed: 112 additions & 0 deletions

File tree

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
7+
<script crossorigin="anonymous" src="/test-harness.js"></script>
8+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
9+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
10+
<link href="grouping.css" rel="stylesheet" type="text/css" />
11+
</head>
12+
13+
<body>
14+
<main id="webchat"></main>
15+
<script type="module">
16+
run(async function () {
17+
const {
18+
React: { createElement },
19+
WebChat: { renderWebChat }
20+
} = window; // Imports in UMD fashion.
21+
22+
const clock = lolex.createClock();
23+
24+
const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
25+
26+
const decoratorMiddleware = [
27+
init =>
28+
init === 'activity grouping' &&
29+
(next => request => {
30+
const DownstreamComponent = next(request);
31+
32+
if (request.type) {
33+
return ({ activities, children }) =>
34+
createElement(
35+
'div',
36+
{ className: `grouping grouping--${request.type}` },
37+
createElement(DownstreamComponent, { activities }, children)
38+
);
39+
}
40+
41+
return DownstreamComponent;
42+
})
43+
];
44+
45+
renderWebChat(
46+
{
47+
decoratorMiddleware,
48+
directLine,
49+
ponyfill: clock,
50+
store,
51+
styleOptions: {
52+
botAvatarBackgroundColor: 'black',
53+
botAvatarInitials: 'WC',
54+
// WHEN: All groupings are disabled.
55+
groupActivitiesBy: [],
56+
groupTimestamp: 30_000,
57+
userAvatarBackgroundColor: 'black',
58+
userAvatarInitials: 'WW'
59+
}
60+
},
61+
document.getElementById('webchat')
62+
);
63+
64+
await pageConditions.webChatRendered();
65+
66+
clock.tick(600);
67+
68+
await pageConditions.uiConnected();
69+
70+
await directLine.emulateIncomingActivity({
71+
from: { id: 'bot', role: 'bot' },
72+
text: `Bot 1: t=${(clock.Date.now() - 600) / 1_000}s`,
73+
timestamp: 0,
74+
type: 'message'
75+
});
76+
77+
clock.tick(10_000);
78+
79+
await directLine.emulateIncomingActivity({
80+
from: { id: 'bot', role: 'bot' },
81+
text: `Bot 2: t=${(clock.Date.now() - 600) / 1_000}s`,
82+
type: 'message'
83+
});
84+
85+
clock.tick(110_000);
86+
87+
await directLine.emulateIncomingActivity({
88+
from: { id: 'bot', role: 'bot' },
89+
text: `Bot 3: t=${(clock.Date.now() - 600) / 1_000}s`,
90+
type: 'message'
91+
});
92+
93+
await directLine.emulateIncomingActivity({
94+
from: { id: 'user', role: 'user' },
95+
text: `User 1: t=${(clock.Date.now() - 600) / 1_000}s`,
96+
type: 'message'
97+
});
98+
99+
clock.tick(10_000);
100+
101+
await directLine.emulateIncomingActivity({
102+
from: { id: 'user', role: 'user' },
103+
text: `User 2: t=${(clock.Date.now() - 600) / 1_000}s`,
104+
type: 'message'
105+
});
106+
107+
// THEN: Should show avatar and timestamp on every activity as all activities are ungrouped (or activity in their own group.)
108+
await host.snapshot('local');
109+
});
110+
</script>
111+
</body>
112+
</html>
27.5 KB
Loading

0 commit comments

Comments
 (0)