Skip to content

Commit 25cd957

Browse files
compulimcompulim
committed
Add tests
1 parent 9525a4d commit 25cd957

3 files changed

Lines changed: 259 additions & 71 deletions

File tree

‎__tests__/html2/middleware/cacheability.html‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎__tests__/html2/middleware/memoization.changeRelatedMiddleware.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"jest-mock": "https://esm.sh/jest-mock",
9+
"react": "https://esm.sh/react@18.3.1",
10+
"react-dom": "https://esm.sh/react-dom@18.3.1"
11+
}
12+
}
13+
</script>
14+
<script crossorigin="anonymous" src="/test-harness.js"></script>
15+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
16+
<script type="module">
17+
import React from 'react';
18+
import ReactDOM from 'react-dom';
19+
20+
window.React = React;
21+
window.ReactDOM = ReactDOM;
22+
</script>
23+
<script crossorigin="anonymous" defer src="/__dist__/webchat-es5.js"></script>
24+
<style type="text/css">
25+
.system-under-test__activity {
26+
display: flex;
27+
flex-direction: column;
28+
gap: 5px;
29+
}
30+
31+
.system-under-test__counter {
32+
background-color: DarkSlateGray;
33+
border-radius: 4px;
34+
color: White;
35+
font-family: sans-serif;
36+
font-size: 75%;
37+
margin-left: 10px;
38+
padding: 0.2em 0.4em;
39+
width: fit-content;
40+
}
41+
42+
.system-under-test__counter.system-under-test__counter--red {
43+
background-color: Red;
44+
}
45+
46+
.system-under-test__counter.system-under-test__counter--green {
47+
background-color: Green;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<main id="webchat"></main>
53+
<script type="module">
54+
import { fn } from 'jest-mock';
55+
import { createElement } from 'react';
56+
57+
run(async function () {
58+
const {
59+
testHelpers: { createDirectLineEmulator },
60+
WebChat: { activityComponent, createActivityPolyMiddleware }
61+
} = window;
62+
63+
const { directLine, store } = createDirectLineEmulator();
64+
65+
const renderCall = fn(() => renderCall.mock.calls.length);
66+
67+
const MyActivityMiddleware = ({ activity, renderNext, variant }) => {
68+
const numCalled = renderCall();
69+
70+
return createElement(
71+
'div',
72+
{ className: 'system-under-test__activity' },
73+
createElement('div', {}, renderNext?.render()),
74+
createElement(
75+
'small',
76+
{ className: `system-under-test__counter system-under-test__counter--${variant}` },
77+
`Rendered times: ${numCalled}`
78+
)
79+
);
80+
};
81+
82+
const activityPolyMiddlewareRed = createActivityPolyMiddleware(
83+
next => request =>
84+
activityComponent(MyActivityMiddleware, {
85+
activity: request.activity,
86+
renderNext: next(request),
87+
variant: 'red'
88+
})
89+
);
90+
91+
const activityPolyMiddlewareGreen = createActivityPolyMiddleware(
92+
next => request =>
93+
activityComponent(MyActivityMiddleware, {
94+
activity: request.activity,
95+
renderNext: next(request),
96+
variant: 'green'
97+
})
98+
);
99+
100+
const dummyPolyMiddleware = init => init === 'dummy' && (next => request => next(request));
101+
102+
WebChat.renderWebChat(
103+
{
104+
directLine,
105+
polyMiddleware: [activityPolyMiddlewareRed],
106+
store
107+
},
108+
document.getElementById('webchat')
109+
);
110+
111+
await pageConditions.uiConnected();
112+
113+
await directLine.emulateIncomingActivity({
114+
text: 'Hello, World!',
115+
type: 'message'
116+
});
117+
118+
// THEN: Should render once.
119+
expect(renderCall).toHaveBeenCalledTimes(1);
120+
121+
// THEN: Should capture a red badge.
122+
await host.snapshot('local');
123+
124+
WebChat.renderWebChat(
125+
{
126+
directLine,
127+
polyMiddleware: [activityPolyMiddlewareGreen],
128+
store
129+
},
130+
document.getElementById('webchat')
131+
);
132+
133+
// THEN: Should render twice.
134+
expect(renderCall).toHaveBeenCalledTimes(2);
135+
136+
// THEN: Should capture a green badge.
137+
await host.snapshot('local');
138+
});
139+
</script>
140+
</body>
141+
</html>

‎__tests__/html2/middleware/memoization.changeUnrelatedMiddleware.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"jest-mock": "https://esm.sh/jest-mock",
9+
"react": "https://esm.sh/react@18.3.1",
10+
"react-dom": "https://esm.sh/react-dom@18.3.1"
11+
}
12+
}
13+
</script>
14+
<script crossorigin="anonymous" src="/test-harness.js"></script>
15+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
16+
<script type="module">
17+
import React from 'react';
18+
import ReactDOM from 'react-dom';
19+
20+
window.React = React;
21+
window.ReactDOM = ReactDOM;
22+
</script>
23+
<script crossorigin="anonymous" defer src="/__dist__/webchat-es5.js"></script>
24+
<style type="text/css">
25+
.system-under-test__activity {
26+
display: flex;
27+
flex-direction: column;
28+
gap: 5px;
29+
}
30+
31+
.system-under-test__counter {
32+
background-color: DarkSlateGray;
33+
border-radius: 4px;
34+
color: White;
35+
font-family: sans-serif;
36+
font-size: 75%;
37+
margin-left: 10px;
38+
padding: 0.2em 0.4em;
39+
width: fit-content;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<main id="webchat"></main>
45+
<script type="module">
46+
import { fn } from 'jest-mock';
47+
import { createElement } from 'react';
48+
49+
run(async function () {
50+
const {
51+
testHelpers: { createDirectLineEmulator },
52+
WebChat: { activityComponent, createActivityPolyMiddleware }
53+
} = window;
54+
55+
const { directLine, store } = createDirectLineEmulator();
56+
57+
const renderCall = fn(() => renderCall.mock.calls.length);
58+
59+
const MyActivityMiddleware = ({ activity, renderNext, variant }) => {
60+
const numCalled = renderCall();
61+
62+
return createElement(
63+
'div',
64+
{ className: 'system-under-test__activity' },
65+
createElement('div', {}, renderNext?.render()),
66+
createElement('small', { className: 'system-under-test__counter' }, `Rendered times: ${numCalled}`)
67+
);
68+
};
69+
70+
const activityPolyMiddleware = createActivityPolyMiddleware(
71+
next => request =>
72+
activityComponent(MyActivityMiddleware, {
73+
activity: request.activity,
74+
renderNext: next(request)
75+
})
76+
);
77+
78+
const dummyPolyMiddleware = init => init === 'dummy' && (next => request => next(request));
79+
80+
WebChat.renderWebChat(
81+
{
82+
directLine,
83+
polyMiddleware: [dummyPolyMiddleware, activityPolyMiddleware],
84+
store
85+
},
86+
document.getElementById('webchat')
87+
);
88+
89+
await pageConditions.uiConnected();
90+
91+
await directLine.emulateIncomingActivity({
92+
text: 'Hello, World!',
93+
type: 'message'
94+
});
95+
96+
// THEN: Should render once.
97+
expect(renderCall).toHaveBeenCalledTimes(1);
98+
99+
await host.snapshot('local');
100+
101+
WebChat.renderWebChat(
102+
{
103+
directLine,
104+
// Modify an unrelated middleware.
105+
polyMiddleware: [dummyPolyMiddleware.bind(), activityPolyMiddleware],
106+
store
107+
},
108+
document.getElementById('webchat')
109+
);
110+
111+
// THEN: Should still render once.
112+
expect(renderCall).toHaveBeenCalledTimes(1);
113+
114+
await host.snapshot('local');
115+
});
116+
</script>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)