From 4b4133f7869f9540cc6fb555db533bd72d06c5c5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:54:25 +0000
Subject: [PATCH 1/3] Initial plan for issue


From cc099dea4bb08848df53767675949add1e871288 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:06:33 +0000
Subject: [PATCH 2/3] Migrate fluentTheme/customElement tests from html to
 html2

Co-authored-by: OEvgeny <2841858+OEvgeny@users.noreply.github.com>
---
 .../fluentTheme/customElement/shadowRoot.html | 82 +++++++++++++++++++
 .../fluentTheme/customElement/slotted.html    | 69 ++++++++++++++++
 2 files changed, 151 insertions(+)
 create mode 100644 __tests__/html2/fluentTheme/customElement/shadowRoot.html
 create mode 100644 __tests__/html2/fluentTheme/customElement/slotted.html
diff --git a/__tests__/html2/fluentTheme/customElement/shadowRoot.html b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
new file mode 100644
index 0000000000..1386426544
--- /dev/null
+++ b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <style>
+      webchat-element {
+        display: contents;
+      }
+    </style>
+  </head>
+  <body>
+    <webchat-element></webchat-element>
+
+    <script type="text/babel">
+      const {
+        React,
+        ReactDOM: { render },
+        WebChat: { FluentThemeProvider, ReactWebChat }
+      } = window; // Imports in UMD fashion.
+
+      class WebChatElement extends HTMLElement {
+        constructor() {
+          super();
+
+          this.attachShadow({ mode: 'open' });
+        }
+
+        connectedCallback() {
+          const container = document.createElement('main');
+
+          container.id = 'webchat';
+
+          this.shadowRoot.appendChild(container);
+          this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
+
+          const directLine = testHelpers.createDirectLineWithTranscript(
+            testHelpers.transcriptNavigation.generateTranscript()
+          );
+
+          const store = testHelpers.createStore();
+
+          const App = () => (
+            <ReactWebChat
+              directLine={directLine}
+              nonce="test"
+              store={store}
+              styleOptions={{ stylesRoot: this.shadowRoot }}
+            />
+          );
+
+          render(
+            <FluentThemeProvider>
+              <App />
+            </FluentThemeProvider>,
+            container
+          );
+        }
+      }
+
+      run(async function () {
+        customElements.define('webchat-element', WebChatElement);
+
+        pageElements.root(document.querySelector('webchat-element').shadowRoot);
+
+        await pageConditions.uiConnected();
+        await pageConditions.scrollToBottomCompleted();
+        await host.snapshot('local');
+
+        for (const style of document.querySelector('webchat-element').shadowRoot.querySelectorAll('style')) {
+          expect(style.nonce).toBe('test');
+        }
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/__tests__/html2/fluentTheme/customElement/slotted.html b/__tests__/html2/fluentTheme/customElement/slotted.html
new file mode 100644
index 0000000000..d398c539e5
--- /dev/null
+++ b/__tests__/html2/fluentTheme/customElement/slotted.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <style>
+      webchat-element {
+        display: contents;
+      }
+    </style>
+  </head>
+  <body>
+    <webchat-element>
+      <main id="webchat"></main>
+    </webchat-element>
+
+    <script type="text/babel">
+      const {
+        React,
+        ReactDOM: { render },
+        WebChat: { FluentThemeProvider, ReactWebChat }
+      } = window; // Imports in UMD fashion.
+
+      class WebChatElement extends HTMLElement {
+        constructor() {
+          super();
+
+          this.attachShadow({ mode: 'open' });
+        }
+
+        connectedCallback() {
+          const slot = document.createElement('slot');
+
+          this.shadowRoot.appendChild(slot);
+
+          const directLine = testHelpers.createDirectLineWithTranscript(
+            testHelpers.transcriptNavigation.generateTranscript()
+          );
+          const store = testHelpers.createStore();
+
+          const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+          render(
+            <FluentThemeProvider>
+              <App />
+            </FluentThemeProvider>,
+            this.querySelector('#webchat')
+          );
+        }
+      }
+
+      run(async function () {
+        customElements.define('webchat-element', WebChatElement);
+
+        pageElements.root(document.querySelector('webchat-element'));
+
+        await pageConditions.uiConnected();
+        await pageConditions.scrollToBottomCompleted();
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file

From ba10843b857d38448ca2efab6bd4a236ed3d15f1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Jun 2025 18:47:05 +0000
Subject: [PATCH 3/3] Properly migrate fluentTheme/customElement tests to html2
 structure

Co-authored-by: OEvgeny <2841858+OEvgeny@users.noreply.github.com>
---
 .../fluentTheme/customElement/shadowRoot.html | 95 +++++++++++--------
 .../fluentTheme/customElement/slotted.html    | 76 ++++++++-------
 2 files changed, 98 insertions(+), 73 deletions(-)

diff --git a/__tests__/html2/fluentTheme/customElement/shadowRoot.html b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
index 1386426544..ee109e263f 100644
--- a/__tests__/html2/fluentTheme/customElement/shadowRoot.html
+++ b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
@@ -2,13 +2,23 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
-    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
-    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18.3.1",
+          "react-dom": "https://esm.sh/react-dom@18.3.1",
+          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
+        }
+      }
+    </script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>
     <script crossorigin="anonymous" src="/test-page-object.js"></script>
-    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
-    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
     <style>
       webchat-element {
         display: contents;
@@ -18,53 +28,56 @@
   <body>
     <webchat-element></webchat-element>
 
-    <script type="text/babel">
-      const {
-        React,
-        ReactDOM: { render },
-        WebChat: { FluentThemeProvider, ReactWebChat }
-      } = window; // Imports in UMD fashion.
+    <script type="module">
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
 
-      class WebChatElement extends HTMLElement {
-        constructor() {
-          super();
+        class WebChatElement extends HTMLElement {
+          constructor() {
+            super();
 
-          this.attachShadow({ mode: 'open' });
-        }
+            this.attachShadow({ mode: 'open' });
+          }
+
+          connectedCallback() {
+            const container = document.createElement('main');
 
-        connectedCallback() {
-          const container = document.createElement('main');
+            container.id = 'webchat';
 
-          container.id = 'webchat';
+            this.shadowRoot.appendChild(container);
+            this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
 
-          this.shadowRoot.appendChild(container);
-          this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
+            const directLine = testHelpers.createDirectLineWithTranscript(
+              testHelpers.transcriptNavigation.generateTranscript()
+            );
 
-          const directLine = testHelpers.createDirectLineWithTranscript(
-            testHelpers.transcriptNavigation.generateTranscript()
-          );
+            const store = testHelpers.createStore();
 
-          const store = testHelpers.createStore();
+            const App = () => React.createElement(
+              ReactWebChat,
+              {
+                directLine: directLine,
+                nonce: "test",
+                store: store,
+                styleOptions: { stylesRoot: this.shadowRoot }
+              }
+            );
 
-          const App = () => (
-            <ReactWebChat
-              directLine={directLine}
-              nonce="test"
-              store={store}
-              styleOptions={{ stylesRoot: this.shadowRoot }}
-            />
-          );
+            const root = createRoot(container);
 
-          render(
-            <FluentThemeProvider>
-              <App />
-            </FluentThemeProvider>,
-            container
-          );
+            root.render(
+              React.createElement(FluentThemeProvider, null,
+                React.createElement(App)
+              )
+            );
+          }
         }
-      }
 
-      run(async function () {
         customElements.define('webchat-element', WebChatElement);
 
         pageElements.root(document.querySelector('webchat-element').shadowRoot);
diff --git a/__tests__/html2/fluentTheme/customElement/slotted.html b/__tests__/html2/fluentTheme/customElement/slotted.html
index d398c539e5..a56173c82a 100644
--- a/__tests__/html2/fluentTheme/customElement/slotted.html
+++ b/__tests__/html2/fluentTheme/customElement/slotted.html
@@ -2,13 +2,23 @@
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
-    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
-    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18.3.1",
+          "react-dom": "https://esm.sh/react-dom@18.3.1",
+          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
+        }
+      }
+    </script>
     <script crossorigin="anonymous" src="/test-harness.js"></script>
     <script crossorigin="anonymous" src="/test-page-object.js"></script>
-    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
-    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
     <style>
       webchat-element {
         display: contents;
@@ -20,42 +30,44 @@
       <main id="webchat"></main>
     </webchat-element>
 
-    <script type="text/babel">
-      const {
-        React,
-        ReactDOM: { render },
-        WebChat: { FluentThemeProvider, ReactWebChat }
-      } = window; // Imports in UMD fashion.
+    <script type="module">
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
 
-      class WebChatElement extends HTMLElement {
-        constructor() {
-          super();
+        class WebChatElement extends HTMLElement {
+          constructor() {
+            super();
 
-          this.attachShadow({ mode: 'open' });
-        }
+            this.attachShadow({ mode: 'open' });
+          }
+
+          connectedCallback() {
+            const slot = document.createElement('slot');
 
-        connectedCallback() {
-          const slot = document.createElement('slot');
+            this.shadowRoot.appendChild(slot);
 
-          this.shadowRoot.appendChild(slot);
+            const directLine = testHelpers.createDirectLineWithTranscript(
+              testHelpers.transcriptNavigation.generateTranscript()
+            );
+            const store = testHelpers.createStore();
 
-          const directLine = testHelpers.createDirectLineWithTranscript(
-            testHelpers.transcriptNavigation.generateTranscript()
-          );
-          const store = testHelpers.createStore();
+            const App = () => React.createElement(ReactWebChat, { directLine: directLine, store: store });
 
-          const App = () => <ReactWebChat directLine={directLine} store={store} />;
+            const root = createRoot(this.querySelector('#webchat'));
 
-          render(
-            <FluentThemeProvider>
-              <App />
-            </FluentThemeProvider>,
-            this.querySelector('#webchat')
-          );
+            root.render(
+              React.createElement(FluentThemeProvider, null,
+                React.createElement(App)
+              )
+            );
+          }
         }
-      }
 
-      run(async function () {
         customElements.define('webchat-element', WebChatElement);
 
         pageElements.root(document.querySelector('webchat-element'));
