Skip to content

Commit cc099de

Browse files
CopilotOEvgeny
Copilot
and
OEvgeny
committed
Migrate fluentTheme/customElement tests from html to html2
Co-authored-by: OEvgeny <2841858+OEvgeny@users.noreply.github.com>
1 parent 4b4133f commit cc099de

2 files changed

Lines changed: 151 additions & 0 deletions

File tree

‎__tests__/html2/fluentTheme/customElement/shadowRoot.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
<style>
13+
webchat-element {
14+
display: contents;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<webchat-element></webchat-element>
20+
21+
<script type="text/babel">
22+
const {
23+
React,
24+
ReactDOM: { render },
25+
WebChat: { FluentThemeProvider, ReactWebChat }
26+
} = window; // Imports in UMD fashion.
27+
28+
class WebChatElement extends HTMLElement {
29+
constructor() {
30+
super();
31+
32+
this.attachShadow({ mode: 'open' });
33+
}
34+
35+
connectedCallback() {
36+
const container = document.createElement('main');
37+
38+
container.id = 'webchat';
39+
40+
this.shadowRoot.appendChild(container);
41+
this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
42+
43+
const directLine = testHelpers.createDirectLineWithTranscript(
44+
testHelpers.transcriptNavigation.generateTranscript()
45+
);
46+
47+
const store = testHelpers.createStore();
48+
49+
const App = () => (
50+
<ReactWebChat
51+
directLine={directLine}
52+
nonce="test"
53+
store={store}
54+
styleOptions={{ stylesRoot: this.shadowRoot }}
55+
/>
56+
);
57+
58+
render(
59+
<FluentThemeProvider>
60+
<App />
61+
</FluentThemeProvider>,
62+
container
63+
);
64+
}
65+
}
66+
67+
run(async function () {
68+
customElements.define('webchat-element', WebChatElement);
69+
70+
pageElements.root(document.querySelector('webchat-element').shadowRoot);
71+
72+
await pageConditions.uiConnected();
73+
await pageConditions.scrollToBottomCompleted();
74+
await host.snapshot('local');
75+
76+
for (const style of document.querySelector('webchat-element').shadowRoot.querySelectorAll('style')) {
77+
expect(style.nonce).toBe('test');
78+
}
79+
});
80+
</script>
81+
</body>
82+
</html>

‎__tests__/html2/fluentTheme/customElement/slotted.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
<style>
13+
webchat-element {
14+
display: contents;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<webchat-element>
20+
<main id="webchat"></main>
21+
</webchat-element>
22+
23+
<script type="text/babel">
24+
const {
25+
React,
26+
ReactDOM: { render },
27+
WebChat: { FluentThemeProvider, ReactWebChat }
28+
} = window; // Imports in UMD fashion.
29+
30+
class WebChatElement extends HTMLElement {
31+
constructor() {
32+
super();
33+
34+
this.attachShadow({ mode: 'open' });
35+
}
36+
37+
connectedCallback() {
38+
const slot = document.createElement('slot');
39+
40+
this.shadowRoot.appendChild(slot);
41+
42+
const directLine = testHelpers.createDirectLineWithTranscript(
43+
testHelpers.transcriptNavigation.generateTranscript()
44+
);
45+
const store = testHelpers.createStore();
46+
47+
const App = () => <ReactWebChat directLine={directLine} store={store} />;
48+
49+
render(
50+
<FluentThemeProvider>
51+
<App />
52+
</FluentThemeProvider>,
53+
this.querySelector('#webchat')
54+
);
55+
}
56+
}
57+
58+
run(async function () {
59+
customElements.define('webchat-element', WebChatElement);
60+
61+
pageElements.root(document.querySelector('webchat-element'));
62+
63+
await pageConditions.uiConnected();
64+
await pageConditions.scrollToBottomCompleted();
65+
await host.snapshot('local');
66+
});
67+
</script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)