Skip to content

Commit ba10843

Browse files
CopilotOEvgeny
Copilot
and
OEvgeny
committed
Properly migrate fluentTheme/customElement tests to html2 structure
Co-authored-by: OEvgeny <2841858+OEvgeny@users.noreply.github.com>
1 parent cc099de commit ba10843

2 files changed

Lines changed: 98 additions & 73 deletions

File tree

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

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,23 @@
22
<html lang="en-US">
33
<head>
44
<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>
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"react": "https://esm.sh/react@18.3.1",
9+
"react-dom": "https://esm.sh/react-dom@18.3.1",
10+
"react-dom/": "https://esm.sh/react-dom@18.3.1/"
11+
}
12+
}
13+
</script>
814
<script crossorigin="anonymous" src="/test-harness.js"></script>
915
<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>
16+
<script type="module">
17+
import React from 'react';
18+
window.React = React;
19+
</script>
20+
<script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
21+
<script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
1222
<style>
1323
webchat-element {
1424
display: contents;
@@ -18,53 +28,56 @@
1828
<body>
1929
<webchat-element></webchat-element>
2030

21-
<script type="text/babel">
22-
const {
23-
React,
24-
ReactDOM: { render },
25-
WebChat: { FluentThemeProvider, ReactWebChat }
26-
} = window; // Imports in UMD fashion.
31+
<script type="module">
32+
import React from 'react';
33+
import { createRoot } from 'react-dom/client';
34+
35+
run(async function () {
36+
const {
37+
WebChat: { FluentThemeProvider, ReactWebChat }
38+
} = window; // Imports in UMD fashion.
2739

28-
class WebChatElement extends HTMLElement {
29-
constructor() {
30-
super();
40+
class WebChatElement extends HTMLElement {
41+
constructor() {
42+
super();
3143

32-
this.attachShadow({ mode: 'open' });
33-
}
44+
this.attachShadow({ mode: 'open' });
45+
}
46+
47+
connectedCallback() {
48+
const container = document.createElement('main');
3449

35-
connectedCallback() {
36-
const container = document.createElement('main');
50+
container.id = 'webchat';
3751

38-
container.id = 'webchat';
52+
this.shadowRoot.appendChild(container);
53+
this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
3954

40-
this.shadowRoot.appendChild(container);
41-
this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
55+
const directLine = testHelpers.createDirectLineWithTranscript(
56+
testHelpers.transcriptNavigation.generateTranscript()
57+
);
4258

43-
const directLine = testHelpers.createDirectLineWithTranscript(
44-
testHelpers.transcriptNavigation.generateTranscript()
45-
);
59+
const store = testHelpers.createStore();
4660

47-
const store = testHelpers.createStore();
61+
const App = () => React.createElement(
62+
ReactWebChat,
63+
{
64+
directLine: directLine,
65+
nonce: "test",
66+
store: store,
67+
styleOptions: { stylesRoot: this.shadowRoot }
68+
}
69+
);
4870

49-
const App = () => (
50-
<ReactWebChat
51-
directLine={directLine}
52-
nonce="test"
53-
store={store}
54-
styleOptions={{ stylesRoot: this.shadowRoot }}
55-
/>
56-
);
71+
const root = createRoot(container);
5772

58-
render(
59-
<FluentThemeProvider>
60-
<App />
61-
</FluentThemeProvider>,
62-
container
63-
);
73+
root.render(
74+
React.createElement(FluentThemeProvider, null,
75+
React.createElement(App)
76+
)
77+
);
78+
}
6479
}
65-
}
6680

67-
run(async function () {
6881
customElements.define('webchat-element', WebChatElement);
6982

7083
pageElements.root(document.querySelector('webchat-element').shadowRoot);

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

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,23 @@
22
<html lang="en-US">
33
<head>
44
<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>
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"react": "https://esm.sh/react@18.3.1",
9+
"react-dom": "https://esm.sh/react-dom@18.3.1",
10+
"react-dom/": "https://esm.sh/react-dom@18.3.1/"
11+
}
12+
}
13+
</script>
814
<script crossorigin="anonymous" src="/test-harness.js"></script>
915
<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>
16+
<script type="module">
17+
import React from 'react';
18+
window.React = React;
19+
</script>
20+
<script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
21+
<script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
1222
<style>
1323
webchat-element {
1424
display: contents;
@@ -20,42 +30,44 @@
2030
<main id="webchat"></main>
2131
</webchat-element>
2232

23-
<script type="text/babel">
24-
const {
25-
React,
26-
ReactDOM: { render },
27-
WebChat: { FluentThemeProvider, ReactWebChat }
28-
} = window; // Imports in UMD fashion.
33+
<script type="module">
34+
import React from 'react';
35+
import { createRoot } from 'react-dom/client';
36+
37+
run(async function () {
38+
const {
39+
WebChat: { FluentThemeProvider, ReactWebChat }
40+
} = window; // Imports in UMD fashion.
2941

30-
class WebChatElement extends HTMLElement {
31-
constructor() {
32-
super();
42+
class WebChatElement extends HTMLElement {
43+
constructor() {
44+
super();
3345

34-
this.attachShadow({ mode: 'open' });
35-
}
46+
this.attachShadow({ mode: 'open' });
47+
}
48+
49+
connectedCallback() {
50+
const slot = document.createElement('slot');
3651

37-
connectedCallback() {
38-
const slot = document.createElement('slot');
52+
this.shadowRoot.appendChild(slot);
3953

40-
this.shadowRoot.appendChild(slot);
54+
const directLine = testHelpers.createDirectLineWithTranscript(
55+
testHelpers.transcriptNavigation.generateTranscript()
56+
);
57+
const store = testHelpers.createStore();
4158

42-
const directLine = testHelpers.createDirectLineWithTranscript(
43-
testHelpers.transcriptNavigation.generateTranscript()
44-
);
45-
const store = testHelpers.createStore();
59+
const App = () => React.createElement(ReactWebChat, { directLine: directLine, store: store });
4660

47-
const App = () => <ReactWebChat directLine={directLine} store={store} />;
61+
const root = createRoot(this.querySelector('#webchat'));
4862

49-
render(
50-
<FluentThemeProvider>
51-
<App />
52-
</FluentThemeProvider>,
53-
this.querySelector('#webchat')
54-
);
63+
root.render(
64+
React.createElement(FluentThemeProvider, null,
65+
React.createElement(App)
66+
)
67+
);
68+
}
5569
}
56-
}
5770

58-
run(async function () {
5971
customElements.define('webchat-element', WebChatElement);
6072

6173
pageElements.root(document.querySelector('webchat-element'));

0 commit comments

Comments
 (0)