From 1447de2e9fc2352ddbc055be66343fd3b059f0d3 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 06:05:52 +0000
Subject: [PATCH 01/56] Migrate useActivities

---
 __tests__/assets/esm/createRenderHook.js      | 31 +++++++
 __tests__/hooks/useActivity.js                | 55 -----------
 .../html2/hooks/2/useActivities.getter.html   | 91 +++++++++++++++++++
 .../html2/hooks/2/useActivities.setter.html   | 45 +++++++++
 .../simple/fatModule/simple.runHook.html      | 42 +++++++++
 5 files changed, 209 insertions(+), 55 deletions(-)
 create mode 100644 __tests__/assets/esm/createRenderHook.js
 delete mode 100644 __tests__/hooks/useActivity.js
 create mode 100644 __tests__/html2/hooks/2/useActivities.getter.html
 create mode 100644 __tests__/html2/hooks/2/useActivities.setter.html
 create mode 100644 __tests__/html2/simple/fatModule/simple.runHook.html

diff --git a/__tests__/assets/esm/createRenderHook.js b/__tests__/assets/esm/createRenderHook.js
new file mode 100644
index 0000000000..4cadb2f230
--- /dev/null
+++ b/__tests__/assets/esm/createRenderHook.js
@@ -0,0 +1,31 @@
+import { BasicWebChat, Composer } from 'botframework-webchat/component';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function RunFunction({ fn }) {
+  fn();
+
+  return false;
+}
+
+export default function createRenderHook(
+  /** @type {HTMLElement} */
+  element,
+  { directLine, renderWebChat, store }
+) {
+  const root = createRoot(element);
+
+  return fn =>
+    new Promise(resolve =>
+      root.render(
+        createElement(
+          Composer,
+          { directLine, store },
+          ...[
+            ...(renderWebChat ? [createElement(BasicWebChat)] : []),
+            createElement(RunFunction, { fn: () => resolve(fn?.()), key: Date.now() })
+          ]
+        )
+      )
+    );
+}
diff --git a/__tests__/hooks/useActivity.js b/__tests__/hooks/useActivity.js
deleted file mode 100644
index 381323d2bf..0000000000
--- a/__tests__/hooks/useActivity.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('should return list of activities', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: true });
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-
-  const [activities] = await pageObjects.runHook('useActivities');
-  const cleanedActivities = activities
-    .filter(({ type }) => type === 'message')
-    .map(({ from: { role }, speak, text, textFormat, type }) => ({ from: { role }, speak, text, textFormat, type }));
-
-  expect(cleanedActivities).toMatchInlineSnapshot(`
-    [
-      {
-        "from": {
-          "role": "user",
-        },
-        "speak": undefined,
-        "text": "Hello, World!",
-        "textFormat": "plain",
-        "type": "message",
-      },
-      {
-        "from": {
-          "role": "bot",
-        },
-        "speak": "Unknown command: I don't know Hello, World!. You can say "help" to learn more.",
-        "text": "Unknown command: \`Hello, World!\`.
-
-    Type \`help\` to learn more.",
-        "textFormat": undefined,
-        "type": "message",
-      },
-    ]
-  `);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setActivities] = await pageObjects.runHook('useActivities');
-
-  expect(setActivities).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useActivities.getter.html b/__tests__/html2/hooks/2/useActivities.getter.html
new file mode 100644
index 0000000000..027ade3af7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useActivities.getter.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useActivities } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          renderWebChat: true,
+          store
+        });
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        const { resolveAll } = await directLine.actPostActivity(() =>
+          pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: false })
+        );
+
+        await resolveAll();
+
+        await directLine.emulateIncomingActivity({
+          from: { role: 'bot' },
+          speak: 'Unknown command: I don\'t know Hello, World!. You can say "help" to learn more.',
+          text: 'Unknown command: \`Hello, World!\`.\n\nType \`help\` to learn more.',
+          type: 'message'
+        });
+
+        const [activities] = await renderHook(() => useActivities());
+
+        const cleanedActivities = activities
+          .filter(({ type }) => type === 'message')
+          .map(({ from: { role }, speak, text, textFormat, type }) => ({
+            from: { role },
+            speak,
+            text,
+            textFormat,
+            type
+          }));
+
+        expect(cleanedActivities).toEqual([
+          {
+            from: {
+              role: 'user'
+            },
+            speak: undefined,
+            text: 'Hello, World!',
+            textFormat: 'plain',
+            type: 'message'
+          },
+          {
+            from: {
+              role: 'bot'
+            },
+            speak: 'Unknown command: I don\'t know Hello, World!. You can say "help" to learn more.',
+            text: 'Unknown command: \`Hello, World!\`.\n\nType \`help\` to learn more.',
+            textFormat: undefined,
+            type: 'message'
+          }
+        ]);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useActivities.setter.html b/__tests__/html2/hooks/2/useActivities.setter.html
new file mode 100644
index 0000000000..95db97401a
--- /dev/null
+++ b/__tests__/html2/hooks/2/useActivities.setter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useActivities } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const activitiesState = await renderHook(() => useActivities());
+
+        expect(activitiesState).toEqual([[]]);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/simple/fatModule/simple.runHook.html b/__tests__/html2/simple/fatModule/simple.runHook.html
new file mode 100644
index 0000000000..5ef69db4bf
--- /dev/null
+++ b/__tests__/html2/simple/fatModule/simple.runHook.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const language = await renderHook(() => useLanguage());
+
+        expect(language[0]).toEqual('en-US');
+      });
+    </script>
+  </body>
+</html>

From 234f7cf21eae85031b515d1c278b38e147ac9279 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 06:48:55 +0000
Subject: [PATCH 02/56] Migrate useAdaptiveCardsHostConfig

---
 __tests__/assets/esm/createRenderHook.js      |  5 +-
 __tests__/hooks/useAdaptiveCardsHostConfig.js | 39 ---------------
 .../html2/hooks/2/useActivities.getter.html   | 10 ++--
 .../html2/hooks/2/useActivities.setter.html   |  5 +-
 ...daptiveCardsHostConfig.getter.default.html | 45 +++++++++++++++++
 .../2/useAdaptiveCardsHostConfig.getter.html  | 50 +++++++++++++++++++
 .../2/useAdaptiveCardsHostConfig.setter.html  | 45 +++++++++++++++++
 7 files changed, 149 insertions(+), 50 deletions(-)
 delete mode 100644 __tests__/hooks/useAdaptiveCardsHostConfig.js
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html

diff --git a/__tests__/assets/esm/createRenderHook.js b/__tests__/assets/esm/createRenderHook.js
index 4cadb2f230..98944bba1a 100644
--- a/__tests__/assets/esm/createRenderHook.js
+++ b/__tests__/assets/esm/createRenderHook.js
@@ -11,7 +11,8 @@ function RunFunction({ fn }) {
 export default function createRenderHook(
   /** @type {HTMLElement} */
   element,
-  { directLine, renderWebChat, store }
+  props,
+  { renderWebChat } = {}
 ) {
   const root = createRoot(element);
 
@@ -20,7 +21,7 @@ export default function createRenderHook(
       root.render(
         createElement(
           Composer,
-          { directLine, store },
+          props,
           ...[
             ...(renderWebChat ? [createElement(BasicWebChat)] : []),
             createElement(RunFunction, { fn: () => resolve(fn?.()), key: Date.now() })
diff --git a/__tests__/hooks/useAdaptiveCardsHostConfig.js b/__tests__/hooks/useAdaptiveCardsHostConfig.js
deleted file mode 100644
index a2a0af612c..0000000000
--- a/__tests__/hooks/useAdaptiveCardsHostConfig.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return Adaptive Cards host config set in props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      adaptiveCardsHostConfig: {
-        supportsInteractivity: false
-      }
-    }
-  });
-
-  const [adaptiveCardsHostConfig] = await pageObjects.runHook('useAdaptiveCardsHostConfig');
-
-  expect(adaptiveCardsHostConfig).toMatchInlineSnapshot(`
-    {
-      "supportsInteractivity": false,
-    }
-  `);
-});
-
-test('getter should return default Adaptive Cards host config if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [adaptiveCardsHostConfig] = await pageObjects.runHook('useAdaptiveCardsHostConfig');
-
-  expect(adaptiveCardsHostConfig.supportsInteractivity).toMatchInlineSnapshot(`true`);
-});
-
-test('setter should be undefined', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setAdaptiveCardsHostConfig] = await pageObjects.runHook('useAdaptiveCardsHostConfig');
-
-  expect(setAdaptiveCardsHostConfig).toBeUndefined();
-});
diff --git a/__tests__/html2/hooks/2/useActivities.getter.html b/__tests__/html2/hooks/2/useActivities.getter.html
index 027ade3af7..c2d7c52fa2 100644
--- a/__tests__/html2/hooks/2/useActivities.getter.html
+++ b/__tests__/html2/hooks/2/useActivities.getter.html
@@ -31,11 +31,11 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          renderWebChat: true,
-          store
-        });
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
 
         await renderHook();
         await pageConditions.uiConnected();
diff --git a/__tests__/html2/hooks/2/useActivities.setter.html b/__tests__/html2/hooks/2/useActivities.setter.html
index 95db97401a..085dcff462 100644
--- a/__tests__/html2/hooks/2/useActivities.setter.html
+++ b/__tests__/html2/hooks/2/useActivities.setter.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const activitiesState = await renderHook(() => useActivities());
 
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
new file mode 100644
index 0000000000..24e78ba63f
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsHostConfig } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const [adaptiveCardsHostConfig] = await renderHook(() => useAdaptiveCardsHostConfig());
+
+        expect(adaptiveCardsHostConfig).toHaveProperty('supportsInteractivity', true);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html
new file mode 100644
index 0000000000..d1f926db1a
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsHostConfig } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          adaptiveCardsHostConfig: {
+            supportsInteractivity: false
+          },
+          directLine,
+          store
+        });
+
+        const [adaptiveCardsHostConfig] = await renderHook(() => useAdaptiveCardsHostConfig());
+
+        expect(adaptiveCardsHostConfig).toEqual({
+          supportsInteractivity: false
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
new file mode 100644
index 0000000000..4d41d50d97
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsHostConfig } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const adaptiveCardsHostConfigState = await renderHook(() => useAdaptiveCardsHostConfig());
+
+        expect(adaptiveCardsHostConfigState).toEqual([expect.objectContaining({})]);
+      });
+    </script>
+  </body>
+</html>

From e6dd7009bb16b439537a757027428c935637db59 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 06:57:24 +0000
Subject: [PATCH 03/56] Migrate useAdaptiveCardsPackage

---
 __tests__/hooks/useAdaptiveCardsPackage.js    | 45 ------------------
 ...seAdaptiveCardsPackage.getter.default.html | 45 ++++++++++++++++++
 .../2/useAdaptiveCardsPackage.getter.html     | 46 +++++++++++++++++++
 .../2/useAdaptiveCardsPackage.setter.html     | 46 +++++++++++++++++++
 4 files changed, 137 insertions(+), 45 deletions(-)
 delete mode 100644 __tests__/hooks/useAdaptiveCardsPackage.js
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html
 create mode 100644 __tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html

diff --git a/__tests__/hooks/useAdaptiveCardsPackage.js b/__tests__/hooks/useAdaptiveCardsPackage.js
deleted file mode 100644
index 971ddaa1c9..0000000000
--- a/__tests__/hooks/useAdaptiveCardsPackage.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return Adaptive Cards package set in props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      adaptiveCardsPackage: {
-        __DUMMY__: 0
-      }
-    }
-  });
-
-  const [adaptiveCardsPackage] = await pageObjects.runHook('useAdaptiveCardsPackage');
-
-  expect(adaptiveCardsPackage).toMatchInlineSnapshot(`
-    {
-      "__DUMMY__": 0,
-    }
-  `);
-});
-
-test('getter should return default Adaptive Cards package if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [adaptiveCardsPackage] = await pageObjects.runHook('useAdaptiveCardsPackage', [], results =>
-    new results[0].Version().major.toString()
-  );
-
-  expect(adaptiveCardsPackage).toMatchInlineSnapshot(`"1"`);
-});
-
-test('setter should be undefined', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const setAdaptiveCardsPackage = await pageObjects.runHook(
-    'useAdaptiveCardsPackage',
-    [],
-    results => typeof results[1] === 'undefined'
-  );
-
-  expect(setAdaptiveCardsPackage).toMatchInlineSnapshot(`true`);
-});
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
new file mode 100644
index 0000000000..e0c1a0a46b
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsPackage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const [adaptiveCardsPackage] = await renderHook(() => useAdaptiveCardsPackage());
+
+        expect(new adaptiveCardsPackage.Version()).toHaveProperty('major', 1);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html
new file mode 100644
index 0000000000..9aab89daa2
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsPackage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          adaptiveCardsPackage: { __DUMMY__: 0 },
+          directLine,
+          store
+        });
+
+        const [adaptiveCardsPackage] = await renderHook(() => useAdaptiveCardsPackage());
+
+        expect(adaptiveCardsPackage).toEqual({ __DUMMY__: 0 });
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html
new file mode 100644
index 0000000000..0ceb2e8650
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAdaptiveCardsPackage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          adaptiveCardsPackage: { __DUMMY__: 0 },
+          directLine,
+          store
+        });
+
+        const adaptiveCardsPackageState = await renderHook(() => useAdaptiveCardsPackage());
+
+        expect(adaptiveCardsPackageState).toEqual([expect.objectContaining({})]);
+      });
+    </script>
+  </body>
+</html>

From e3e5c6002abc4a606aa3c986d7834f7398caf4a9 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 06:59:29 +0000
Subject: [PATCH 04/56] Migrate useAvatarForBot

---
 __tests__/hooks/useAvatarForBot.js            | 32 ------------
 .../html2/hooks/2/useAvatarForBot.getter.html | 52 +++++++++++++++++++
 .../html2/hooks/2/useAvatarForBot.setter.html | 45 ++++++++++++++++
 3 files changed, 97 insertions(+), 32 deletions(-)
 delete mode 100644 __tests__/hooks/useAvatarForBot.js
 create mode 100644 __tests__/html2/hooks/2/useAvatarForBot.getter.html
 create mode 100644 __tests__/html2/hooks/2/useAvatarForBot.setter.html

diff --git a/__tests__/hooks/useAvatarForBot.js b/__tests__/hooks/useAvatarForBot.js
deleted file mode 100644
index 917016bfb8..0000000000
--- a/__tests__/hooks/useAvatarForBot.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return image and initial of avatar for bot', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      styleOptions: {
-        botAvatarImage: 'about:blank#bot-icon',
-        botAvatarInitials: 'WC'
-      }
-    }
-  });
-
-  const [{ image, initials }] = await pageObjects.runHook('useAvatarForBot');
-
-  expect({ image, initials }).toMatchInlineSnapshot(`
-    {
-      "image": "about:blank#bot-icon",
-      "initials": "WC",
-    }
-  `);
-});
-
-test('setter should throw exception', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(pageObjects.runHook('useAvatarForBot', [], result => result[1]())).rejects.toThrow();
-});
diff --git a/__tests__/html2/hooks/2/useAvatarForBot.getter.html b/__tests__/html2/hooks/2/useAvatarForBot.getter.html
new file mode 100644
index 0000000000..acfefe7836
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAvatarForBot.getter.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAvatarForBot } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: {
+            botAvatarImage: 'about:blank#bot-icon',
+            botAvatarInitials: 'WC'
+          }
+        });
+
+        const [botAvatar] = await renderHook(() => useAvatarForBot());
+
+        expect(botAvatar).toEqual({
+          image: 'about:blank#bot-icon',
+          initials: 'WC'
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAvatarForBot.setter.html b/__tests__/html2/hooks/2/useAvatarForBot.setter.html
new file mode 100644
index 0000000000..cebf3d4762
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAvatarForBot.setter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAvatarForBot } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const botAvatarState = await renderHook(() => useAvatarForBot());
+
+        expect(botAvatarState).toEqual([expect.objectContaining({})]);
+      });
+    </script>
+  </body>
+</html>

From ca53bd21b86605879efea78eab00d5bcacd0eaa5 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:01:00 +0000
Subject: [PATCH 05/56] Migrate useAvatarForUser

---
 __tests__/hooks/useAvatarForUser.js           | 32 ------------
 .../hooks/2/useAvatarForUser.getter.html      | 52 +++++++++++++++++++
 .../hooks/2/useAvatarForUser.setter.html      | 45 ++++++++++++++++
 3 files changed, 97 insertions(+), 32 deletions(-)
 delete mode 100644 __tests__/hooks/useAvatarForUser.js
 create mode 100644 __tests__/html2/hooks/2/useAvatarForUser.getter.html
 create mode 100644 __tests__/html2/hooks/2/useAvatarForUser.setter.html

diff --git a/__tests__/hooks/useAvatarForUser.js b/__tests__/hooks/useAvatarForUser.js
deleted file mode 100644
index 06153052c3..0000000000
--- a/__tests__/hooks/useAvatarForUser.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return image and initial of avatar for user', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      styleOptions: {
-        userAvatarImage: 'about:blank#user-icon',
-        userAvatarInitials: 'WW'
-      }
-    }
-  });
-
-  const [{ image, initials }] = await pageObjects.runHook('useAvatarForUser');
-
-  expect({ image, initials }).toMatchInlineSnapshot(`
-    {
-      "image": "about:blank#user-icon",
-      "initials": "WW",
-    }
-  `);
-});
-
-test('setter should throw exception', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(pageObjects.runHook('useAvatarForUser', [], result => result[1]())).rejects.toThrow();
-});
diff --git a/__tests__/html2/hooks/2/useAvatarForUser.getter.html b/__tests__/html2/hooks/2/useAvatarForUser.getter.html
new file mode 100644
index 0000000000..fe2a4d0f53
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAvatarForUser.getter.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAvatarForUser } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: {
+            userAvatarImage: 'about:blank#user-icon',
+            userAvatarInitials: 'WW'
+          }
+        });
+
+        const [userAvatar] = await renderHook(() => useAvatarForUser());
+
+        expect(userAvatar).toEqual({
+          image: 'about:blank#user-icon',
+          initials: 'WW'
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useAvatarForUser.setter.html b/__tests__/html2/hooks/2/useAvatarForUser.setter.html
new file mode 100644
index 0000000000..a175669e81
--- /dev/null
+++ b/__tests__/html2/hooks/2/useAvatarForUser.setter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useAvatarForUser } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const userAvatarState = await renderHook(() => useAvatarForUser());
+
+        expect(userAvatarState).toEqual([expect.objectContaining({})]);
+      });
+    </script>
+  </body>
+</html>

From 7a547134c7ca3283f18af8e331482687b92e85e8 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:02:48 +0000
Subject: [PATCH 06/56] Migrate useByteFormatter

---
 __tests__/hooks/useByteFormatter.js           | 30 ------------
 __tests__/html2/hooks/2/useByteFormatter.html | 49 +++++++++++++++++++
 2 files changed, 49 insertions(+), 30 deletions(-)
 delete mode 100644 __tests__/hooks/useByteFormatter.js
 create mode 100644 __tests__/html2/hooks/2/useByteFormatter.html

diff --git a/__tests__/hooks/useByteFormatter.js b/__tests__/hooks/useByteFormatter.js
deleted file mode 100644
index 45949657a6..0000000000
--- a/__tests__/hooks/useByteFormatter.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('should return bytes for "ja-JP"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'ja-JP'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useByteFormatter', [], formatByte => [
-    formatByte(10),
-    formatByte(1024),
-    formatByte(1048576),
-    formatByte(1073741824)
-  ]);
-
-  expect(actual).toMatchInlineSnapshot(`
-    [
-      "10 バイト",
-      "1 KB",
-      "1 MB",
-      "1 GB",
-    ]
-  `);
-});
diff --git a/__tests__/html2/hooks/2/useByteFormatter.html b/__tests__/html2/hooks/2/useByteFormatter.html
new file mode 100644
index 0000000000..a3feacc9d0
--- /dev/null
+++ b/__tests__/html2/hooks/2/useByteFormatter.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useByteFormatter } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'ja-JP',
+          store
+        });
+
+        const formatByte = await renderHook(() => useByteFormatter());
+
+        expect(formatByte(10)).toBe('10 バイト');
+        expect(formatByte(1024)).toBe('1 KB');
+        expect(formatByte(1048576)).toBe('1 MB');
+        expect(formatByte(1073741824)).toBe('1 GB');
+      });
+    </script>
+  </body>
+</html>

From ac3e2eb6653d2e77725fba2edb63b4dbf39cd41e Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:04:20 +0000
Subject: [PATCH 07/56] Format

---
 .../hooks/2/useAdaptiveCardsHostConfig.getter.default.html   | 5 +----
 .../html2/hooks/2/useAdaptiveCardsHostConfig.setter.html     | 5 +----
 .../hooks/2/useAdaptiveCardsPackage.getter.default.html      | 5 +----
 __tests__/html2/hooks/2/useAvatarForBot.setter.html          | 5 +----
 __tests__/html2/hooks/2/useAvatarForUser.setter.html         | 5 +----
 5 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
index 24e78ba63f..c76b0a04d7 100644
--- a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const [adaptiveCardsHostConfig] = await renderHook(() => useAdaptiveCardsHostConfig());
 
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
index 4d41d50d97..4180ad61c7 100644
--- a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const adaptiveCardsHostConfigState = await renderHook(() => useAdaptiveCardsHostConfig());
 
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
index e0c1a0a46b..9ae675527e 100644
--- a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
+++ b/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const [adaptiveCardsPackage] = await renderHook(() => useAdaptiveCardsPackage());
 
diff --git a/__tests__/html2/hooks/2/useAvatarForBot.setter.html b/__tests__/html2/hooks/2/useAvatarForBot.setter.html
index cebf3d4762..fb1f316f19 100644
--- a/__tests__/html2/hooks/2/useAvatarForBot.setter.html
+++ b/__tests__/html2/hooks/2/useAvatarForBot.setter.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const botAvatarState = await renderHook(() => useAvatarForBot());
 
diff --git a/__tests__/html2/hooks/2/useAvatarForUser.setter.html b/__tests__/html2/hooks/2/useAvatarForUser.setter.html
index a175669e81..3fe650a66e 100644
--- a/__tests__/html2/hooks/2/useAvatarForUser.setter.html
+++ b/__tests__/html2/hooks/2/useAvatarForUser.setter.html
@@ -31,10 +31,7 @@
 
       run(async function () {
         const { directLine, store } = createDirectLineEmulator();
-        const renderHook = createRenderHook(document.getElementById('webchat'), {
-          directLine,
-          store
-        });
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
 
         const userAvatarState = await renderHook(() => useAvatarForUser());
 

From 9b45b00b942c1220a98855fb1e3f9e45232eba22 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:06:47 +0000
Subject: [PATCH 08/56] Migrate useConnectivityStatus

---
 __tests__/hooks/useConnectivityStatus.js      | 24 ----------
 .../hooks/2/useConnectivityStatus.getter.html | 45 +++++++++++++++++++
 .../hooks/2/useConnectivityStatus.setter.html | 42 +++++++++++++++++
 3 files changed, 87 insertions(+), 24 deletions(-)
 delete mode 100644 __tests__/hooks/useConnectivityStatus.js
 create mode 100644 __tests__/html2/hooks/2/useConnectivityStatus.getter.html
 create mode 100644 __tests__/html2/hooks/2/useConnectivityStatus.setter.html

diff --git a/__tests__/hooks/useConnectivityStatus.js b/__tests__/hooks/useConnectivityStatus.js
deleted file mode 100644
index 11ec3f4c9e..0000000000
--- a/__tests__/hooks/useConnectivityStatus.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { timeouts } from '../constants.json';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return online', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  const [connectivityStatus] = await pageObjects.runHook('useConnectivityStatus');
-
-  expect(connectivityStatus).toMatchInlineSnapshot(`"connected"`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setConnectivityStatus] = await pageObjects.runHook('useConnectivityStatus');
-
-  expect(setConnectivityStatus).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useConnectivityStatus.getter.html b/__tests__/html2/hooks/2/useConnectivityStatus.getter.html
new file mode 100644
index 0000000000..d2fd7487e3
--- /dev/null
+++ b/__tests__/html2/hooks/2/useConnectivityStatus.getter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useConnectivityStatus } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        const [connectivityStatus] = await renderHook(() => useConnectivityStatus());
+
+        expect(connectivityStatus).toBe('connected');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useConnectivityStatus.setter.html b/__tests__/html2/hooks/2/useConnectivityStatus.setter.html
new file mode 100644
index 0000000000..713e2e3c67
--- /dev/null
+++ b/__tests__/html2/hooks/2/useConnectivityStatus.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useConnectivityStatus } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const connectivityStatusState = await renderHook(() => useConnectivityStatus());
+
+        expect(connectivityStatusState).toEqual([expect.any(String)]);
+      });
+    </script>
+  </body>
+</html>

From f1ad944f7ce1dae7224ee5660d7eb1aa1f7d8a56 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:08:15 +0000
Subject: [PATCH 09/56] Migrate useDateFormatter

---
 __tests__/hooks/useDateFormatter.js           | 34 --------------
 .../html2/hooks/2/useDateFormatter.en.html    | 46 +++++++++++++++++++
 .../html2/hooks/2/useDateFormatter.yue.html   | 46 +++++++++++++++++++
 3 files changed, 92 insertions(+), 34 deletions(-)
 delete mode 100644 __tests__/hooks/useDateFormatter.js
 create mode 100644 __tests__/html2/hooks/2/useDateFormatter.en.html
 create mode 100644 __tests__/html2/hooks/2/useDateFormatter.yue.html

diff --git a/__tests__/hooks/useDateFormatter.js b/__tests__/hooks/useDateFormatter.js
deleted file mode 100644
index 97c889a805..0000000000
--- a/__tests__/hooks/useDateFormatter.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('should return relative date for "en"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'en'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useDateFormatter', [], formatDate =>
-    formatDate('2000-12-23T12:34:56.789Z')
-  );
-
-  expect(actual).toMatchInlineSnapshot(`"December 23 at 12:34 PM"`);
-});
-
-test('should return relative date for "yue"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useDateFormatter', [], formatDate =>
-    formatDate('2000-12-23T12:34:56.789Z')
-  );
-
-  expect(actual).toMatchInlineSnapshot(`"12月23日 下午12:34"`);
-});
diff --git a/__tests__/html2/hooks/2/useDateFormatter.en.html b/__tests__/html2/hooks/2/useDateFormatter.en.html
new file mode 100644
index 0000000000..a8fd37a9d0
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDateFormatter.en.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDateFormatter } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'en',
+          store
+        });
+
+        const formatDate = await renderHook(() => useDateFormatter());
+
+        expect(formatDate('2000-12-23T12:34:56.789Z')).toBe('December 23 at 12:34 PM');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useDateFormatter.yue.html b/__tests__/html2/hooks/2/useDateFormatter.yue.html
new file mode 100644
index 0000000000..1af8a6b323
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDateFormatter.yue.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDateFormatter } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const formatDate = await renderHook(() => useDateFormatter());
+
+        expect(formatDate('2000-12-23T12:34:56.789Z')).toBe('12月23日 下午12:34');
+      });
+    </script>
+  </body>
+</html>

From a2fd21a3aad99d17143e83f161d00df464347b28 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:15:09 +0000
Subject: [PATCH 10/56] Migrate useDictateInterims

---
 __tests__/hooks/useDictateInterims.js         | 35 ----------
 .../hooks/2/useDictateInterims.getter.html    | 70 +++++++++++++++++++
 .../hooks/2/useDictateInterims.setter.html    | 51 ++++++++++++++
 3 files changed, 121 insertions(+), 35 deletions(-)
 delete mode 100644 __tests__/hooks/useDictateInterims.js
 create mode 100644 __tests__/html2/hooks/2/useDictateInterims.getter.html
 create mode 100644 __tests__/html2/hooks/2/useDictateInterims.setter.html

diff --git a/__tests__/hooks/useDictateInterims.js b/__tests__/hooks/useDictateInterims.js
deleted file mode 100644
index 0b8d3a83c3..0000000000
--- a/__tests__/hooks/useDictateInterims.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return dictate interims', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.clickMicrophoneButton();
-  await pageObjects.putSpeechRecognitionResult('recognizing', 'Hello');
-
-  const [dictateInterims] = await pageObjects.runHook('useDictateInterims');
-
-  expect(dictateInterims).toEqual(['Hello']);
-
-  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
-});
-
-test('setter should throw exception', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(
-    pageObjects.runHook('useDictateInterims', [], dictateInterims => dictateInterims[1]())
-  ).rejects.toThrow();
-});
diff --git a/__tests__/html2/hooks/2/useDictateInterims.getter.html b/__tests__/html2/hooks/2/useDictateInterims.getter.html
new file mode 100644
index 0000000000..076e03c6ed
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDictateInterims.getter.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDictateInterims } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        await actRecognizeOnce(
+          ponyfill,
+          () => host.click(document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`)),
+          dispatcher => {
+            dispatcher.start();
+            dispatcher.audioStart();
+            dispatcher.soundStart();
+            dispatcher.speechStart();
+            dispatcher.result('Hello');
+          }
+        );
+
+        const [dictateInterims] = await renderHook(() => useDictateInterims());
+
+        expect(dictateInterims).toEqual(['Hello']);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useDictateInterims.setter.html b/__tests__/html2/hooks/2/useDictateInterims.setter.html
new file mode 100644
index 0000000000..446e2fe063
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDictateInterims.setter.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDictateInterims } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          webSpeechPonyfillFactory: () => ponyfill
+        });
+
+        const [_, setDictateInterims] = await renderHook(() => useDictateInterims());
+
+        expect(() => setDictateInterims()).toThrow();
+      });
+    </script>
+  </body>
+</html>

From 83120ee2c334a3b55ea2d345ab1ac25976d20efb Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:15:27 +0000
Subject: [PATCH 11/56] Move tests

---
 __tests__/html2/hooks/{2 => }/useActivities.getter.html           | 0
 __tests__/html2/hooks/{2 => }/useActivities.setter.html           | 0
 .../hooks/{2 => }/useAdaptiveCardsHostConfig.getter.default.html  | 0
 .../html2/hooks/{2 => }/useAdaptiveCardsHostConfig.getter.html    | 0
 .../html2/hooks/{2 => }/useAdaptiveCardsHostConfig.setter.html    | 0
 .../hooks/{2 => }/useAdaptiveCardsPackage.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useAdaptiveCardsPackage.getter.html | 0
 __tests__/html2/hooks/{2 => }/useAdaptiveCardsPackage.setter.html | 0
 __tests__/html2/hooks/{2 => }/useAvatarForBot.getter.html         | 0
 __tests__/html2/hooks/{2 => }/useAvatarForBot.setter.html         | 0
 __tests__/html2/hooks/{2 => }/useAvatarForUser.getter.html        | 0
 __tests__/html2/hooks/{2 => }/useAvatarForUser.setter.html        | 0
 __tests__/html2/hooks/{2 => }/useByteFormatter.html               | 0
 __tests__/html2/hooks/{2 => }/useConnectivityStatus.getter.html   | 0
 __tests__/html2/hooks/{2 => }/useConnectivityStatus.setter.html   | 0
 __tests__/html2/hooks/{2 => }/useDateFormatter.en.html            | 0
 __tests__/html2/hooks/{2 => }/useDateFormatter.yue.html           | 0
 __tests__/html2/hooks/{2 => }/useDictateInterims.getter.html      | 0
 __tests__/html2/hooks/{2 => }/useDictateInterims.setter.html      | 0
 19 files changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/{2 => }/useActivities.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useActivities.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsHostConfig.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsHostConfig.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsHostConfig.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsPackage.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsPackage.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAdaptiveCardsPackage.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAvatarForBot.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAvatarForBot.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAvatarForUser.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useAvatarForUser.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useByteFormatter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useConnectivityStatus.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useConnectivityStatus.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDateFormatter.en.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDateFormatter.yue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDictateInterims.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDictateInterims.setter.html (100%)

diff --git a/__tests__/html2/hooks/2/useActivities.getter.html b/__tests__/html2/hooks/useActivities.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useActivities.getter.html
rename to __tests__/html2/hooks/useActivities.getter.html
diff --git a/__tests__/html2/hooks/2/useActivities.setter.html b/__tests__/html2/hooks/useActivities.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useActivities.setter.html
rename to __tests__/html2/hooks/useActivities.setter.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html b/__tests__/html2/hooks/useAdaptiveCardsHostConfig.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.default.html
rename to __tests__/html2/hooks/useAdaptiveCardsHostConfig.getter.default.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html b/__tests__/html2/hooks/useAdaptiveCardsHostConfig.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.getter.html
rename to __tests__/html2/hooks/useAdaptiveCardsHostConfig.getter.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html b/__tests__/html2/hooks/useAdaptiveCardsHostConfig.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsHostConfig.setter.html
rename to __tests__/html2/hooks/useAdaptiveCardsHostConfig.setter.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html b/__tests__/html2/hooks/useAdaptiveCardsPackage.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.default.html
rename to __tests__/html2/hooks/useAdaptiveCardsPackage.getter.default.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html b/__tests__/html2/hooks/useAdaptiveCardsPackage.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsPackage.getter.html
rename to __tests__/html2/hooks/useAdaptiveCardsPackage.getter.html
diff --git a/__tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html b/__tests__/html2/hooks/useAdaptiveCardsPackage.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAdaptiveCardsPackage.setter.html
rename to __tests__/html2/hooks/useAdaptiveCardsPackage.setter.html
diff --git a/__tests__/html2/hooks/2/useAvatarForBot.getter.html b/__tests__/html2/hooks/useAvatarForBot.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAvatarForBot.getter.html
rename to __tests__/html2/hooks/useAvatarForBot.getter.html
diff --git a/__tests__/html2/hooks/2/useAvatarForBot.setter.html b/__tests__/html2/hooks/useAvatarForBot.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAvatarForBot.setter.html
rename to __tests__/html2/hooks/useAvatarForBot.setter.html
diff --git a/__tests__/html2/hooks/2/useAvatarForUser.getter.html b/__tests__/html2/hooks/useAvatarForUser.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAvatarForUser.getter.html
rename to __tests__/html2/hooks/useAvatarForUser.getter.html
diff --git a/__tests__/html2/hooks/2/useAvatarForUser.setter.html b/__tests__/html2/hooks/useAvatarForUser.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useAvatarForUser.setter.html
rename to __tests__/html2/hooks/useAvatarForUser.setter.html
diff --git a/__tests__/html2/hooks/2/useByteFormatter.html b/__tests__/html2/hooks/useByteFormatter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useByteFormatter.html
rename to __tests__/html2/hooks/useByteFormatter.html
diff --git a/__tests__/html2/hooks/2/useConnectivityStatus.getter.html b/__tests__/html2/hooks/useConnectivityStatus.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useConnectivityStatus.getter.html
rename to __tests__/html2/hooks/useConnectivityStatus.getter.html
diff --git a/__tests__/html2/hooks/2/useConnectivityStatus.setter.html b/__tests__/html2/hooks/useConnectivityStatus.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useConnectivityStatus.setter.html
rename to __tests__/html2/hooks/useConnectivityStatus.setter.html
diff --git a/__tests__/html2/hooks/2/useDateFormatter.en.html b/__tests__/html2/hooks/useDateFormatter.en.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDateFormatter.en.html
rename to __tests__/html2/hooks/useDateFormatter.en.html
diff --git a/__tests__/html2/hooks/2/useDateFormatter.yue.html b/__tests__/html2/hooks/useDateFormatter.yue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDateFormatter.yue.html
rename to __tests__/html2/hooks/useDateFormatter.yue.html
diff --git a/__tests__/html2/hooks/2/useDictateInterims.getter.html b/__tests__/html2/hooks/useDictateInterims.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDictateInterims.getter.html
rename to __tests__/html2/hooks/useDictateInterims.getter.html
diff --git a/__tests__/html2/hooks/2/useDictateInterims.setter.html b/__tests__/html2/hooks/useDictateInterims.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDictateInterims.setter.html
rename to __tests__/html2/hooks/useDictateInterims.setter.html

From aec634c4f13067c6dfef6a5a42210915394ddbbd Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:17:39 +0000
Subject: [PATCH 12/56] Migrate useDisabled

---
 __tests__/hooks/useDisabled.js                | 29 ------------
 .../hooks/2/useDisabled.getter.default.html   | 42 +++++++++++++++++
 .../html2/hooks/2/useDisabled.getter.html     | 46 +++++++++++++++++++
 .../html2/hooks/2/useDisabled.setter.html     | 42 +++++++++++++++++
 4 files changed, 130 insertions(+), 29 deletions(-)
 delete mode 100644 __tests__/hooks/useDisabled.js
 create mode 100644 __tests__/html2/hooks/2/useDisabled.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useDisabled.getter.html
 create mode 100644 __tests__/html2/hooks/2/useDisabled.setter.html

diff --git a/__tests__/hooks/useDisabled.js b/__tests__/hooks/useDisabled.js
deleted file mode 100644
index a2e297707f..0000000000
--- a/__tests__/hooks/useDisabled.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return true if disabled set to true in props', async () => {
-  const { pageObjects } = await setupWebDriver({ props: { disabled: true } });
-
-  const [disabled] = await pageObjects.runHook('useDisabled');
-
-  expect(disabled).toMatchInlineSnapshot(`true`);
-});
-
-test('getter should return false if disabled is not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [disabled] = await pageObjects.runHook('useDisabled');
-
-  expect(disabled).toMatchInlineSnapshot(`false`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setDisabled] = await pageObjects.runHook('useDisabled');
-
-  expect(setDisabled).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useDisabled.getter.default.html b/__tests__/html2/hooks/2/useDisabled.getter.default.html
new file mode 100644
index 0000000000..a23fd08776
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDisabled.getter.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDisabled } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [disabled] = await renderHook(() => useDisabled());
+
+        expect(disabled).toBe(false);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useDisabled.getter.html b/__tests__/html2/hooks/2/useDisabled.getter.html
new file mode 100644
index 0000000000..34e4e5ee8a
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDisabled.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDisabled } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          disabled: true,
+          store
+        });
+
+        const [disabled] = await renderHook(() => useDisabled());
+
+        expect(disabled).toBe(true);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useDisabled.setter.html b/__tests__/html2/hooks/2/useDisabled.setter.html
new file mode 100644
index 0000000000..3197e1c975
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDisabled.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDisabled } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const disabledState = await renderHook(() => useDisabled());
+
+        expect(disabledState).toEqual([expect.any(Boolean)]);
+      });
+    </script>
+  </body>
+</html>

From 0a7f4d0a4a4dba381cd21e019f25387dc3fd4890 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:20:54 +0000
Subject: [PATCH 13/56] Migrate useDismissNotification

---
 __tests__/hooks/useDismissNotification.js     | 30 ---------
 .../html2/hooks/2/useDismissNotification.html | 61 +++++++++++++++++++
 2 files changed, 61 insertions(+), 30 deletions(-)
 delete mode 100644 __tests__/hooks/useDismissNotification.js
 create mode 100644 __tests__/html2/hooks/2/useDismissNotification.html

diff --git a/__tests__/hooks/useDismissNotification.js b/__tests__/hooks/useDismissNotification.js
deleted file mode 100644
index bb5499fc1e..0000000000
--- a/__tests__/hooks/useDismissNotification.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import toastShown from '../setup/conditions/toastShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling dismissNotification should dismiss notification', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.dispatchAction({
-    type: 'WEB_CHAT/SET_NOTIFICATION',
-    payload: {
-      id: 'privacypolicy',
-      level: 'info',
-      message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy).'
-    }
-  });
-
-  await driver.wait(toastShown(1), timeouts.ui);
-
-  await pageObjects.runHook('useDismissNotification', [], dismissNotification => dismissNotification('privacypolicy'));
-
-  await driver.wait(toastShown(0), timeouts.ui);
-});
diff --git a/__tests__/html2/hooks/2/useDismissNotification.html b/__tests__/html2/hooks/2/useDismissNotification.html
new file mode 100644
index 0000000000..a3954019d7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useDismissNotification.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useDismissNotification } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+
+        store.dispatch({
+          type: 'WEB_CHAT/SET_NOTIFICATION',
+          payload: {
+            id: 'privacypolicy',
+            level: 'info',
+            message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy).'
+          }
+        });
+
+        await pageConditions.toastShown(1);
+
+        const dismissNotification = await renderHook(() => useDismissNotification());
+
+        dismissNotification('privacypolicy');
+
+        await pageConditions.toastShown(0);
+      });
+    </script>
+  </body>
+</html>

From da9477d7aafe38d747df2d9b5faa7183ae0a02ae Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:24:11 +0000
Subject: [PATCH 14/56] Migrate useFocusSendBox

---
 __tests__/hooks/useFocusSendBox.js            | 19 -------
 __tests__/html2/hooks/2/useFocus.sendBox.html | 52 +++++++++++++++++++
 2 files changed, 52 insertions(+), 19 deletions(-)
 delete mode 100644 __tests__/hooks/useFocusSendBox.js
 create mode 100644 __tests__/html2/hooks/2/useFocus.sendBox.html

diff --git a/__tests__/hooks/useFocusSendBox.js b/__tests__/hooks/useFocusSendBox.js
deleted file mode 100644
index 21b6ef9fa6..0000000000
--- a/__tests__/hooks/useFocusSendBox.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import sendBoxTextBoxFocused from '../setup/conditions/sendBoxTextBoxFocused';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling emitTypingIndicator should send a typing activity', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useFocus', [], fn => fn('sendBox'));
-
-  await driver.wait(sendBoxTextBoxFocused(), timeouts.ui);
-});
diff --git a/__tests__/html2/hooks/2/useFocus.sendBox.html b/__tests__/html2/hooks/2/useFocus.sendBox.html
new file mode 100644
index 0000000000..cae5d1c840
--- /dev/null
+++ b/__tests__/html2/hooks/2/useFocus.sendBox.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useFocus } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+
+        expect(document.activeElement).not.toEqual(pageElements.sendBoxTextBox());
+
+        const focus = await renderHook(() => useFocus());
+
+        focus('sendBox');
+
+        expect(document.activeElement).toEqual(pageElements.sendBoxTextBox());
+      });
+    </script>
+  </body>
+</html>

From 5d8eec7639d98338b94a28c104ec39710a75dd60 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:26:04 +0000
Subject: [PATCH 15/56] Migrate useGrammars

---
 __tests__/hooks/useGrammars.js                | 33 -------------
 .../hooks/2/useGrammars.getter.default.html   | 45 ++++++++++++++++++
 .../html2/hooks/2/useGrammars.getter.html     | 46 +++++++++++++++++++
 .../html2/hooks/2/useGrammars.setter.html     | 42 +++++++++++++++++
 4 files changed, 133 insertions(+), 33 deletions(-)
 delete mode 100644 __tests__/hooks/useGrammars.js
 create mode 100644 __tests__/html2/hooks/2/useGrammars.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useGrammars.getter.html
 create mode 100644 __tests__/html2/hooks/2/useGrammars.setter.html

diff --git a/__tests__/hooks/useGrammars.js b/__tests__/hooks/useGrammars.js
deleted file mode 100644
index db01a00a53..0000000000
--- a/__tests__/hooks/useGrammars.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return grammars set in props', async () => {
-  const { pageObjects } = await setupWebDriver({ props: { grammars: ['Tuen Mun', 'Yuen Long'] } });
-
-  const [grammars] = await pageObjects.runHook('useGrammars');
-
-  expect(grammars).toMatchInlineSnapshot(`
-    [
-      "Tuen Mun",
-      "Yuen Long",
-    ]
-  `);
-});
-
-test('getter should return empty array if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [grammars] = await pageObjects.runHook('useGrammars');
-
-  expect(grammars).toEqual([]);
-});
-
-test('setter should throw exception', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(pageObjects.runHook('useGrammars', [], grammars => grammars[1]())).rejects.toThrow();
-});
diff --git a/__tests__/html2/hooks/2/useGrammars.getter.default.html b/__tests__/html2/hooks/2/useGrammars.getter.default.html
new file mode 100644
index 0000000000..57a86cf911
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGrammars.getter.default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGrammars } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store
+        });
+
+        const [grammars] = await renderHook(() => useGrammars());
+
+        expect(grammars).toEqual([]);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useGrammars.getter.html b/__tests__/html2/hooks/2/useGrammars.getter.html
new file mode 100644
index 0000000000..12484f2f53
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGrammars.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGrammars } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          grammars: ['Tuen Mun', 'Yuen Long'],
+          store
+        });
+
+        const [grammars] = await renderHook(() => useGrammars());
+
+        expect(grammars).toEqual(['Tuen Mun', 'Yuen Long']);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useGrammars.setter.html b/__tests__/html2/hooks/2/useGrammars.setter.html
new file mode 100644
index 0000000000..ede84880ee
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGrammars.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGrammars } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const grammarsState = await renderHook(() => useGrammars());
+
+        expect(grammarsState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From ef7f705677a4295cc7011b2f50bf10fc66457cd1 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:28:29 +0000
Subject: [PATCH 16/56] Migrate useGroupTimestamp

---
 __tests__/hooks/useGroupTimestamp.js          | 45 -----------------
 .../2/useGroupTimestamp.getter.default.html   | 42 ++++++++++++++++
 .../2/useGroupTimestamp.getter.false.html     | 46 ++++++++++++++++++
 .../hooks/2/useGroupTimestamp.getter.html     | 48 +++++++++++++++++++
 .../hooks/2/useGroupTimestamp.setter.html     | 46 ++++++++++++++++++
 5 files changed, 182 insertions(+), 45 deletions(-)
 delete mode 100644 __tests__/hooks/useGroupTimestamp.js
 create mode 100644 __tests__/html2/hooks/2/useGroupTimestamp.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useGroupTimestamp.getter.false.html
 create mode 100644 __tests__/html2/hooks/2/useGroupTimestamp.getter.html
 create mode 100644 __tests__/html2/hooks/2/useGroupTimestamp.setter.html

diff --git a/__tests__/hooks/useGroupTimestamp.js b/__tests__/hooks/useGroupTimestamp.js
deleted file mode 100644
index 67ccac2937..0000000000
--- a/__tests__/hooks/useGroupTimestamp.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return group timestamp set in styleOptions', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      styleOptions: {
-        groupTimestamp: 1000
-      }
-    }
-  });
-
-  const [groupTimestamp] = await pageObjects.runHook('useGroupTimestamp');
-
-  expect(groupTimestamp).toMatchInlineSnapshot(`1000`);
-});
-
-test('getter should return default group timestamp if not set in styleOptions', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [groupTimestamp] = await pageObjects.runHook('useGroupTimestamp');
-
-  expect(groupTimestamp).toMatchInlineSnapshot(`true`);
-});
-
-test('getter should return false if group timestamp is disabled', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: { styleOptions: { groupTimestamp: false } }
-  });
-
-  const [groupTimestamp] = await pageObjects.runHook('useGroupTimestamp');
-
-  expect(groupTimestamp).toMatchInlineSnapshot(`false`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setGroupTimestamp] = await pageObjects.runHook('useGroupTimestamp');
-
-  expect(setGroupTimestamp).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.default.html b/__tests__/html2/hooks/2/useGroupTimestamp.getter.default.html
new file mode 100644
index 0000000000..59f48eb640
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGroupTimestamp.getter.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGroupTimestamp } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [groupTimestamp] = await renderHook(() => useGroupTimestamp());
+
+        expect(groupTimestamp).toEqual(true);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.false.html b/__tests__/html2/hooks/2/useGroupTimestamp.getter.false.html
new file mode 100644
index 0000000000..9353b6d366
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGroupTimestamp.getter.false.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGroupTimestamp } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: { groupTimestamp: false }
+        });
+
+        const [groupTimestamp] = await renderHook(() => useGroupTimestamp());
+
+        expect(groupTimestamp).toEqual(false);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.html b/__tests__/html2/hooks/2/useGroupTimestamp.getter.html
new file mode 100644
index 0000000000..218cc26836
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGroupTimestamp.getter.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGroupTimestamp } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: {
+            groupTimestamp: 1000
+          }
+        });
+
+        const [groupTimestamp] = await renderHook(() => useGroupTimestamp());
+
+        expect(groupTimestamp).toEqual(1000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.setter.html b/__tests__/html2/hooks/2/useGroupTimestamp.setter.html
new file mode 100644
index 0000000000..44ae287e15
--- /dev/null
+++ b/__tests__/html2/hooks/2/useGroupTimestamp.setter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useGroupTimestamp } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: { groupTimestamp: false }
+        });
+
+        const groupTimestampState = await renderHook(() => useGroupTimestamp());
+
+        expect(groupTimestampState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 5a08ca5f518b72ac57f79452e31cb4993b76a72b Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:31:20 +0000
Subject: [PATCH 17/56] Migrate useLanguage

---
 __tests__/hooks/useLanguage.js                | 75 -------------------
 .../hooks/2/useLanguage.getter.default.html   | 42 +++++++++++
 .../hooks/2/useLanguage.getter.speech.html    | 46 ++++++++++++
 .../hooks/2/useLanguage.getter.xx-YY.html     | 46 ++++++++++++
 .../html2/hooks/2/useLanguage.getter.yue.html | 46 ++++++++++++
 .../hooks/2/useLanguage.getter.zh-YUE.html    | 46 ++++++++++++
 .../html2/hooks/2/useLanguage.setter.html     | 42 +++++++++++
 7 files changed, 268 insertions(+), 75 deletions(-)
 delete mode 100644 __tests__/hooks/useLanguage.js
 create mode 100644 __tests__/html2/hooks/2/useLanguage.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useLanguage.getter.speech.html
 create mode 100644 __tests__/html2/hooks/2/useLanguage.getter.xx-YY.html
 create mode 100644 __tests__/html2/hooks/2/useLanguage.getter.yue.html
 create mode 100644 __tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html
 create mode 100644 __tests__/html2/hooks/2/useLanguage.setter.html

diff --git a/__tests__/hooks/useLanguage.js b/__tests__/hooks/useLanguage.js
deleted file mode 100644
index d3d8898413..0000000000
--- a/__tests__/hooks/useLanguage.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return language set in props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const [language] = await pageObjects.runHook('useLanguage');
-
-  expect(language).toMatchInlineSnapshot(`"yue"`);
-});
-
-test('getter should return "zh-YUE" for "zh-YUE"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'zh-YUE'
-    }
-  });
-
-  const [language] = await pageObjects.runHook('useLanguage');
-
-  expect(language).toMatchInlineSnapshot(`"zh-YUE"`);
-});
-
-test('getter should return speech language "zh-HK" for "yue"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const [language] = await pageObjects.runHook('useLanguage', ['speech']);
-
-  expect(language).toMatchInlineSnapshot(`"zh-HK"`);
-});
-
-test('getter should return default language if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [language] = await pageObjects.runHook('useLanguage');
-
-  expect(language).toMatchInlineSnapshot(`"en-US"`);
-});
-
-test('getter should return "xx-YY"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'xx-YY'
-    }
-  });
-
-  const [language] = await pageObjects.runHook('useLanguage');
-
-  expect(language).toBe('xx-YY');
-
-  const text = await pageObjects.runHook('useLocalizer', [], localizer =>
-    localizer('CONNECTIVITY_STATUS_ALT_CONNECTED')
-  );
-
-  expect(text).toBe('Connected');
-});
-
-test('setter should be undefined', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setLanguage] = await pageObjects.runHook('useLanguage');
-
-  expect(setLanguage).toBeUndefined();
-});
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.default.html b/__tests__/html2/hooks/2/useLanguage.getter.default.html
new file mode 100644
index 0000000000..32cf680ef2
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.getter.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [language] = await renderHook(() => useLanguage());
+
+        expect(language).toBe('en-US');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.speech.html b/__tests__/html2/hooks/2/useLanguage.getter.speech.html
new file mode 100644
index 0000000000..95c719de9c
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.getter.speech.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const [language] = await renderHook(() => useLanguage('speech'));
+
+        expect(language).toBe('zh-HK');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.xx-YY.html b/__tests__/html2/hooks/2/useLanguage.getter.xx-YY.html
new file mode 100644
index 0000000000..9cc3214b2f
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.getter.xx-YY.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'xx-YY',
+          store
+        });
+
+        const [language] = await renderHook(() => useLanguage());
+
+        expect(language).toBe('xx-YY');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.yue.html b/__tests__/html2/hooks/2/useLanguage.getter.yue.html
new file mode 100644
index 0000000000..0e1713e9fc
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.getter.yue.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const [language] = await renderHook(() => useLanguage());
+
+        expect(language).toBe('yue');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html b/__tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html
new file mode 100644
index 0000000000..3fd9d1baa7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'zh-YUE',
+          store
+        });
+
+        const [language] = await renderHook(() => useLanguage());
+
+        expect(language).toBe('zh-YUE');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLanguage.setter.html b/__tests__/html2/hooks/2/useLanguage.setter.html
new file mode 100644
index 0000000000..763d8fab13
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLanguage.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLanguage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const languageState = await renderHook(() => useLanguage());
+
+        expect(languageState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 68c5e03b1b10a72ca191b9fbe79f7646243adeb9 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:42:18 +0000
Subject: [PATCH 18/56] Migrate useLocalizer

---
 __tests__/hooks/useLocalizer.js               | 186 ------------------
 .../html2/hooks/2/useLocalizer.default.html   |  42 ++++
 .../hooks/2/useLocalizer.nonExistent.html     |  42 ++++
 .../hooks/2/useLocalizer.overrideStrings.html |  49 +++++
 ...ocalizer.plural.firstArgumentIsString.html |  55 ++++++
 .../hooks/2/useLocalizer.plural.one.html      |  65 ++++++
 .../2/useLocalizer.plural.otherFallback.html  |  60 ++++++
 .../useLocalizer.plural.throw.idOfString.html |  55 ++++++
 ...eLocalizer.plural.throw.idOneOfNumber.html |  55 ++++++
 ...izer.plural.throw.idOtherNotUndefined.html |  53 +++++
 .../useLocalizer.plural.throw.idUnknown.html  |  55 ++++++
 .../hooks/2/useLocalizer.plural.two.html      |  65 ++++++
 .../2/useLocalizer.throwOnInvalidId.html      |  42 ++++
 __tests__/html2/hooks/2/useLocalizer.yue.html |  46 +++++
 .../hooks/2/useLocalizer.yue.plural.html      |  56 ++++++
 15 files changed, 740 insertions(+), 186 deletions(-)
 delete mode 100644 __tests__/hooks/useLocalizer.js
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.default.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.nonExistent.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.overrideStrings.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.one.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.plural.two.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.yue.html
 create mode 100644 __tests__/html2/hooks/2/useLocalizer.yue.plural.html

diff --git a/__tests__/hooks/useLocalizer.js b/__tests__/hooks/useLocalizer.js
deleted file mode 100644
index 7fa625065e..0000000000
--- a/__tests__/hooks/useLocalizer.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('should return string for "yue"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useLocalizer', [], localizer => localizer('TEXT_INPUT_SPEAK_BUTTON_ALT'));
-
-  expect(actual).toMatchInlineSnapshot(`"講嘢"`);
-});
-
-test('should return string for default language', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const actual = await pageObjects.runHook('useLocalizer', [], localizer => localizer('TEXT_INPUT_SPEAK_BUTTON_ALT'));
-
-  expect(actual).toMatchInlineSnapshot(`"Speak"`);
-});
-
-test('should return empty string for non-existent ID', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const actual = await pageObjects.runHook('useLocalizer', [], localizer => localizer('NON_EXISTENT'));
-
-  expect(actual).toMatchInlineSnapshot(`""`);
-});
-
-test('should return overrode string for non-existent ID', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue',
-      overrideLocalizedStrings: {
-        SOMETHING_NEW: 'Something new'
-      }
-    }
-  });
-
-  const actual = await pageObjects.runHook('useLocalizer', [], localizer => localizer('SOMETHING_NEW'));
-
-  expect(actual).toMatchInlineSnapshot(`"Something new"`);
-});
-
-test('should throw if "id" is not string', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(pageObjects.runHook('useLocalizer', [], localize => localize({ abc: 123 }))).rejects.toThrow(
-    'useLocalizer: "id" must be a string.'
-  );
-});
-
-test('plural rules for "yue"', async () => {
-  // "two", "few", "many" are not set in "yue".
-  // Make sure it use the "yue" version of "other", instead of "en" version of "other".
-
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useLocalizer', [{ plural: true }], localize =>
-    localize(
-      {
-        two: 'TOAST_ACCORDION_TWO',
-        few: 'TOAST_ACCORDION_FEW',
-        many: 'TOAST_ACCORDION_MANY',
-        other: 'TOAST_ACCORDION_OTHER'
-      },
-      2
-    )
-  );
-
-  expect(actual).toMatchInlineSnapshot(`"2 項通知：襟呢度睇詳情"`);
-});
-
-describe('plural rules', () => {
-  let pageObjects;
-
-  beforeEach(async () => {
-    pageObjects = (
-      await setupWebDriver({
-        props: {
-          overrideLocalizedStrings: {
-            ZERO: 'Zero: $1',
-            ONE: 'One: $1',
-            TWO: 'Two: $1',
-            FEW: 'Few: $1',
-            MANY: 'Many: $1',
-            OTHER: 'Other: $1'
-          }
-        }
-      })
-    ).pageObjects;
-  });
-
-  test('should return plural string of one', async () => {
-    const actual = await pageObjects.runHook('useLocalizer', [{ plural: true }], localizer =>
-      localizer(
-        {
-          zero: 'ZERO',
-          one: 'ONE',
-          two: 'TWO',
-          few: 'FEW',
-          many: 'MANY',
-          other: 'OTHER'
-        },
-        1
-      )
-    );
-
-    expect(actual).toMatchInlineSnapshot(`"One: 1"`);
-  });
-
-  test('should return plural string of other', async () => {
-    const actual = await pageObjects.runHook('useLocalizer', [{ plural: true }], localizer =>
-      localizer(
-        {
-          zero: 'ZERO',
-          one: 'ONE',
-          two: 'TWO',
-          few: 'FEW',
-          many: 'MANY',
-          other: 'OTHER'
-        },
-        2
-      )
-    );
-
-    expect(actual).toMatchInlineSnapshot(`"Other: 2"`);
-  });
-
-  test('should return plural string which fallback to other', async () => {
-    const actual = await pageObjects.runHook('useLocalizer', [{ plural: true }], localizer =>
-      localizer(
-        {
-          other: 'OTHER'
-        },
-        1
-      )
-    );
-
-    expect(actual).toMatchInlineSnapshot(`"Other: 1"`);
-  });
-
-  test('should throw with "id" of string', async () => {
-    await expect(
-      pageObjects.runHook('useLocalizer', [{ plural: true }], localizer => localizer('THIS_SHOULD_BE_MAP_INSTEAD', 1))
-    ).rejects.toThrow('useLocalizer: Plural string must pass "id" as a map instead of string.');
-  });
-
-  test('should throw with "id.one" of number', async () => {
-    await expect(
-      pageObjects.runHook('useLocalizer', [{ plural: true }], localizer => localizer({ one: 123, other: 'OTHER' }, 1))
-    ).rejects.toThrow('useLocalizer: Plural string must have "id.one" of string or undefined.');
-  });
-
-  test('should throw with "id.other" not defined', async () => {
-    await expect(
-      pageObjects.runHook('useLocalizer', [{ plural: true }], localizer => localizer({ one: 123 }, 1))
-    ).rejects.toThrow('useLocalizer: Plural string must have "id.other" of string.');
-  });
-
-  test('should throw with "id.unknown"', async () => {
-    await expect(
-      pageObjects.runHook('useLocalizer', [{ plural: true }], localizer =>
-        localizer({ other: 'OTHER', unknown: 'UNKNOWN' }, 1)
-      )
-    ).rejects.toThrow(
-      'useLocalizer: Plural string "id" must be either "zero", "one", "two", "few", "many", "other". But not "unknown".'
-    );
-  });
-
-  test('should throw with first argument of string', async () => {
-    await expect(
-      pageObjects.runHook('useLocalizer', [{ plural: true }], localizer => localizer({ other: 'OTHER' }, 'abc'))
-    ).rejects.toThrow('useLocalizer: Plural string must have first argument as a number.');
-  });
-});
diff --git a/__tests__/html2/hooks/2/useLocalizer.default.html b/__tests__/html2/hooks/2/useLocalizer.default.html
new file mode 100644
index 0000000000..ad210c9a1a
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const localize = await renderHook(() => useLocalizer());
+
+        expect(localize('TEXT_INPUT_SPEAK_BUTTON_ALT')).toBe('Speak');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.nonExistent.html b/__tests__/html2/hooks/2/useLocalizer.nonExistent.html
new file mode 100644
index 0000000000..6f39455cb7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.nonExistent.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const localize = await renderHook(() => useLocalizer());
+
+        expect(localize('NON_EXISTENT')).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.overrideStrings.html b/__tests__/html2/hooks/2/useLocalizer.overrideStrings.html
new file mode 100644
index 0000000000..ea672a7956
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.overrideStrings.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'you',
+          overrideLocalizedStrings: {
+            SOMETHING_NEW: 'Something new'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer());
+
+        expect(localize('SOMETHING_NEW')).toBe('Something new');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html b/__tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html
new file mode 100644
index 0000000000..d8cf281e30
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(() => localize({ other: 'OTHER' }, 'abc')).toThrow(
+          'useLocalizer: Plural string must have first argument as a number.'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.one.html b/__tests__/html2/hooks/2/useLocalizer.plural.one.html
new file mode 100644
index 0000000000..ee36813041
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.one.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(
+          localize(
+            {
+              zero: 'ZERO',
+              one: 'ONE',
+              two: 'TWO',
+              few: 'FEW',
+              many: 'MANY',
+              other: 'OTHER'
+            },
+            1
+          )
+        ).toBe('One: 1');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html b/__tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html
new file mode 100644
index 0000000000..5e8326019d
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(
+          localize(
+            {
+              other: 'OTHER'
+            },
+            1
+          )
+        ).toBe('Other: 1');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html
new file mode 100644
index 0000000000..a5a3e992f2
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(() => localize('THIS_SHOULD_BE_MAP_INSTEAD')).toThrow(
+          'useLocalizer: Plural string must pass "id" as a map instead of string.'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html
new file mode 100644
index 0000000000..8933144232
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(() => localize({ one: 123, other: 'OTHER' }, 1)).toThrow(
+          'useLocalizer: Plural string must have "id.one" of string or undefined.'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html
new file mode 100644
index 0000000000..43aeecc836
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(() => localize({ one: 123 }, 1)).toThrow('useLocalizer: Plural string must have "id.other" of string.');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html
new file mode 100644
index 0000000000..46c1ee7677
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(() => localize({ other: 'OTHER', unknown: 'UNKNOWN' }, 1)).toThrow(
+          'useLocalizer: Plural string "id" must be either "zero", "one", "two", "few", "many", "other". But not "unknown".'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.two.html b/__tests__/html2/hooks/2/useLocalizer.plural.two.html
new file mode 100644
index 0000000000..ae5b5aef92
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.plural.two.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          overrideLocalizedStrings: {
+            ZERO: 'Zero: $1',
+            ONE: 'One: $1',
+            TWO: 'Two: $1',
+            FEW: 'Few: $1',
+            MANY: 'Many: $1',
+            OTHER: 'Other: $1'
+          },
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(
+          localize(
+            {
+              zero: 'ZERO',
+              one: 'ONE',
+              two: 'TWO',
+              few: 'FEW',
+              many: 'MANY',
+              other: 'OTHER'
+            },
+            2
+          )
+        ).toBe('Other: 2');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html b/__tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html
new file mode 100644
index 0000000000..d7690e818a
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const localize = await renderHook(() => useLocalizer());
+
+        expect(() => localize({ abc: 123 })).toThrow('useLocalizer: "id" must be a string.');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.yue.html b/__tests__/html2/hooks/2/useLocalizer.yue.html
new file mode 100644
index 0000000000..c7b024f121
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.yue.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer());
+
+        expect(localize('TEXT_INPUT_SPEAK_BUTTON_ALT')).toBe('講嘢');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useLocalizer.yue.plural.html b/__tests__/html2/hooks/2/useLocalizer.yue.plural.html
new file mode 100644
index 0000000000..bfa3b8cf9b
--- /dev/null
+++ b/__tests__/html2/hooks/2/useLocalizer.yue.plural.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useLocalizer } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const localize = await renderHook(() => useLocalizer({ plural: true }));
+
+        expect(
+          localize(
+            {
+              two: 'TOAST_ACCORDION_TWO',
+              few: 'TOAST_ACCORDION_FEW',
+              many: 'TOAST_ACCORDION_MANY',
+              other: 'TOAST_ACCORDION_OTHER'
+            },
+            2
+          )
+        ).toBe('2 項通知：襟呢度睇詳情');
+      });
+    </script>
+  </body>
+</html>

From 4522a6b0286e8e4c1d22092efe3cbfc46d90a755 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:46:07 +0000
Subject: [PATCH 19/56] Rename to pure

---
 .../hooks/2/{useFocus.sendBox.html => useFocus.sendBox.pure.html} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/2/{useFocus.sendBox.html => useFocus.sendBox.pure.html} (100%)

diff --git a/__tests__/html2/hooks/2/useFocus.sendBox.html b/__tests__/html2/hooks/2/useFocus.sendBox.pure.html
similarity index 100%
rename from __tests__/html2/hooks/2/useFocus.sendBox.html
rename to __tests__/html2/hooks/2/useFocus.sendBox.pure.html

From 5e40c331d7df01a8c8bce1a1167a742da942d0c0 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:46:13 +0000
Subject: [PATCH 20/56] Move tests

---
 __tests__/html2/hooks/{2 => }/useDisabled.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useDisabled.getter.html             | 0
 __tests__/html2/hooks/{2 => }/useDisabled.setter.html             | 0
 __tests__/html2/hooks/{2 => }/useDismissNotification.html         | 0
 __tests__/html2/hooks/{2 => }/useFocus.sendBox.pure.html          | 0
 __tests__/html2/hooks/{2 => }/useGrammars.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useGrammars.getter.html             | 0
 __tests__/html2/hooks/{2 => }/useGrammars.setter.html             | 0
 .../html2/hooks/{2 => }/useGroupTimestamp.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useGroupTimestamp.getter.false.html | 0
 __tests__/html2/hooks/{2 => }/useGroupTimestamp.getter.html       | 0
 __tests__/html2/hooks/{2 => }/useGroupTimestamp.setter.html       | 0
 __tests__/html2/hooks/{2 => }/useLanguage.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useLanguage.getter.speech.html      | 0
 __tests__/html2/hooks/{2 => }/useLanguage.getter.xx-YY.html       | 0
 __tests__/html2/hooks/{2 => }/useLanguage.getter.yue.html         | 0
 __tests__/html2/hooks/{2 => }/useLanguage.getter.zh-YUE.html      | 0
 __tests__/html2/hooks/{2 => }/useLanguage.setter.html             | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.default.html           | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.nonExistent.html       | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.overrideStrings.html   | 0
 .../hooks/{2 => }/useLocalizer.plural.firstArgumentIsString.html  | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.plural.one.html        | 0
 .../html2/hooks/{2 => }/useLocalizer.plural.otherFallback.html    | 0
 .../html2/hooks/{2 => }/useLocalizer.plural.throw.idOfString.html | 0
 .../hooks/{2 => }/useLocalizer.plural.throw.idOneOfNumber.html    | 0
 .../{2 => }/useLocalizer.plural.throw.idOtherNotUndefined.html    | 0
 .../html2/hooks/{2 => }/useLocalizer.plural.throw.idUnknown.html  | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.plural.two.html        | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.throwOnInvalidId.html  | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.yue.html               | 0
 __tests__/html2/hooks/{2 => }/useLocalizer.yue.plural.html        | 0
 32 files changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/{2 => }/useDisabled.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDisabled.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDisabled.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useDismissNotification.html (100%)
 rename __tests__/html2/hooks/{2 => }/useFocus.sendBox.pure.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGrammars.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGrammars.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGrammars.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGroupTimestamp.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGroupTimestamp.getter.false.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGroupTimestamp.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useGroupTimestamp.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.getter.speech.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.getter.xx-YY.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.getter.yue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.getter.zh-YUE.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLanguage.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.nonExistent.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.overrideStrings.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.firstArgumentIsString.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.one.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.otherFallback.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.throw.idOfString.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.throw.idOneOfNumber.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.throw.idOtherNotUndefined.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.throw.idUnknown.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.plural.two.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.throwOnInvalidId.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.yue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useLocalizer.yue.plural.html (100%)

diff --git a/__tests__/html2/hooks/2/useDisabled.getter.default.html b/__tests__/html2/hooks/useDisabled.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDisabled.getter.default.html
rename to __tests__/html2/hooks/useDisabled.getter.default.html
diff --git a/__tests__/html2/hooks/2/useDisabled.getter.html b/__tests__/html2/hooks/useDisabled.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDisabled.getter.html
rename to __tests__/html2/hooks/useDisabled.getter.html
diff --git a/__tests__/html2/hooks/2/useDisabled.setter.html b/__tests__/html2/hooks/useDisabled.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDisabled.setter.html
rename to __tests__/html2/hooks/useDisabled.setter.html
diff --git a/__tests__/html2/hooks/2/useDismissNotification.html b/__tests__/html2/hooks/useDismissNotification.html
similarity index 100%
rename from __tests__/html2/hooks/2/useDismissNotification.html
rename to __tests__/html2/hooks/useDismissNotification.html
diff --git a/__tests__/html2/hooks/2/useFocus.sendBox.pure.html b/__tests__/html2/hooks/useFocus.sendBox.pure.html
similarity index 100%
rename from __tests__/html2/hooks/2/useFocus.sendBox.pure.html
rename to __tests__/html2/hooks/useFocus.sendBox.pure.html
diff --git a/__tests__/html2/hooks/2/useGrammars.getter.default.html b/__tests__/html2/hooks/useGrammars.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGrammars.getter.default.html
rename to __tests__/html2/hooks/useGrammars.getter.default.html
diff --git a/__tests__/html2/hooks/2/useGrammars.getter.html b/__tests__/html2/hooks/useGrammars.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGrammars.getter.html
rename to __tests__/html2/hooks/useGrammars.getter.html
diff --git a/__tests__/html2/hooks/2/useGrammars.setter.html b/__tests__/html2/hooks/useGrammars.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGrammars.setter.html
rename to __tests__/html2/hooks/useGrammars.setter.html
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.default.html b/__tests__/html2/hooks/useGroupTimestamp.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGroupTimestamp.getter.default.html
rename to __tests__/html2/hooks/useGroupTimestamp.getter.default.html
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.false.html b/__tests__/html2/hooks/useGroupTimestamp.getter.false.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGroupTimestamp.getter.false.html
rename to __tests__/html2/hooks/useGroupTimestamp.getter.false.html
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.getter.html b/__tests__/html2/hooks/useGroupTimestamp.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGroupTimestamp.getter.html
rename to __tests__/html2/hooks/useGroupTimestamp.getter.html
diff --git a/__tests__/html2/hooks/2/useGroupTimestamp.setter.html b/__tests__/html2/hooks/useGroupTimestamp.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useGroupTimestamp.setter.html
rename to __tests__/html2/hooks/useGroupTimestamp.setter.html
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.default.html b/__tests__/html2/hooks/useLanguage.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.getter.default.html
rename to __tests__/html2/hooks/useLanguage.getter.default.html
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.speech.html b/__tests__/html2/hooks/useLanguage.getter.speech.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.getter.speech.html
rename to __tests__/html2/hooks/useLanguage.getter.speech.html
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.xx-YY.html b/__tests__/html2/hooks/useLanguage.getter.xx-YY.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.getter.xx-YY.html
rename to __tests__/html2/hooks/useLanguage.getter.xx-YY.html
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.yue.html b/__tests__/html2/hooks/useLanguage.getter.yue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.getter.yue.html
rename to __tests__/html2/hooks/useLanguage.getter.yue.html
diff --git a/__tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html b/__tests__/html2/hooks/useLanguage.getter.zh-YUE.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.getter.zh-YUE.html
rename to __tests__/html2/hooks/useLanguage.getter.zh-YUE.html
diff --git a/__tests__/html2/hooks/2/useLanguage.setter.html b/__tests__/html2/hooks/useLanguage.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLanguage.setter.html
rename to __tests__/html2/hooks/useLanguage.setter.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.default.html b/__tests__/html2/hooks/useLocalizer.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.default.html
rename to __tests__/html2/hooks/useLocalizer.default.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.nonExistent.html b/__tests__/html2/hooks/useLocalizer.nonExistent.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.nonExistent.html
rename to __tests__/html2/hooks/useLocalizer.nonExistent.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.overrideStrings.html b/__tests__/html2/hooks/useLocalizer.overrideStrings.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.overrideStrings.html
rename to __tests__/html2/hooks/useLocalizer.overrideStrings.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html b/__tests__/html2/hooks/useLocalizer.plural.firstArgumentIsString.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.firstArgumentIsString.html
rename to __tests__/html2/hooks/useLocalizer.plural.firstArgumentIsString.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.one.html b/__tests__/html2/hooks/useLocalizer.plural.one.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.one.html
rename to __tests__/html2/hooks/useLocalizer.plural.one.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html b/__tests__/html2/hooks/useLocalizer.plural.otherFallback.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.otherFallback.html
rename to __tests__/html2/hooks/useLocalizer.plural.otherFallback.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html b/__tests__/html2/hooks/useLocalizer.plural.throw.idOfString.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.throw.idOfString.html
rename to __tests__/html2/hooks/useLocalizer.plural.throw.idOfString.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html b/__tests__/html2/hooks/useLocalizer.plural.throw.idOneOfNumber.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.throw.idOneOfNumber.html
rename to __tests__/html2/hooks/useLocalizer.plural.throw.idOneOfNumber.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html b/__tests__/html2/hooks/useLocalizer.plural.throw.idOtherNotUndefined.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.throw.idOtherNotUndefined.html
rename to __tests__/html2/hooks/useLocalizer.plural.throw.idOtherNotUndefined.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html b/__tests__/html2/hooks/useLocalizer.plural.throw.idUnknown.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.throw.idUnknown.html
rename to __tests__/html2/hooks/useLocalizer.plural.throw.idUnknown.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.plural.two.html b/__tests__/html2/hooks/useLocalizer.plural.two.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.plural.two.html
rename to __tests__/html2/hooks/useLocalizer.plural.two.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html b/__tests__/html2/hooks/useLocalizer.throwOnInvalidId.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.throwOnInvalidId.html
rename to __tests__/html2/hooks/useLocalizer.throwOnInvalidId.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.yue.html b/__tests__/html2/hooks/useLocalizer.yue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.yue.html
rename to __tests__/html2/hooks/useLocalizer.yue.html
diff --git a/__tests__/html2/hooks/2/useLocalizer.yue.plural.html b/__tests__/html2/hooks/useLocalizer.yue.plural.html
similarity index 100%
rename from __tests__/html2/hooks/2/useLocalizer.yue.plural.html
rename to __tests__/html2/hooks/useLocalizer.yue.plural.html

From 07b64b29096dd31dc6bf35e16284aa3c54716fdb Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 07:54:22 +0000
Subject: [PATCH 21/56] Migrate useMarkActivityAsSpoken

---
 __tests__/hooks/useMarkActivityAsSpoken.js    |  43 --------
 .../hooks/2/useMarkActivityAsSpoken.html      | 102 ++++++++++++++++++
 2 files changed, 102 insertions(+), 43 deletions(-)
 delete mode 100644 __tests__/hooks/useMarkActivityAsSpoken.js
 create mode 100644 __tests__/html2/hooks/2/useMarkActivityAsSpoken.html

diff --git a/__tests__/hooks/useMarkActivityAsSpoken.js b/__tests__/hooks/useMarkActivityAsSpoken.js
deleted file mode 100644
index 4c17204974..0000000000
--- a/__tests__/hooks/useMarkActivityAsSpoken.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import speechSynthesisUtterancePended from '../setup/conditions/speechSynthesisUtterancePended';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling markActivityAsSpoken should stop synthesize', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await pageObjects.sendMessageViaMicrophone('Hello, World!');
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-  await driver.wait(speechSynthesisUtterancePended(), timeouts.ui);
-
-  const [activities] = await pageObjects.runHook('useActivities');
-
-  await pageObjects.executePromiseScript(
-    activity => {
-      return window.WebChatTest.runHook('useMarkActivityAsSpoken').then(markActivityAsSpoken => {
-        markActivityAsSpoken(activity);
-      });
-    },
-    activities.find(({ from: { role }, speak }) => role === 'bot' && speak)
-  );
-
-  const [activitiesAfterMark] = await pageObjects.runHook('useActivities');
-
-  expect(activitiesAfterMark.find(({ from: { role }, speak }) => role === 'bot' && speak)).toHaveProperty(
-    'channelData.speak',
-    false
-  );
-
-  // TODO: [P2] The following expectation does not work yet, we should understand and/or fix it.
-  // await expect(pageObjects.speechSynthesisUtterancePended()).resolves.toBeTruthy();
-});
diff --git a/__tests__/html2/hooks/2/useMarkActivityAsSpoken.html b/__tests__/html2/hooks/2/useMarkActivityAsSpoken.html
new file mode 100644
index 0000000000..c8c2142001
--- /dev/null
+++ b/__tests__/html2/hooks/2/useMarkActivityAsSpoken.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useActivities, useMarkActivityAsSpoken } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import {
+        actSpeak,
+        createWebSpeechPonyfill,
+        sendMessageViaMicrophone
+      } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        await actSpeak(
+          ponyfill,
+          async () => {
+            const { resolveAll } = await directLine.actPostActivity(() =>
+              sendMessageViaMicrophone(ponyfill, 'Hello, World!')
+            );
+
+            await resolveAll();
+
+            await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+          },
+          async () => {
+            const activity = await waitFor(async () => {
+              const [activities] = await renderHook(() => useActivities());
+
+              expect(activities[1]).toEqual(
+                expect.objectContaining({
+                  channelData: expect.objectContaining({ speak: true }),
+                  from: expect.objectContaining({ role: 'bot' })
+                })
+              );
+
+              return activities[1];
+            });
+
+            const markActivityAsSpoken = await renderHook(() => useMarkActivityAsSpoken());
+
+            markActivityAsSpoken(activity);
+          }
+        );
+
+        await waitFor(async () => {
+          const [activities] = await renderHook(() => useActivities());
+
+          expect(activities[1]).toEqual(
+            expect.objectContaining({
+              channelData: expect.objectContaining({ speak: false }),
+              from: expect.objectContaining({ role: 'bot' })
+            })
+          );
+        });
+      });
+    </script>
+  </body>
+</html>

From a39cb087d29986892292876981a7cd9737a7428a Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:07:18 +0000
Subject: [PATCH 22/56] Migrate useMicrophoneButton

---
 __tests__/hooks/useMicrophoneButton.js        | 35 -------
 .../hooks/2/useMicrophoneButtonClick.html     | 98 +++++++++++++++++++
 2 files changed, 98 insertions(+), 35 deletions(-)
 delete mode 100644 __tests__/hooks/useMicrophoneButton.js
 create mode 100644 __tests__/html2/hooks/2/useMicrophoneButtonClick.html

diff --git a/__tests__/hooks/useMicrophoneButton.js b/__tests__/hooks/useMicrophoneButton.js
deleted file mode 100644
index 8f750aeb78..0000000000
--- a/__tests__/hooks/useMicrophoneButton.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import speechRecognitionStartCalled from '../setup/conditions/speechRecognitionStartCalled';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('microphoneButtonClick should toggle recording', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useMicrophoneButtonClick', [], microphoneButtonClick => microphoneButtonClick());
-
-  await driver.wait(speechRecognitionStartCalled(), timeouts.ui);
-
-  await expect(
-    pageObjects.runHook('useMicrophoneButtonDisabled', [], microphoneButtonDisabled => microphoneButtonDisabled[0])
-  ).resolves.toBeTruthy();
-
-  await pageObjects.putSpeechRecognitionResult('recognizing', 'Hello');
-
-  await expect(pageObjects.isDictating()).resolves.toBeTruthy();
-
-  await pageObjects.runHook('useMicrophoneButtonClick', [], microphoneButtonClick => microphoneButtonClick());
-
-  await expect(pageObjects.isDictating()).resolves.toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useMicrophoneButtonClick.html b/__tests__/html2/hooks/2/useMicrophoneButtonClick.html
new file mode 100644
index 0000000000..d236b19d06
--- /dev/null
+++ b/__tests__/html2/hooks/2/useMicrophoneButtonClick.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useMicrophoneButtonClick, useMicrophoneButtonDisabled } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+          const ponyfill = createWebSpeechPonyfill();
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            {
+              directLine,
+              store,
+              webSpeechPonyfillFactory: () => ponyfill
+            },
+            { renderWebChat: true }
+          );
+
+          const microphoneButtonClick = await renderHook(() => useMicrophoneButtonClick());
+
+          await pageConditions.uiConnected();
+
+          expect(ponyfill.SpeechRecognition).toHaveBeenCalledTimes(0);
+
+          await actRecognizeOnce(
+            ponyfill,
+            async () => {
+              microphoneButtonClick();
+
+              const [microphoneButtonDisabled] = await renderHook(() => useMicrophoneButtonDisabled());
+
+              expect(microphoneButtonDisabled).toBe(true);
+
+              await waitFor(() => expect(ponyfill.SpeechRecognition).toHaveBeenCalledTimes(2));
+            },
+            dispatcher => {
+              dispatcher.start();
+              dispatcher.audioStart();
+              dispatcher.soundStart();
+              dispatcher.speechStart();
+              dispatcher.result('Hello');
+            }
+          );
+
+          const microphoneButtonComponent = document.querySelector(
+            `[data-testid="${testIds.sendBoxMicrophoneButton}"]`
+          )?.parentElement;
+
+          await waitFor(() =>
+            expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(true)
+          );
+
+          const microphoneButtonClick2 = await renderHook(() => useMicrophoneButtonClick());
+
+          microphoneButtonClick2();
+
+          await waitFor(() =>
+            expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(false)
+          );
+        },
+        { skipCheckAccessibility: true }
+      );
+    </script>
+  </body>
+</html>

From be8a36e772359e3e43953ae02cdf37fdbfe01505 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:12:45 +0000
Subject: [PATCH 23/56] Migrate usePerformCardAction

---
 __tests__/hooks/usePerformCardAction.js       |  36 --------
 .../html2/hooks/2/usePerformCardAction.html   |  81 ++++++++++++++++++
 .../2/usePerformCardAction.html.snap-1.png}   | Bin
 3 files changed, 81 insertions(+), 36 deletions(-)
 delete mode 100644 __tests__/hooks/usePerformCardAction.js
 create mode 100644 __tests__/html2/hooks/2/usePerformCardAction.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-perform-card-action-js-calling-perform-card-action-should-send-card-action-to-middleware-1-snap.png => html2/hooks/2/usePerformCardAction.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/usePerformCardAction.js b/__tests__/hooks/usePerformCardAction.js
deleted file mode 100644
index b715aaaf0e..0000000000
--- a/__tests__/hooks/usePerformCardAction.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling performCardAction should send card action to middleware', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      cardActionMiddleware: ({ dispatch }) => next => ({ cardAction }) => {
-        if (cardAction.type === 'openUrl') {
-          dispatch({
-            type: 'WEB_CHAT/SEND_MESSAGE',
-            payload: {
-              text: `Navigating to ${cardAction.value}`
-            }
-          });
-        } else {
-          return next(cardAction);
-        }
-      }
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.runHook('usePerformCardAction', [], performCardAction =>
-    performCardAction({ type: 'openUrl', value: 'about:blank' })
-  );
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/usePerformCardAction.html b/__tests__/html2/hooks/2/usePerformCardAction.html
new file mode 100644
index 0000000000..bf31373b15
--- /dev/null
+++ b/__tests__/html2/hooks/2/usePerformCardAction.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { usePerformCardAction } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            cardActionMiddleware:
+              ({ dispatch }) =>
+              next =>
+              ({ cardAction }) => {
+                if (cardAction.type === 'openUrl') {
+                  (async () => {
+                    const { resolveAll } = await directLine.actPostActivity(() =>
+                      dispatch({
+                        type: 'WEB_CHAT/SEND_MESSAGE',
+                        payload: {
+                          text: `Navigating to ${cardAction.value}`
+                        }
+                      })
+                    );
+
+                    await resolveAll();
+
+                    await directLine.emulateIncomingActivity(
+                      'Unknown command: `Navigating to about:blank`.\n\nType `help` to learn more.'
+                    );
+                  })();
+                } else {
+                  return next(cardAction);
+                }
+              },
+            directLine,
+            store
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        const performCardAction = await renderHook(() => usePerformCardAction());
+
+        performCardAction({ type: 'openUrl', value: 'about:blank' });
+
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-perform-card-action-js-calling-perform-card-action-should-send-card-action-to-middleware-1-snap.png b/__tests__/html2/hooks/2/usePerformCardAction.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-perform-card-action-js-calling-perform-card-action-should-send-card-action-to-middleware-1-snap.png
rename to __tests__/html2/hooks/2/usePerformCardAction.html.snap-1.png

From 3b567f55da3964bc1b405638e2f5262e7233c328 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:15:39 +0000
Subject: [PATCH 24/56] Migrate usePostActivity

---
 __tests__/hooks/usePostActivity.js            |  28 --------
 __tests__/html2/hooks/2/usePostActivity.html  |  61 ++++++++++++++++++
 .../hooks/2/usePostActivity.html.snap-1.png}  | Bin
 3 files changed, 61 insertions(+), 28 deletions(-)
 delete mode 100644 __tests__/hooks/usePostActivity.js
 create mode 100644 __tests__/html2/hooks/2/usePostActivity.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-post-activity-js-calling-post-activity-should-send-an-activity-1-snap.png => html2/hooks/2/usePostActivity.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/usePostActivity.js b/__tests__/hooks/usePostActivity.js
deleted file mode 100644
index 0de8f87361..0000000000
--- a/__tests__/hooks/usePostActivity.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling postActivity should send an activity', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('usePostActivity', [], fn =>
-    fn({
-      text: 'Hello, World!',
-      type: 'message'
-    })
-  );
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/usePostActivity.html b/__tests__/html2/hooks/2/usePostActivity.html
new file mode 100644
index 0000000000..d29486d2d6
--- /dev/null
+++ b/__tests__/html2/hooks/2/usePostActivity.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { usePostActivity } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        const postActivity = await renderHook(() => usePostActivity());
+
+        await pageConditions.uiConnected();
+
+        const { resolveAll } = await directLine.actPostActivity(() =>
+          postActivity({
+            text: 'Hello, World!',
+            type: 'message'
+          })
+        );
+
+        await resolveAll();
+
+        await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-post-activity-js-calling-post-activity-should-send-an-activity-1-snap.png b/__tests__/html2/hooks/2/usePostActivity.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-post-activity-js-calling-post-activity-should-send-an-activity-1-snap.png
rename to __tests__/html2/hooks/2/usePostActivity.html.snap-1.png

From a8649cdd60aa234f4fe34b945b82fe3f5170976e Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:17:30 +0000
Subject: [PATCH 25/56] Migrate useRelativeTimeFormatter

---
 __tests__/hooks/useRelativeTimeFormatter.js   | 40 --------------
 .../hooks/2/useRelativeTimeFormatter.html     | 54 +++++++++++++++++++
 2 files changed, 54 insertions(+), 40 deletions(-)
 delete mode 100644 __tests__/hooks/useRelativeTimeFormatter.js
 create mode 100644 __tests__/html2/hooks/2/useRelativeTimeFormatter.html

diff --git a/__tests__/hooks/useRelativeTimeFormatter.js b/__tests__/hooks/useRelativeTimeFormatter.js
deleted file mode 100644
index f5eddc9c86..0000000000
--- a/__tests__/hooks/useRelativeTimeFormatter.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('should return relative time for "yue"', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'yue'
-    }
-  });
-
-  const actual = await pageObjects.runHook('useRelativeTimeFormatter', [], formatRelativeTime => [
-    formatRelativeTime(Date.now()),
-    formatRelativeTime(new Date()),
-    formatRelativeTime(new Date().toISOString()),
-    formatRelativeTime(Date.now() - 60000),
-    formatRelativeTime(Date.now() - 120000),
-    formatRelativeTime(Date.now() - 3600000),
-    formatRelativeTime(Date.now() - 7200000),
-    formatRelativeTime(Date.now() - 86400000),
-    formatRelativeTime(Date.now() - 172800000)
-  ]);
-
-  expect(actual).toMatchInlineSnapshot(`
-    [
-      "啱啱",
-      "啱啱",
-      "啱啱",
-      "一分鐘前",
-      "2 分鐘前",
-      "一個鐘前",
-      "2 小時前",
-      "今日",
-      "尋日",
-    ]
-  `);
-});
diff --git a/__tests__/html2/hooks/2/useRelativeTimeFormatter.html b/__tests__/html2/hooks/2/useRelativeTimeFormatter.html
new file mode 100644
index 0000000000..473a83b75d
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRelativeTimeFormatter.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRelativeTimeFormatter } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const formatRelativeTime = await renderHook(() => useRelativeTimeFormatter());
+
+        expect(formatRelativeTime(Date.now())).toBe('啱啱');
+        expect(formatRelativeTime(new Date())).toBe('啱啱');
+        expect(formatRelativeTime(new Date().toISOString())).toBe('啱啱');
+        expect(formatRelativeTime(Date.now() - 60000)).toBe('一分鐘前');
+        expect(formatRelativeTime(Date.now() - 120000)).toBe('2 分鐘前');
+        expect(formatRelativeTime(Date.now() - 3600000)).toBe('一個鐘前');
+        expect(formatRelativeTime(Date.now() - 7200000)).toBe('2 小時前');
+        expect(formatRelativeTime(Date.now() - 86400000)).toBe('今日');
+        expect(formatRelativeTime(Date.now() - 172800000)).toBe('尋日');
+      });
+    </script>
+  </body>
+</html>

From bff9a3d4623f49a616348cdb0c9ac3d3f1feef46 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:24:11 +0000
Subject: [PATCH 26/56] Migrate useRenderMarkdownAsHTML

---
 __tests__/hooks/useRenderMarkdownAsHTML.js    | 76 -------------------
 .../2/useRenderMarkdownAsHTML.custom.html     | 53 +++++++++++++
 .../2/useRenderMarkdownAsHTML.default.html    | 49 ++++++++++++
 .../useRenderMarkdownAsHTML.externalLink.html | 49 ++++++++++++
 ...RenderMarkdownAsHTML.externalLink.yue.html | 53 +++++++++++++
 .../hooks/2/useRenderMarkdownAsHTML.null.html | 46 +++++++++++
 6 files changed, 250 insertions(+), 76 deletions(-)
 delete mode 100644 __tests__/hooks/useRenderMarkdownAsHTML.js
 create mode 100644 __tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html
 create mode 100644 __tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html
 create mode 100644 __tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html
 create mode 100644 __tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html
 create mode 100644 __tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html

diff --git a/__tests__/hooks/useRenderMarkdownAsHTML.js b/__tests__/hooks/useRenderMarkdownAsHTML.js
deleted file mode 100644
index e5bfefccb3..0000000000
--- a/__tests__/hooks/useRenderMarkdownAsHTML.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-const CSS_HASH_PATTERN = /webchat--css-[\d\w]*-[\d\w]*/u;
-
-test('renderMarkdown should use Markdown-It if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  expect(
-    (await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))).replace(
-      CSS_HASH_PATTERN,
-      'webchat--css-xxxxx-xxxxx'
-    )
-  ).toBe(
-    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>'
-  );
-});
-
-test('renderMarkdown should use custom Markdown transform function from props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      renderMarkdown: text => `<p>${text.toUpperCase()}</p>`
-    }
-  });
-
-  expect(
-    (await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))).replace(
-      CSS_HASH_PATTERN,
-      'webchat--css-xxxxx-xxxxx'
-    )
-  ).toBe(
-    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>'
-  );
-});
-
-test('renderMarkdown should return falsy if the custom Markdown transform function is null', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      renderMarkdown: null
-    }
-  });
-
-  expect(await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => !!fn)).toBe(false);
-});
-
-test('renderMarkdown should add accessibility text for external links', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  expect(
-    (
-      await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn =>
-        fn('Click [here](https://aka.ms/) to find out more.')
-      )
-    ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
-  ).toBe(
-    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>`
-  );
-});
-
-test('renderMarkdown should add accessibility text for external links with yue', async () => {
-  const { pageObjects } = await setupWebDriver({ props: { locale: 'yue' } });
-
-  expect(
-    (
-      await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn =>
-        fn('Click [here](https://aka.ms/) to find out more.')
-      )
-    ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
-  ).toBe(
-    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>`
-  );
-});
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html
new file mode 100644
index 0000000000..64f07259e4
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRenderMarkdownAsHTML } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          renderMarkdown: text => `<p>${text.toUpperCase()}</p>`,
+          store
+        });
+
+        const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
+
+        const actual = renderMarkdownAsHTML('Hello, World!').replace(
+          /webchat--css-[\d\w]*-[\d\w]*/u,
+          'webchat--css-xxxxx-xxxxx'
+        );
+
+        expect(actual).toBe(
+          '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html
new file mode 100644
index 0000000000..d51e5d26b4
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRenderMarkdownAsHTML } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
+
+        const actual = renderMarkdownAsHTML('Hello, World!').replace(
+          /webchat--css-[\d\w]*-[\d\w]*/u,
+          'webchat--css-xxxxx-xxxxx'
+        );
+
+        expect(actual).toBe(
+          '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>'
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html
new file mode 100644
index 0000000000..11d7942dff
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRenderMarkdownAsHTML } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
+
+        const actual = renderMarkdownAsHTML('Click [here](https://aka.ms/) to find out more.').replace(
+          /webchat--css-[\d\w]*-[\d\w]*/u,
+          'webchat--css-xxxxx-xxxxx'
+        );
+
+        expect(actual).toBe(
+          `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>`
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html
new file mode 100644
index 0000000000..24fe89ac6f
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRenderMarkdownAsHTML } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'yue',
+          store
+        });
+
+        const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
+
+        const actual = renderMarkdownAsHTML('Click [here](https://aka.ms/) to find out more.').replace(
+          /webchat--css-[\d\w]*-[\d\w]*/u,
+          'webchat--css-xxxxx-xxxxx'
+        );
+
+        expect(actual).toBe(
+          `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>`
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html
new file mode 100644
index 0000000000..6568b166c8
--- /dev/null
+++ b/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useRenderMarkdownAsHTML } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          renderMarkdown: null,
+          store
+        });
+
+        const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
+
+        expect(renderMarkdownAsHTML).toBeFalsy();
+      });
+    </script>
+  </body>
+</html>

From 8d60b0422afbceaf2e95197c4d961ecb6955a2a5 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:34:55 +0000
Subject: [PATCH 27/56] Migrate useSendBoxSpeechInterimsVisible

---
 .../hooks/useSendBoxSpeechInterimsVisible.js  | 92 -------------------
 ...echInterimsVisible.getter.recognition.html | 83 +++++++++++++++++
 ...peechInterimsVisible.getter.synthesis.html | 77 ++++++++++++++++
 ...seSendBoxSpeechInterimsVisible.setter.html | 55 +++++++++++
 4 files changed, 215 insertions(+), 92 deletions(-)
 delete mode 100644 __tests__/hooks/useSendBoxSpeechInterimsVisible.js
 create mode 100644 __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html
 create mode 100644 __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html
 create mode 100644 __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html

diff --git a/__tests__/hooks/useSendBoxSpeechInterimsVisible.js b/__tests__/hooks/useSendBoxSpeechInterimsVisible.js
deleted file mode 100644
index 5f42b43a35..0000000000
--- a/__tests__/hooks/useSendBoxSpeechInterimsVisible.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import negationOf from '../setup/conditions/negationOf';
-import speechRecognitionStartCalled from '../setup/conditions/speechRecognitionStartCalled';
-import speechSynthesisUtterancePended from '../setup/conditions/speechSynthesisUtterancePended';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('sendBoxSpeechInterimsVisible should return if dictation is started or not', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await expect(
-    pageObjects.runHook(
-      'useSendBoxSpeechInterimsVisible',
-      [],
-      sendBoxSpeechInterimsVisible => sendBoxSpeechInterimsVisible[0]
-    )
-  ).resolves.toMatchInlineSnapshot(`false`);
-
-  await pageObjects.clickMicrophoneButton();
-
-  await driver.wait(speechRecognitionStartCalled(), timeouts.ui);
-
-  await expect(
-    pageObjects.runHook(
-      'useSendBoxSpeechInterimsVisible',
-      [],
-      sendBoxSpeechInterimsVisible => sendBoxSpeechInterimsVisible[0]
-    )
-  ).resolves.toMatchInlineSnapshot(`true`);
-
-  await pageObjects.putSpeechRecognitionResult('recognizing', 'Hello');
-
-  await expect(
-    pageObjects.runHook(
-      'useSendBoxSpeechInterimsVisible',
-      [],
-      sendBoxSpeechInterimsVisible => sendBoxSpeechInterimsVisible[0]
-    )
-  ).resolves.toMatchInlineSnapshot(`true`);
-});
-
-test('sendBoxSpeechInterimsVisible should return false when synthesizing', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaMicrophone('Hello, World!');
-  await expect(pageObjects.startSpeechSynthesize());
-
-  await expect(
-    pageObjects.runHook(
-      'useSendBoxSpeechInterimsVisible',
-      [],
-      sendBoxSpeechInterimsVisible => sendBoxSpeechInterimsVisible[0]
-    )
-  ).resolves.toMatchInlineSnapshot(`false`);
-
-  await driver.wait(speechSynthesisUtterancePended(), timeouts.ui);
-
-  await pageObjects.clickMicrophoneButton();
-
-  await driver.wait(negationOf(speechSynthesisUtterancePended()), timeouts.ui);
-
-  await expect(
-    pageObjects.runHook(
-      'useSendBoxSpeechInterimsVisible',
-      [],
-      sendBoxSpeechInterimsVisible => sendBoxSpeechInterimsVisible[0]
-    )
-  ).resolves.toMatchInlineSnapshot(`true`);
-});
-
-test('setter should be undefined', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setLanguage] = await pageObjects.runHook('useSendBoxSpeechInterimsVisible');
-
-  expect(setLanguage).toBeUndefined();
-});
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html
new file mode 100644
index 0000000000..1a0b41b805
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendBoxSpeechInterimsVisible } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+          const ponyfill = createWebSpeechPonyfill();
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            {
+              directLine,
+              store,
+              webSpeechPonyfillFactory: () => ponyfill
+            },
+            { renderWebChat: true }
+          );
+
+          await renderHook();
+          await pageConditions.uiConnected();
+
+          const [sendBoxSpeechInterimsVisible1] = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+          expect(sendBoxSpeechInterimsVisible1).toBe(false);
+
+          await actRecognizeOnce(
+            ponyfill,
+            async () => {
+              await host.click(document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`));
+
+              const [sendBoxSpeechInterimsVisible2] = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+              expect(sendBoxSpeechInterimsVisible2).toBe(true);
+            },
+            dispatcher => {
+              dispatcher.start();
+              dispatcher.audioStart();
+              dispatcher.soundStart();
+              dispatcher.speechStart();
+              dispatcher.result('Hello');
+            }
+          );
+
+          const [sendBoxSpeechInterimsVisible3] = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+          expect(sendBoxSpeechInterimsVisible3).toBe(true);
+        },
+        { skipCheckAccessibility: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html
new file mode 100644
index 0000000000..fee3ef9ad7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendBoxSpeechInterimsVisible } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import {
+        actSpeak,
+        createWebSpeechPonyfill,
+        sendMessageViaMicrophone
+      } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+          const ponyfill = createWebSpeechPonyfill();
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            {
+              directLine,
+              store,
+              webSpeechPonyfillFactory: () => ponyfill
+            },
+            { renderWebChat: true }
+          );
+
+          await renderHook();
+          await pageConditions.uiConnected();
+
+          const { resolveAll } = await directLine.actPostActivity(() =>
+            actSpeak(ponyfill, () => sendMessageViaMicrophone(ponyfill, 'Hello, World!'))
+          );
+
+          await resolveAll();
+
+          const [sendBoxSpeechInterimsVisible1] = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+          expect(sendBoxSpeechInterimsVisible1).toBe(false);
+
+          await host.click(document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`));
+
+          const [sendBoxSpeechInterimsVisible2] = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+          expect(sendBoxSpeechInterimsVisible2).toBe(true);
+        },
+        { skipCheckAccessibility: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html
new file mode 100644
index 0000000000..d9f737fbe8
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendBoxSpeechInterimsVisible } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        const sendBoxSpeechInterimsVisibleState = await renderHook(() => useSendBoxSpeechInterimsVisible());
+
+        expect(sendBoxSpeechInterimsVisibleState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 81ceb8f74b34c99b63b1a504141211d034c7ab6f Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:38:17 +0000
Subject: [PATCH 28/56] Migrate useSendBoxValue

---
 __tests__/hooks/useSendBoxValue.js            | 26 ----------
 .../html2/hooks/2/useSendBoxValue.getter.html | 51 +++++++++++++++++++
 .../html2/hooks/2/useSendBoxValue.setter.html | 50 ++++++++++++++++++
 3 files changed, 101 insertions(+), 26 deletions(-)
 delete mode 100644 __tests__/hooks/useSendBoxValue.js
 create mode 100644 __tests__/html2/hooks/2/useSendBoxValue.getter.html
 create mode 100644 __tests__/html2/hooks/2/useSendBoxValue.setter.html

diff --git a/__tests__/hooks/useSendBoxValue.js b/__tests__/hooks/useSendBoxValue.js
deleted file mode 100644
index 5a43f66452..0000000000
--- a/__tests__/hooks/useSendBoxValue.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should get the send box text', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.typeInSendBox('Hello, World!');
-  await expect(pageObjects.runHook('useSendBoxValue', [], result => result[0])).resolves.toBe('Hello, World!');
-});
-
-test('setter should set the send box text', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useSendBoxValue', [], result => result[1]('Hello, World!'));
-  await expect(pageObjects.getSendBoxText()).resolves.toBe('Hello, World!');
-});
diff --git a/__tests__/html2/hooks/2/useSendBoxValue.getter.html b/__tests__/html2/hooks/2/useSendBoxValue.getter.html
new file mode 100644
index 0000000000..044dac0f73
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendBoxValue.getter.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendBoxValue } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+        await pageConditions.uiConnected();
+
+        await pageObjects.typeInSendBox('Hello, World!');
+
+        const [sendBoxValue] = await renderHook(() => useSendBoxValue());
+
+        expect(sendBoxValue).toBe('Hello, World!');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useSendBoxValue.setter.html b/__tests__/html2/hooks/2/useSendBoxValue.setter.html
new file mode 100644
index 0000000000..3217880c71
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendBoxValue.setter.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendBoxValue } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        const [_, setSendBoxValue] = await renderHook(() => useSendBoxValue());
+
+        setSendBoxValue('Hello, World!');
+
+        await waitFor(() => expect(pageElements.sendBoxTextBox()).toHaveProperty('value', 'Hello, World!'));
+      });
+    </script>
+  </body>
+</html>

From 1961074839cbb5fae41291ff16babcd7cb08f9b9 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:40:59 +0000
Subject: [PATCH 29/56] Migrate useSendFiles

---
 __tests__/hooks/useSendFiles.js               |  36 ----------
 __tests__/html2/hooks/2/useSendFiles.html     |  64 ++++++++++++++++++
 .../hooks/2/useSendFiles.html.snap-1.png}     | Bin
 3 files changed, 64 insertions(+), 36 deletions(-)
 delete mode 100644 __tests__/hooks/useSendFiles.js
 create mode 100644 __tests__/html2/hooks/2/useSendFiles.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-send-files-js-calling-send-file-should-send-files-1-snap.png => html2/hooks/2/useSendFiles.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/useSendFiles.js b/__tests__/hooks/useSendFiles.js
deleted file mode 100644
index 5b25ab11ea..0000000000
--- a/__tests__/hooks/useSendFiles.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import allOutgoingActivitiesSent from '../setup/conditions/allOutgoingActivitiesSent';
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling sendFile should send files', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    // TODO: [P3] Offline bot did not reply with a downloadable attachment, we need to use production bot
-    useProductionBot: true
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useSendFiles', [], sendFiles => {
-    const blob1 = new Blob([new ArrayBuffer(1024)]);
-    const blob2 = new Blob([new ArrayBuffer(1024)]);
-
-    blob1.name = 'index.png';
-    blob2.name = 'index2.png';
-
-    sendFiles([blob1, blob2]);
-  });
-
-  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
-  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/useSendFiles.html b/__tests__/html2/hooks/2/useSendFiles.html
new file mode 100644
index 0000000000..60f2a406c3
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendFiles.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendFiles } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            {
+              directLine: createDirectLine({ token: await fetchDirectLineToken() }),
+              store: createStore()
+            },
+            { renderWebChat: true }
+          );
+
+          const sendFiles = await renderHook(() => useSendFiles());
+
+          await pageConditions.uiConnected();
+
+          const blob1 = new Blob([new ArrayBuffer(1024)]);
+          const blob2 = new Blob([new ArrayBuffer(1024)]);
+
+          blob1.name = 'index.png';
+          blob2.name = 'index2.png';
+
+          sendFiles([blob1, blob2]);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-send-files-js-calling-send-file-should-send-files-1-snap.png b/__tests__/html2/hooks/2/useSendFiles.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-send-files-js-calling-send-file-should-send-files-1-snap.png
rename to __tests__/html2/hooks/2/useSendFiles.html.snap-1.png

From 4debe3b18c82a33c0496e791d31baf417d96abdd Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:43:48 +0000
Subject: [PATCH 30/56] Fix test

---
 __tests__/html2/hooks/2/useSendFiles.html | 36 ++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/__tests__/html2/hooks/2/useSendFiles.html b/__tests__/html2/hooks/2/useSendFiles.html
index 60f2a406c3..e6aaef3bf6 100644
--- a/__tests__/html2/hooks/2/useSendFiles.html
+++ b/__tests__/html2/hooks/2/useSendFiles.html
@@ -21,25 +21,20 @@
       import '/test-harness.mjs';
       import '/test-page-object.mjs';
 
-      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendFiles } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
 
-      const {
-        createStore,
-        token: { fetchDirectLineToken }
-      } = window.testHelpers;
+      const { createDirectLineEmulator } = window.testHelpers;
 
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(
         async function () {
+          const { directLine, store } = createDirectLineEmulator();
           const renderHook = createRenderHook(
             document.getElementById('webchat'),
-            {
-              directLine: createDirectLine({ token: await fetchDirectLineToken() }),
-              store: createStore()
-            },
+            { directLine, store },
             { renderWebChat: true }
           );
 
@@ -53,7 +48,28 @@
           blob1.name = 'index.png';
           blob2.name = 'index2.png';
 
-          sendFiles([blob1, blob2]);
+          const { resolveAll } = await directLine.actPostActivity(() => sendFiles([blob1, blob2]));
+
+          await resolveAll();
+
+          await directLine.emulateIncomingActivity({
+            type: 'message',
+            text: 'You have uploaded:',
+            attachments: [
+              {
+                contentType: 'application/octet-stream',
+                contentUrl:
+                  'https://directline.botframework.com/attachments/4muFGIKLEupI6epNKGtA8c-us/0000000/0/index.png?t=eyJhbGciOiJSUzI1NiIsImtpZCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsIng1dCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiJFNHV0OEVNaGNONFBjSU5PRmJjMzhQSW42clJiVEdKeDZpTURSVE16MEh1VmtDU2ZLU0lLSlFRSjk5QkxBQzRmMWNNQUFyb2hBQUFCQVpCU3FZZHAiLCJjb252IjoiNG11RkdJS0xFdXBJNmVwTktHdEE4Yy11cy0wMDAwMDAwIiwibmJmIjoxNzY1NTI4ODk4LCJleHAiOjE3NjU1MzA2OTgsImlzcyI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyIsImF1ZCI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyJ9.nyMXSYh2xAFhyS55kACAjkmVBVvtLPFRIX3wCVhDr9hiqQqExFxOhvJCpDqkzZlIf0ZH47yBBRzUVjTeTWgbaVX_tB-eaIBUWaeYD3ArAaZ_fw3AurfE2f8FHIW31l7qoGvytXQ7EeqzWSG90kw-LUSMuRjz4_LWx2ZOhgEkdA2kw0KuCcnMA-lCEvKiH8AT3bkYpJSafd9nAappox8SjtwmFzuADYa69ej5CNQlRabI3TorU52N8PGWfNCoSWKrEzlOVibEP9or_eRDsX1Del7yEdab3Hu706P88ZDiofka3bY7JSsDRqo6ERyZIzkwyW-yGP79P_TTuEvafXzr3g',
+                name: 'index.png'
+              },
+              {
+                contentType: 'application/octet-stream',
+                contentUrl:
+                  'https://directline.botframework.com/attachments/4muFGIKLEupI6epNKGtA8c-us/0000000/1/index2.png?t=eyJhbGciOiJSUzI1NiIsImtpZCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsIng1dCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiJFNHV0OEVNaGNONFBjSU5PRmJjMzhQSW42clJiVEdKeDZpTURSVE16MEh1VmtDU2ZLU0lLSlFRSjk5QkxBQzRmMWNNQUFyb2hBQUFCQVpCU3FZZHAiLCJjb252IjoiNG11RkdJS0xFdXBJNmVwTktHdEE4Yy11cy0wMDAwMDAwIiwibmJmIjoxNzY1NTI4ODk4LCJleHAiOjE3NjU1MzA2OTgsImlzcyI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyIsImF1ZCI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyJ9.nyMXSYh2xAFhyS55kACAjkmVBVvtLPFRIX3wCVhDr9hiqQqExFxOhvJCpDqkzZlIf0ZH47yBBRzUVjTeTWgbaVX_tB-eaIBUWaeYD3ArAaZ_fw3AurfE2f8FHIW31l7qoGvytXQ7EeqzWSG90kw-LUSMuRjz4_LWx2ZOhgEkdA2kw0KuCcnMA-lCEvKiH8AT3bkYpJSafd9nAappox8SjtwmFzuADYa69ej5CNQlRabI3TorU52N8PGWfNCoSWKrEzlOVibEP9or_eRDsX1Del7yEdab3Hu706P88ZDiofka3bY7JSsDRqo6ERyZIzkwyW-yGP79P_TTuEvafXzr3g',
+                name: 'index2.png'
+              }
+            ]
+          });
 
           await host.snapshot('local');
         },

From d94fcd5241b6ceca9fda11c9973fa0e62b39fd74 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:44:06 +0000
Subject: [PATCH 31/56] Move tests

---
 .../hooks/{2 => }/useMarkActivityAsSpoken.html      |   0
 .../hooks/{2 => }/useMicrophoneButtonClick.html     |   0
 .../html2/hooks/{2 => }/usePerformCardAction.html   |   0
 .../{2 => }/usePerformCardAction.html.snap-1.png    | Bin
 __tests__/html2/hooks/{2 => }/usePostActivity.html  |   0
 .../hooks/{2 => }/usePostActivity.html.snap-1.png   | Bin
 .../hooks/{2 => }/useRelativeTimeFormatter.html     |   0
 .../{2 => }/useRenderMarkdownAsHTML.custom.html     |   0
 .../{2 => }/useRenderMarkdownAsHTML.default.html    |   0
 .../useRenderMarkdownAsHTML.externalLink.html       |   0
 .../useRenderMarkdownAsHTML.externalLink.yue.html   |   0
 .../hooks/{2 => }/useRenderMarkdownAsHTML.null.html |   0
 ...BoxSpeechInterimsVisible.getter.recognition.html |   0
 ...ndBoxSpeechInterimsVisible.getter.synthesis.html |   0
 .../useSendBoxSpeechInterimsVisible.setter.html     |   0
 .../html2/hooks/{2 => }/useSendBoxValue.getter.html |   0
 .../html2/hooks/{2 => }/useSendBoxValue.setter.html |   0
 __tests__/html2/hooks/{2 => }/useSendFiles.html     |   0
 .../hooks/{2 => }/useSendFiles.html.snap-1.png      | Bin
 19 files changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/{2 => }/useMarkActivityAsSpoken.html (100%)
 rename __tests__/html2/hooks/{2 => }/useMicrophoneButtonClick.html (100%)
 rename __tests__/html2/hooks/{2 => }/usePerformCardAction.html (100%)
 rename __tests__/html2/hooks/{2 => }/usePerformCardAction.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/usePostActivity.html (100%)
 rename __tests__/html2/hooks/{2 => }/usePostActivity.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/useRelativeTimeFormatter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useRenderMarkdownAsHTML.custom.html (100%)
 rename __tests__/html2/hooks/{2 => }/useRenderMarkdownAsHTML.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useRenderMarkdownAsHTML.externalLink.html (100%)
 rename __tests__/html2/hooks/{2 => }/useRenderMarkdownAsHTML.externalLink.yue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useRenderMarkdownAsHTML.null.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendBoxSpeechInterimsVisible.getter.recognition.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendBoxSpeechInterimsVisible.getter.synthesis.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendBoxSpeechInterimsVisible.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendBoxValue.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendBoxValue.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendFiles.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendFiles.html.snap-1.png (100%)

diff --git a/__tests__/html2/hooks/2/useMarkActivityAsSpoken.html b/__tests__/html2/hooks/useMarkActivityAsSpoken.html
similarity index 100%
rename from __tests__/html2/hooks/2/useMarkActivityAsSpoken.html
rename to __tests__/html2/hooks/useMarkActivityAsSpoken.html
diff --git a/__tests__/html2/hooks/2/useMicrophoneButtonClick.html b/__tests__/html2/hooks/useMicrophoneButtonClick.html
similarity index 100%
rename from __tests__/html2/hooks/2/useMicrophoneButtonClick.html
rename to __tests__/html2/hooks/useMicrophoneButtonClick.html
diff --git a/__tests__/html2/hooks/2/usePerformCardAction.html b/__tests__/html2/hooks/usePerformCardAction.html
similarity index 100%
rename from __tests__/html2/hooks/2/usePerformCardAction.html
rename to __tests__/html2/hooks/usePerformCardAction.html
diff --git a/__tests__/html2/hooks/2/usePerformCardAction.html.snap-1.png b/__tests__/html2/hooks/usePerformCardAction.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/usePerformCardAction.html.snap-1.png
rename to __tests__/html2/hooks/usePerformCardAction.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/usePostActivity.html b/__tests__/html2/hooks/usePostActivity.html
similarity index 100%
rename from __tests__/html2/hooks/2/usePostActivity.html
rename to __tests__/html2/hooks/usePostActivity.html
diff --git a/__tests__/html2/hooks/2/usePostActivity.html.snap-1.png b/__tests__/html2/hooks/usePostActivity.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/usePostActivity.html.snap-1.png
rename to __tests__/html2/hooks/usePostActivity.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/useRelativeTimeFormatter.html b/__tests__/html2/hooks/useRelativeTimeFormatter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRelativeTimeFormatter.html
rename to __tests__/html2/hooks/useRelativeTimeFormatter.html
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html b/__tests__/html2/hooks/useRenderMarkdownAsHTML.custom.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRenderMarkdownAsHTML.custom.html
rename to __tests__/html2/hooks/useRenderMarkdownAsHTML.custom.html
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html b/__tests__/html2/hooks/useRenderMarkdownAsHTML.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRenderMarkdownAsHTML.default.html
rename to __tests__/html2/hooks/useRenderMarkdownAsHTML.default.html
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html b/__tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.html
rename to __tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.html
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html b/__tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.yue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRenderMarkdownAsHTML.externalLink.yue.html
rename to __tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.yue.html
diff --git a/__tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html b/__tests__/html2/hooks/useRenderMarkdownAsHTML.null.html
similarity index 100%
rename from __tests__/html2/hooks/2/useRenderMarkdownAsHTML.null.html
rename to __tests__/html2/hooks/useRenderMarkdownAsHTML.null.html
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.recognition.html
rename to __tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.getter.synthesis.html
rename to __tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html
diff --git a/__tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendBoxSpeechInterimsVisible.setter.html
rename to __tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html
diff --git a/__tests__/html2/hooks/2/useSendBoxValue.getter.html b/__tests__/html2/hooks/useSendBoxValue.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendBoxValue.getter.html
rename to __tests__/html2/hooks/useSendBoxValue.getter.html
diff --git a/__tests__/html2/hooks/2/useSendBoxValue.setter.html b/__tests__/html2/hooks/useSendBoxValue.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendBoxValue.setter.html
rename to __tests__/html2/hooks/useSendBoxValue.setter.html
diff --git a/__tests__/html2/hooks/2/useSendFiles.html b/__tests__/html2/hooks/useSendFiles.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendFiles.html
rename to __tests__/html2/hooks/useSendFiles.html
diff --git a/__tests__/html2/hooks/2/useSendFiles.html.snap-1.png b/__tests__/html2/hooks/useSendFiles.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/useSendFiles.html.snap-1.png
rename to __tests__/html2/hooks/useSendFiles.html.snap-1.png

From 83b2bb91b2b9758261f630c8ea36a3617940d8c7 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:46:24 +0000
Subject: [PATCH 32/56] Migrate useSendMessage

---
 __tests__/hooks/useSendMessage.js             |  23 -------
 __tests__/html2/hooks/2/useSendMessage.html   |  59 ++++++++++++++++++
 .../hooks/2/useSendMessage.html.snap-1.png}   | Bin
 3 files changed, 59 insertions(+), 23 deletions(-)
 delete mode 100644 __tests__/hooks/useSendMessage.js
 create mode 100644 __tests__/html2/hooks/2/useSendMessage.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-send-message-js-calling-send-message-should-send-a-message-activity-1-snap.png => html2/hooks/2/useSendMessage.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/useSendMessage.js b/__tests__/hooks/useSendMessage.js
deleted file mode 100644
index 587369b968..0000000000
--- a/__tests__/hooks/useSendMessage.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling sendMessage should send a message activity', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useSendMessage', [], sendMessage => sendMessage('Hello, World!'));
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/useSendMessage.html b/__tests__/html2/hooks/2/useSendMessage.html
new file mode 100644
index 0000000000..a1df8fa533
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendMessage.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendMessage } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            { directLine, store },
+            { renderWebChat: true }
+          );
+
+          const sendMessage = await renderHook(() => useSendMessage());
+
+          await pageConditions.uiConnected();
+
+          const { resolveAll } = await directLine.actPostActivity(() => sendMessage('Hello, World!'));
+
+          await resolveAll();
+
+          await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+
+          await pageConditions.numActivitiesShown(2);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-send-message-js-calling-send-message-should-send-a-message-activity-1-snap.png b/__tests__/html2/hooks/2/useSendMessage.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-send-message-js-calling-send-message-should-send-a-message-activity-1-snap.png
rename to __tests__/html2/hooks/2/useSendMessage.html.snap-1.png

From 0c50b53488c8a1d534b67b500af32510aa8ed2d2 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:49:28 +0000
Subject: [PATCH 33/56] Migrate useSendMessageBack

---
 __tests__/hooks/useSendMessageBack.js         |  25 ------
 .../html2/hooks/2/useSendMessageBack.html     |  74 ++++++++++++++++++
 .../2/useSendMessageBack.html.snap-1.png}     | Bin
 3 files changed, 74 insertions(+), 25 deletions(-)
 delete mode 100644 __tests__/hooks/useSendMessageBack.js
 create mode 100644 __tests__/html2/hooks/2/useSendMessageBack.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-send-message-back-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png => html2/hooks/2/useSendMessageBack.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/useSendMessageBack.js b/__tests__/hooks/useSendMessageBack.js
deleted file mode 100644
index 1b700f55d0..0000000000
--- a/__tests__/hooks/useSendMessageBack.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling sendMessageBack should send a message back activity', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useSendMessageBack', [], sendMessageBack =>
-    sendMessageBack({ hello: 'World!' }, 'Aloha!', 'Display text')
-  );
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/useSendMessageBack.html b/__tests__/html2/hooks/2/useSendMessageBack.html
new file mode 100644
index 0000000000..c523b99e1b
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendMessageBack.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendMessageBack } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const { directLine, store } = createDirectLineEmulator();
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            { directLine, store },
+            { renderWebChat: true }
+          );
+
+          const sendMessageBack = await renderHook(() => useSendMessageBack());
+
+          await pageConditions.uiConnected();
+
+          const { resolveAll } = await directLine.actPostActivity(() =>
+            sendMessageBack({ hello: 'World!' }, 'Aloha!', 'Display text')
+          );
+
+          await resolveAll();
+
+          await directLine.emulateIncomingActivity({
+            attachments: [
+              {
+                content: 'Aloha!',
+                contentType: 'text/plain'
+              },
+              {
+                content: '```\n{\n  "hello": "World!"\n}\n```',
+                contentType: 'text/markdown'
+              }
+            ],
+            text: 'You posted',
+            type: 'message'
+          });
+
+          await pageConditions.numActivitiesShown(2);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-send-message-back-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png b/__tests__/html2/hooks/2/useSendMessageBack.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-send-message-back-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png
rename to __tests__/html2/hooks/2/useSendMessageBack.html.snap-1.png

From d6e1a83f054290a651f946f96546ac07c3f08b04 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:54:26 +0000
Subject: [PATCH 34/56] Migrate useSendPostBack

---
 __tests__/hooks/useSendPostBack.js            |  23 -------
 __tests__/html2/hooks/2/useSendMessage.html   |  16 +++--
 .../html2/hooks/2/useSendMessageBack.html     |  31 +++-------
 __tests__/html2/hooks/2/useSendPostBack.html  |  57 ++++++++++++++++++
 .../hooks/2/useSendPostBack.html.snap-1.png}  | Bin
 __tests__/html2/hooks/useSendFiles.html       |  33 +++-------
 6 files changed, 79 insertions(+), 81 deletions(-)
 delete mode 100644 __tests__/hooks/useSendPostBack.js
 create mode 100644 __tests__/html2/hooks/2/useSendPostBack.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-send-post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png => html2/hooks/2/useSendPostBack.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/useSendPostBack.js b/__tests__/hooks/useSendPostBack.js
deleted file mode 100644
index fee6eedc42..0000000000
--- a/__tests__/hooks/useSendPostBack.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling sendPostBack should send a post back activity', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.runHook('useSendPostBack', [], sendPostBack => sendPostBack({ hello: 'World!' }));
-
-  await driver.wait(minNumActivitiesShown(1), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/useSendMessage.html b/__tests__/html2/hooks/2/useSendMessage.html
index a1df8fa533..9d75cee623 100644
--- a/__tests__/html2/hooks/2/useSendMessage.html
+++ b/__tests__/html2/hooks/2/useSendMessage.html
@@ -21,20 +21,22 @@
       import '/test-harness.mjs';
       import '/test-page-object.mjs';
 
-      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendMessage } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
 
-      const { createDirectLineEmulator } = window.testHelpers;
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
 
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(
         async function () {
-          const { directLine, store } = createDirectLineEmulator();
           const renderHook = createRenderHook(
             document.getElementById('webchat'),
-            { directLine, store },
+            { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
             { renderWebChat: true }
           );
 
@@ -42,11 +44,7 @@
 
           await pageConditions.uiConnected();
 
-          const { resolveAll } = await directLine.actPostActivity(() => sendMessage('Hello, World!'));
-
-          await resolveAll();
-
-          await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+          sendMessage('Hello, World!');
 
           await pageConditions.numActivitiesShown(2);
 
diff --git a/__tests__/html2/hooks/2/useSendMessageBack.html b/__tests__/html2/hooks/2/useSendMessageBack.html
index c523b99e1b..fe899fa4cc 100644
--- a/__tests__/html2/hooks/2/useSendMessageBack.html
+++ b/__tests__/html2/hooks/2/useSendMessageBack.html
@@ -21,20 +21,22 @@
       import '/test-harness.mjs';
       import '/test-page-object.mjs';
 
-      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendMessageBack } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
 
-      const { createDirectLineEmulator } = window.testHelpers;
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
 
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(
         async function () {
-          const { directLine, store } = createDirectLineEmulator();
           const renderHook = createRenderHook(
             document.getElementById('webchat'),
-            { directLine, store },
+            { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
             { renderWebChat: true }
           );
 
@@ -42,26 +44,7 @@
 
           await pageConditions.uiConnected();
 
-          const { resolveAll } = await directLine.actPostActivity(() =>
-            sendMessageBack({ hello: 'World!' }, 'Aloha!', 'Display text')
-          );
-
-          await resolveAll();
-
-          await directLine.emulateIncomingActivity({
-            attachments: [
-              {
-                content: 'Aloha!',
-                contentType: 'text/plain'
-              },
-              {
-                content: '```\n{\n  "hello": "World!"\n}\n```',
-                contentType: 'text/markdown'
-              }
-            ],
-            text: 'You posted',
-            type: 'message'
-          });
+          sendMessageBack({ hello: 'World!' }, 'Aloha!', 'Display text');
 
           await pageConditions.numActivitiesShown(2);
 
diff --git a/__tests__/html2/hooks/2/useSendPostBack.html b/__tests__/html2/hooks/2/useSendPostBack.html
new file mode 100644
index 0000000000..360099cf0c
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSendPostBack.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSendPostBack } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(
+        async function () {
+          const renderHook = createRenderHook(
+            document.getElementById('webchat'),
+            { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
+            { renderWebChat: true }
+          );
+
+          const sendPostBack = await renderHook(() => useSendPostBack());
+
+          await pageConditions.uiConnected();
+
+          sendPostBack({ hello: 'World!' });
+
+          await pageConditions.numActivitiesShown(1);
+
+          await host.snapshot('local');
+        },
+        { ignoreErrors: true }
+      );
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-send-post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png b/__tests__/html2/hooks/2/useSendPostBack.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-send-post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png
rename to __tests__/html2/hooks/2/useSendPostBack.html.snap-1.png
diff --git a/__tests__/html2/hooks/useSendFiles.html b/__tests__/html2/hooks/useSendFiles.html
index e6aaef3bf6..4e00f85a05 100644
--- a/__tests__/html2/hooks/useSendFiles.html
+++ b/__tests__/html2/hooks/useSendFiles.html
@@ -21,20 +21,22 @@
       import '/test-harness.mjs';
       import '/test-page-object.mjs';
 
-      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendFiles } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
 
-      const { createDirectLineEmulator } = window.testHelpers;
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
 
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(
         async function () {
-          const { directLine, store } = createDirectLineEmulator();
           const renderHook = createRenderHook(
             document.getElementById('webchat'),
-            { directLine, store },
+            { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
             { renderWebChat: true }
           );
 
@@ -48,28 +50,9 @@
           blob1.name = 'index.png';
           blob2.name = 'index2.png';
 
-          const { resolveAll } = await directLine.actPostActivity(() => sendFiles([blob1, blob2]));
+          sendFiles([blob1, blob2]);
 
-          await resolveAll();
-
-          await directLine.emulateIncomingActivity({
-            type: 'message',
-            text: 'You have uploaded:',
-            attachments: [
-              {
-                contentType: 'application/octet-stream',
-                contentUrl:
-                  'https://directline.botframework.com/attachments/4muFGIKLEupI6epNKGtA8c-us/0000000/0/index.png?t=eyJhbGciOiJSUzI1NiIsImtpZCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsIng1dCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiJFNHV0OEVNaGNONFBjSU5PRmJjMzhQSW42clJiVEdKeDZpTURSVE16MEh1VmtDU2ZLU0lLSlFRSjk5QkxBQzRmMWNNQUFyb2hBQUFCQVpCU3FZZHAiLCJjb252IjoiNG11RkdJS0xFdXBJNmVwTktHdEE4Yy11cy0wMDAwMDAwIiwibmJmIjoxNzY1NTI4ODk4LCJleHAiOjE3NjU1MzA2OTgsImlzcyI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyIsImF1ZCI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyJ9.nyMXSYh2xAFhyS55kACAjkmVBVvtLPFRIX3wCVhDr9hiqQqExFxOhvJCpDqkzZlIf0ZH47yBBRzUVjTeTWgbaVX_tB-eaIBUWaeYD3ArAaZ_fw3AurfE2f8FHIW31l7qoGvytXQ7EeqzWSG90kw-LUSMuRjz4_LWx2ZOhgEkdA2kw0KuCcnMA-lCEvKiH8AT3bkYpJSafd9nAappox8SjtwmFzuADYa69ej5CNQlRabI3TorU52N8PGWfNCoSWKrEzlOVibEP9or_eRDsX1Del7yEdab3Hu706P88ZDiofka3bY7JSsDRqo6ERyZIzkwyW-yGP79P_TTuEvafXzr3g',
-                name: 'index.png'
-              },
-              {
-                contentType: 'application/octet-stream',
-                contentUrl:
-                  'https://directline.botframework.com/attachments/4muFGIKLEupI6epNKGtA8c-us/0000000/1/index2.png?t=eyJhbGciOiJSUzI1NiIsImtpZCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsIng1dCI6IlZuek84ZUJrbFJoSGNCR0c5THZjMUEyaXlYdyIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiJFNHV0OEVNaGNONFBjSU5PRmJjMzhQSW42clJiVEdKeDZpTURSVE16MEh1VmtDU2ZLU0lLSlFRSjk5QkxBQzRmMWNNQUFyb2hBQUFCQVpCU3FZZHAiLCJjb252IjoiNG11RkdJS0xFdXBJNmVwTktHdEE4Yy11cy0wMDAwMDAwIiwibmJmIjoxNzY1NTI4ODk4LCJleHAiOjE3NjU1MzA2OTgsImlzcyI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyIsImF1ZCI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyJ9.nyMXSYh2xAFhyS55kACAjkmVBVvtLPFRIX3wCVhDr9hiqQqExFxOhvJCpDqkzZlIf0ZH47yBBRzUVjTeTWgbaVX_tB-eaIBUWaeYD3ArAaZ_fw3AurfE2f8FHIW31l7qoGvytXQ7EeqzWSG90kw-LUSMuRjz4_LWx2ZOhgEkdA2kw0KuCcnMA-lCEvKiH8AT3bkYpJSafd9nAappox8SjtwmFzuADYa69ej5CNQlRabI3TorU52N8PGWfNCoSWKrEzlOVibEP9or_eRDsX1Del7yEdab3Hu706P88ZDiofka3bY7JSsDRqo6ERyZIzkwyW-yGP79P_TTuEvafXzr3g',
-                name: 'index2.png'
-              }
-            ]
-          });
+          await pageConditions.numActivitiesShown(2);
 
           await host.snapshot('local');
         },

From 13aa0214baee63af8240c67a00b9715b04fb6f01 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 08:56:45 +0000
Subject: [PATCH 35/56] MIgrate useSetNotification

---
 __tests__/hooks/useSetNotification.js         | 36 -----------
 .../html2/hooks/2/useSetNotification.html     | 62 +++++++++++++++++++
 2 files changed, 62 insertions(+), 36 deletions(-)
 delete mode 100644 __tests__/hooks/useSetNotification.js
 create mode 100644 __tests__/html2/hooks/2/useSetNotification.html

diff --git a/__tests__/hooks/useSetNotification.js b/__tests__/hooks/useSetNotification.js
deleted file mode 100644
index 6c99e423ad..0000000000
--- a/__tests__/hooks/useSetNotification.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import toastShown from '../setup/conditions/toastShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling setNotification should set and update notification', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.runHook('useSetNotification', [], setNotification =>
-    setNotification({
-      id: 'privacypolicy',
-      level: 'info',
-      message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy).'
-    })
-  );
-
-  await driver.wait(toastShown(1), timeouts.ui);
-  await driver.wait(toastShown('Please read our privacy policy.'), timeouts.ui);
-
-  await pageObjects.runHook('useSetNotification', [], setNotification =>
-    setNotification({
-      id: 'privacypolicy',
-      level: 'info',
-      message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy) again.'
-    })
-  );
-
-  await driver.wait(toastShown(1), timeouts.ui);
-  await driver.wait(toastShown('Please read our privacy policy again.'), timeouts.ui);
-});
diff --git a/__tests__/html2/hooks/2/useSetNotification.html b/__tests__/html2/hooks/2/useSetNotification.html
new file mode 100644
index 0000000000..373db1e772
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSetNotification.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSetNotification } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        const setNotification = await renderHook(() => useSetNotification());
+
+        setNotification({
+          id: 'privacypolicy',
+          level: 'info',
+          message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy).'
+        });
+
+        await pageConditions.toastShown(1);
+        await pageConditions.toastShown('Please read our privacy policy.');
+
+        setNotification({
+          id: 'privacypolicy',
+          level: 'info',
+          message: 'Please read our [privacy policy](https://microsoft.com/privacypolicy) again.'
+        });
+
+        await pageConditions.toastShown(1);
+        await pageConditions.toastShown('Please read our privacy policy again.');
+      });
+    </script>
+  </body>
+</html>

From 7dc01911dbb7d53e6af8d12717fc17d0d3b64bc0 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:02:09 +0000
Subject: [PATCH 36/56] Migrate useShouldSpeakIncomingActivity

---
 .../hooks/useShouldSpeakIncomingActivity.js   | 28 --------
 .../useShouldSpeakIncomingActivity.false.html | 60 ++++++++++++++++
 .../useShouldSpeakIncomingActivity.true.html  | 69 +++++++++++++++++++
 3 files changed, 129 insertions(+), 28 deletions(-)
 delete mode 100644 __tests__/hooks/useShouldSpeakIncomingActivity.js
 create mode 100644 __tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html
 create mode 100644 __tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html

diff --git a/__tests__/hooks/useShouldSpeakIncomingActivity.js b/__tests__/hooks/useShouldSpeakIncomingActivity.js
deleted file mode 100644
index 500013724e..0000000000
--- a/__tests__/hooks/useShouldSpeakIncomingActivity.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should get falsy if last outgoing message is not from microphone', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('Hello, World!');
-
-  await expect(pageObjects.runHook('useShouldSpeakIncomingActivity', [], result => result[0])).resolves.toBeFalsy();
-});
-
-test('getter should get truthy if last outgoing message is from microphone', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: { webSpeechPonyfillFactory: () => window.WebSpeechMock }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaMicrophone('Hello, World!');
-
-  await expect(pageObjects.runHook('useShouldSpeakIncomingActivity', [], result => result[0])).resolves.toBeTruthy();
-});
diff --git a/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html b/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html
new file mode 100644
index 0000000000..68837f28db
--- /dev/null
+++ b/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useShouldSpeakIncomingActivity } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine, store },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        const { resolveAll } = await directLine.actPostActivity(() =>
+          pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: false })
+        );
+
+        await resolveAll();
+
+        await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+
+        await pageConditions.numActivitiesShown(2);
+
+        const [shouldSpeakIncomingActivity] = await renderHook(() => useShouldSpeakIncomingActivity());
+
+        expect(shouldSpeakIncomingActivity).toBe(false);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html b/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html
new file mode 100644
index 0000000000..929ef60210
--- /dev/null
+++ b/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useShouldSpeakIncomingActivity } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { createWebSpeechPonyfill, sendMessageViaMicrophone } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        const { resolveAll } = await directLine.actPostActivity(() =>
+          sendMessageViaMicrophone(ponyfill, 'Hello, World!')
+        );
+
+        await resolveAll();
+
+        await directLine.emulateIncomingActivity('Unknown command: `Hello, World!`.\n\nType `help` to learn more.');
+
+        await pageConditions.numActivitiesShown(2);
+
+        const [shouldSpeakIncomingActivity] = await renderHook(() => useShouldSpeakIncomingActivity());
+
+        expect(shouldSpeakIncomingActivity).toBe(true);
+      });
+    </script>
+  </body>
+</html>

From ed9cc1381b340828ffd68bb86079c40ada6158f4 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:05:35 +0000
Subject: [PATCH 37/56] Migrate useStartDictate

---
 __tests__/hooks/useStartDictate.js           | 27 -------
 __tests__/html2/hooks/2/useStartDictate.html | 83 ++++++++++++++++++++
 2 files changed, 83 insertions(+), 27 deletions(-)
 delete mode 100644 __tests__/hooks/useStartDictate.js
 create mode 100644 __tests__/html2/hooks/2/useStartDictate.html

diff --git a/__tests__/hooks/useStartDictate.js b/__tests__/hooks/useStartDictate.js
deleted file mode 100644
index 8fb4eca99e..0000000000
--- a/__tests__/hooks/useStartDictate.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling startDictate should start dictate', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.runHook('useStartDictate', [], startDictate => startDictate());
-
-  // The engine is starting, but not fully started yet.
-  await expect(pageObjects.isDictating()).resolves.toBeFalsy();
-
-  await pageObjects.putSpeechRecognitionResult('recognizing', 'Hello, World!');
-
-  // The engine has started, and recognition is ongoing and is not stopping.
-  await expect(pageObjects.isDictating()).resolves.toBeTruthy();
-});
diff --git a/__tests__/html2/hooks/2/useStartDictate.html b/__tests__/html2/hooks/2/useStartDictate.html
new file mode 100644
index 0000000000..31b848e282
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStartDictate.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStartDictate } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        const startDictate = await renderHook(() => useStartDictate());
+
+        await pageConditions.uiConnected();
+
+        const microphoneButtonComponent = document.querySelector(
+          `[data-testid="${testIds.sendBoxMicrophoneButton}"]`
+        )?.parentElement;
+
+        actRecognizeOnce(
+          ponyfill,
+          async () => {
+            startDictate();
+
+            await waitFor(() =>
+              expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(false)
+            );
+          },
+          dispatcher => {
+            dispatcher.start();
+            dispatcher.audioStart();
+            dispatcher.soundStart();
+            dispatcher.speechStart();
+            dispatcher.result('Hello, World!');
+          }
+        );
+
+        await waitFor(() =>
+          expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(true)
+        );
+      });
+    </script>
+  </body>
+</html>

From 006add2afe6f982f669eec92740fe654e6c50d99 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:06:58 +0000
Subject: [PATCH 38/56] Migrate useStopDictate

---
 __tests__/hooks/useStopDictate.js           | 30 --------
 __tests__/html2/hooks/2/useStopDictate.html | 85 +++++++++++++++++++++
 2 files changed, 85 insertions(+), 30 deletions(-)
 delete mode 100644 __tests__/hooks/useStopDictate.js
 create mode 100644 __tests__/html2/hooks/2/useStopDictate.html

diff --git a/__tests__/hooks/useStopDictate.js b/__tests__/hooks/useStopDictate.js
deleted file mode 100644
index ff83aa937a..0000000000
--- a/__tests__/hooks/useStopDictate.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import isDictating from '../setup/pageObjects/isDictating';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling stopDictate should stop dictate', async () => {
-  const { driver, pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.clickMicrophoneButton();
-  await pageObjects.putSpeechRecognitionResult('recognizing', 'Hello');
-
-  await driver.wait(driver => isDictating(driver), timeouts.ui);
-
-  await expect(pageObjects.isDictating()).resolves.toBeTruthy();
-
-  await pageObjects.runHook('useStopDictate', [], stopDictate => stopDictate());
-
-  await expect(pageObjects.isDictating()).resolves.toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useStopDictate.html b/__tests__/html2/hooks/2/useStopDictate.html
new file mode 100644
index 0000000000..518aeb3ee1
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStopDictate.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStopDictate } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          {
+            directLine,
+            store,
+            webSpeechPonyfillFactory: () => ponyfill
+          },
+          { renderWebChat: true }
+        );
+
+        const stopDictate = await renderHook(() => useStopDictate());
+
+        await pageConditions.uiConnected();
+
+        actRecognizeOnce(
+          ponyfill,
+          async () => {
+            await host.click(document.querySelector(`[data-testid="${testIds.sendBoxMicrophoneButton}"]`));
+          },
+          dispatcher => {
+            dispatcher.start();
+            dispatcher.audioStart();
+            dispatcher.soundStart();
+            dispatcher.speechStart();
+            dispatcher.result('Hello');
+          }
+        );
+
+        const microphoneButtonComponent = document.querySelector(
+          `[data-testid="${testIds.sendBoxMicrophoneButton}"]`
+        )?.parentElement;
+
+        await waitFor(() =>
+          expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(true)
+        );
+
+        stopDictate();
+
+        await waitFor(() =>
+          expect(microphoneButtonComponent.classList.contains('webchat__microphone-button--dictating')).toBe(false)
+        );
+      });
+    </script>
+  </body>
+</html>

From b282c121de5cb962244d73f8ae37126475e386d7 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:09:58 +0000
Subject: [PATCH 39/56] Migrate useStyleOptions

---
 __tests__/hooks/useStyleOptions.js            | 22 ---------
 .../html2/hooks/2/useStyleOptions.getter.html | 46 +++++++++++++++++++
 .../html2/hooks/2/useStyleOptions.setter.html | 42 +++++++++++++++++
 3 files changed, 88 insertions(+), 22 deletions(-)
 delete mode 100644 __tests__/hooks/useStyleOptions.js
 create mode 100644 __tests__/html2/hooks/2/useStyleOptions.getter.html
 create mode 100644 __tests__/html2/hooks/2/useStyleOptions.setter.html

diff --git a/__tests__/hooks/useStyleOptions.js b/__tests__/hooks/useStyleOptions.js
deleted file mode 100644
index 9b49309070..0000000000
--- a/__tests__/hooks/useStyleOptions.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should get styleOptions from props', async () => {
-  const { pageObjects } = await setupWebDriver({ props: { styleOptions: { backgroundColor: 'Red' } } });
-
-  await expect(pageObjects.runHook('useStyleOptions', [], result => result[0])).resolves.toHaveProperty(
-    'backgroundColor',
-    'Red'
-  );
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setStyleOptions] = await pageObjects.runHook('useStyleOptions');
-
-  expect(setStyleOptions).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useStyleOptions.getter.html b/__tests__/html2/hooks/2/useStyleOptions.getter.html
new file mode 100644
index 0000000000..5713a76db1
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStyleOptions.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStyleOptions } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: { backgroundColor: 'Red' }
+        });
+
+        const [styleOptions] = await renderHook(() => useStyleOptions());
+
+        expect(styleOptions).toHaveProperty('backgroundColor', 'Red');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useStyleOptions.setter.html b/__tests__/html2/hooks/2/useStyleOptions.setter.html
new file mode 100644
index 0000000000..715840fa1d
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStyleOptions.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStyleOptions } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const styleOptionsState = await renderHook(() => useStyleOptions());
+
+        expect(styleOptionsState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From f812465a3bba7d91ff6cac2684ab066484aebdd4 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:12:10 +0000
Subject: [PATCH 40/56] Migrate useStyleSet

---
 __tests__/hooks/useStyleSet.js                | 24 ----------
 .../html2/hooks/2/useStyleSet.getter.html     | 47 +++++++++++++++++++
 .../html2/hooks/2/useStyleSet.setter.html     | 46 ++++++++++++++++++
 3 files changed, 93 insertions(+), 24 deletions(-)
 delete mode 100644 __tests__/hooks/useStyleSet.js
 create mode 100644 __tests__/html2/hooks/2/useStyleSet.getter.html
 create mode 100644 __tests__/html2/hooks/2/useStyleSet.setter.html

diff --git a/__tests__/hooks/useStyleSet.js b/__tests__/hooks/useStyleSet.js
deleted file mode 100644
index 0b7a661c81..0000000000
--- a/__tests__/hooks/useStyleSet.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should get styleSet from props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: { styleSet: { options: {}, root: { backgroundColor: 'Red' } } }
-  });
-
-  const styleSet = await pageObjects.runHook('useStyleSet', [], result => result[0]);
-
-  expect(styleSet).toHaveProperty('options', {});
-  expect(styleSet).toHaveProperty('root', expect.stringMatching(/^webchat--css-\w{5}-1v40psm$/u));
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setStyleSet] = await pageObjects.runHook('useStyleSet');
-
-  expect(setStyleSet).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useStyleSet.getter.html b/__tests__/html2/hooks/2/useStyleSet.getter.html
new file mode 100644
index 0000000000..b537afeb60
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStyleSet.getter.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStyleSet } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleSet: { options: {}, root: { backgroundColor: 'Red' } }
+        });
+
+        const [styleSet] = await renderHook(() => useStyleSet());
+
+        expect(styleSet).toHaveProperty('options', {});
+        expect(styleSet).toHaveProperty('root', expect.stringMatching(/^webchat--css-\w{5}-1v40psm$/u));
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useStyleSet.setter.html b/__tests__/html2/hooks/2/useStyleSet.setter.html
new file mode 100644
index 0000000000..68ba34f31e
--- /dev/null
+++ b/__tests__/html2/hooks/2/useStyleSet.setter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useStyleSet } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleSet: { options: {}, root: { backgroundColor: 'Red' } }
+        });
+
+        const styleSetState = await renderHook(() => useStyleSet());
+
+        expect(styleSetState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From adcf1d75af328813c82d6c4d117a6b7495da1821 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:14:10 +0000
Subject: [PATCH 41/56] Migrate useSubmitSendBox

---
 __tests__/hooks/useSubmitSendBox.js           |  24 --------
 __tests__/html2/hooks/2/useSubmitSendBox.html |  56 ++++++++++++++++++
 .../hooks/2/useSubmitSendBox.html.snap-1.png} | Bin
 3 files changed, 56 insertions(+), 24 deletions(-)
 delete mode 100644 __tests__/hooks/useSubmitSendBox.js
 create mode 100644 __tests__/html2/hooks/2/useSubmitSendBox.html
 rename __tests__/{__image_snapshots__/chrome-docker/use-submit-send-box-js-calling-submit-send-box-should-send-the-message-in-send-box-1-snap.png => html2/hooks/2/useSubmitSendBox.html.snap-1.png} (100%)

diff --git a/__tests__/hooks/useSubmitSendBox.js b/__tests__/hooks/useSubmitSendBox.js
deleted file mode 100644
index ef11a95136..0000000000
--- a/__tests__/hooks/useSubmitSendBox.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { imageSnapshotOptions, timeouts } from '../constants.json';
-
-import minNumActivitiesShown from '../setup/conditions/minNumActivitiesShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling submitSendBox should send the message in send box', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.typeInSendBox('Hello, World!');
-  await pageObjects.runHook('useSubmitSendBox', [], submitSendBox => submitSendBox());
-
-  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
diff --git a/__tests__/html2/hooks/2/useSubmitSendBox.html b/__tests__/html2/hooks/2/useSubmitSendBox.html
new file mode 100644
index 0000000000..b150b3f1d4
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSubmitSendBox.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSubmitSendBox } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
+          { renderWebChat: true }
+        );
+
+        const submitSendBox = await renderHook(() => useSubmitSendBox());
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.typeInSendBox('Hello, World!');
+
+        submitSendBox();
+
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-submit-send-box-js-calling-submit-send-box-should-send-the-message-in-send-box-1-snap.png b/__tests__/html2/hooks/2/useSubmitSendBox.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-submit-send-box-js-calling-submit-send-box-should-send-the-message-in-send-box-1-snap.png
rename to __tests__/html2/hooks/2/useSubmitSendBox.html.snap-1.png

From c410f1ec3f725aa747cd35823c87e75034387e83 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:17:33 +0000
Subject: [PATCH 42/56] Migrate useSuggestedActions

---
 __tests__/hooks/useSuggestedActions.js        |  70 -----------
 .../html2/hooks/2/useSuggestedActions.html    | 110 ++++++++++++++++++
 2 files changed, 110 insertions(+), 70 deletions(-)
 delete mode 100644 __tests__/hooks/useSuggestedActions.js
 create mode 100644 __tests__/html2/hooks/2/useSuggestedActions.html

diff --git a/__tests__/hooks/useSuggestedActions.js b/__tests__/hooks/useSuggestedActions.js
deleted file mode 100644
index 188ffb6ac3..0000000000
--- a/__tests__/hooks/useSuggestedActions.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import suggestedActionsShown from '../setup/conditions/suggestedActionsShown';
-import uiConnected from '../setup/conditions/uiConnected';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should get suggested actions', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-
-  await pageObjects.sendMessageViaSendBox('suggested-actions');
-  await driver.wait(suggestedActionsShown(), timeouts.directLine);
-
-  await expect(pageObjects.runHook('useSuggestedActions', [], result => result[0])).resolves.toMatchInlineSnapshot(`
-          [
-            {
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon.png",
-              "title": "IM back as string",
-              "type": "imBack",
-              "value": "postback imback-string",
-            },
-            {
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon-red.png",
-              "title": "Post back as string",
-              "type": "postBack",
-              "value": "postback postback-string",
-            },
-            {
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon-green.png",
-              "text": "Some text",
-              "title": "Post back as JSON",
-              "type": "postBack",
-              "value": {
-                "hello": "World!",
-              },
-            },
-            {
-              "displayText": "say Hello World!",
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
-              "text": "Some text",
-              "title": "Message back as JSON with display text",
-              "type": "messageBack",
-              "value": {
-                "hello": "World!",
-              },
-            },
-            {
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
-              "title": "Message back as JSON without display text",
-              "type": "messageBack",
-              "value": {
-                "hello": "World!",
-              },
-            },
-            {
-              "displayText": "Aloha",
-              "image": "https://corinagum.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png",
-              "text": "echo Hello",
-              "title": "Message back as string with display text",
-              "type": "messageBack",
-              "value": null,
-            },
-          ]
-        `);
-});
diff --git a/__tests__/html2/hooks/2/useSuggestedActions.html b/__tests__/html2/hooks/2/useSuggestedActions.html
new file mode 100644
index 0000000000..afd3cdfa39
--- /dev/null
+++ b/__tests__/html2/hooks/2/useSuggestedActions.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useSuggestedActions } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const {
+        createStore,
+        token: { fetchDirectLineToken }
+      } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const renderHook = createRenderHook(
+          document.getElementById('webchat'),
+          { directLine: createDirectLine({ token: await fetchDirectLineToken() }), store: createStore() },
+          { renderWebChat: true }
+        );
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.sendMessageViaSendBox('suggested-actions');
+
+        await pageConditions.numActivitiesShown(2);
+        await pageConditions.suggestedActionsShown();
+
+        const [suggestedActions] = await renderHook(() => useSuggestedActions());
+
+        expect(suggestedActions).toEqual([
+          {
+            type: 'imBack',
+            title: 'IM back as string',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-U3PTSB2G.png',
+            imageAltText: 'a blue square',
+            value: 'postback imback-string'
+          },
+          {
+            type: 'postBack',
+            title: 'Post back as string',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-red-NTYZI5EO.png',
+            imageAltText: 'a red square',
+            value: 'postback postback-string'
+          },
+          {
+            type: 'postBack',
+            title: 'Post back as JSON',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-green-FUFF53XL.png',
+            imageAltText: 'a green square',
+            text: 'Some text',
+            value: {
+              hello: 'World!'
+            }
+          },
+          {
+            type: 'messageBack',
+            title: 'Message back as JSON with display text',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-purple-G7EQE7UG.png',
+            imageAltText: 'a purple square',
+            text: 'Some text',
+            displayText: 'say Hello World!',
+            value: {
+              hello: 'World!'
+            }
+          },
+          {
+            type: 'messageBack',
+            title: 'Message back as JSON without display text',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-purple-G7EQE7UG.png',
+            imageAltText: 'a purple square',
+            value: {
+              hello: 'World!'
+            }
+          },
+          {
+            type: 'messageBack',
+            title: 'Message back as string with display text',
+            image: 'https://hawo-mockbot4-mock-bot-app.azurewebsites.net/assets/square-icon-purple-G7EQE7UG.png',
+            imageAltText: 'a purple square',
+            text: 'echo Hello',
+            displayText: 'Aloha'
+          }
+        ]);
+      });
+    </script>
+  </body>
+</html>

From c5947c65c8380d1b32422afbede9837cb24c55c9 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:19:28 +0000
Subject: [PATCH 43/56] Migrate useTextBoxValue

---
 __tests__/hooks/useTextBoxValue.js           | 18 -------
 __tests__/html2/hooks/2/useTextBoxValue.html | 50 ++++++++++++++++++++
 2 files changed, 50 insertions(+), 18 deletions(-)
 delete mode 100644 __tests__/hooks/useTextBoxValue.js
 create mode 100644 __tests__/html2/hooks/2/useTextBoxValue.html

diff --git a/__tests__/hooks/useTextBoxValue.js b/__tests__/hooks/useTextBoxValue.js
deleted file mode 100644
index f05c7bcaac..0000000000
--- a/__tests__/hooks/useTextBoxValue.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter/setter should get/set value', async () => {
-  const { pageObjects } = await setupWebDriver({ props: { styleOptions: { emojiSet: true } } });
-
-  await pageObjects.runHook('useTextBoxValue', [], getterSetter => getterSetter[1]('Hello, World!'));
-
-  await expect(pageObjects.runHook('useTextBoxValue', [], getterSetter => getterSetter[0])).resolves.toBe(
-    'Hello, World!'
-  );
-});
-
-// TODO: Add test to make sure dictation is stopped.
diff --git a/__tests__/html2/hooks/2/useTextBoxValue.html b/__tests__/html2/hooks/2/useTextBoxValue.html
new file mode 100644
index 0000000000..b0a69b981d
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTextBoxValue.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTextBoxValue } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: { emojiSet: true }
+        });
+
+        const [_, setTextBoxValue] = await renderHook(() => useTextBoxValue());
+
+        setTextBoxValue('Hello, World!');
+
+        const [textBoxValue] = await renderHook(() => useTextBoxValue());
+
+        expect(textBoxValue).toBe('Hello, World!');
+      });
+    </script>
+  </body>
+</html>

From 695056cbd9d8877b0e749c5c5f5a7dba1cc05682 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:21:39 +0000
Subject: [PATCH 44/56] Migrate useTimeoutForSend

---
 __tests__/hooks/useTimeoutForSend.js          | 34 -------------
 .../hooks/2/useTimeoutForSend.default.html    | 42 ++++++++++++++++
 .../hooks/2/useTimeoutForSend.getter.html     | 48 +++++++++++++++++++
 .../hooks/2/useTimeoutForSend.setter.html     | 42 ++++++++++++++++
 4 files changed, 132 insertions(+), 34 deletions(-)
 delete mode 100644 __tests__/hooks/useTimeoutForSend.js
 create mode 100644 __tests__/html2/hooks/2/useTimeoutForSend.default.html
 create mode 100644 __tests__/html2/hooks/2/useTimeoutForSend.getter.html
 create mode 100644 __tests__/html2/hooks/2/useTimeoutForSend.setter.html

diff --git a/__tests__/hooks/useTimeoutForSend.js b/__tests__/hooks/useTimeoutForSend.js
deleted file mode 100644
index a9948405f8..0000000000
--- a/__tests__/hooks/useTimeoutForSend.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return timeout for sending activity', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      styleOptions: {
-        sendTimeout: 1000
-      }
-    }
-  });
-
-  const [timeoutForSend] = await pageObjects.runHook('useTimeoutForSend');
-
-  expect(timeoutForSend).toMatchInlineSnapshot(`1000`);
-});
-
-test('getter should return default timeout for sending activity', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [timeoutForSend] = await pageObjects.runHook('useTimeoutForSend');
-
-  expect(timeoutForSend).toMatchInlineSnapshot(`20000`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setTimeoutForSend] = await pageObjects.runHook('useTimeoutForSend');
-
-  expect(setTimeoutForSend).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.default.html b/__tests__/html2/hooks/2/useTimeoutForSend.default.html
new file mode 100644
index 0000000000..270c3fffe0
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTimeoutForSend.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTimeoutForSend } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [timeoutForSend] = await renderHook(() => useTimeoutForSend());
+
+        expect(timeoutForSend).toBe(20_000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.getter.html b/__tests__/html2/hooks/2/useTimeoutForSend.getter.html
new file mode 100644
index 0000000000..4cb25241f1
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTimeoutForSend.getter.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTimeoutForSend } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          styleOptions: {
+            sendTimeout: 1_000
+          }
+        });
+
+        const [timeoutForSend] = await renderHook(() => useTimeoutForSend());
+
+        expect(timeoutForSend).toBe(1_000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.setter.html b/__tests__/html2/hooks/2/useTimeoutForSend.setter.html
new file mode 100644
index 0000000000..b691a2d685
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTimeoutForSend.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTimeoutForSend } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const timeoutForSendState = await renderHook(() => useTimeoutForSend());
+
+        expect(timeoutForSendState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 24c54ed11973fdf13b6b89c7206ba091b9795cfc Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:30:48 +0000
Subject: [PATCH 45/56] Migrate useTrackDimension

---
 __tests__/hooks/useTrackDimension.js          | 140 ------------------
 .../html2/hooks/2/useTrackDimension.html      |  84 +++++++++++
 ...seTrackDimension.invalidDimensionName.html |  63 ++++++++
 ...eTrackDimension.invalidDimensionValue.html |  63 ++++++++
 4 files changed, 210 insertions(+), 140 deletions(-)
 delete mode 100644 __tests__/hooks/useTrackDimension.js
 create mode 100644 __tests__/html2/hooks/2/useTrackDimension.html
 create mode 100644 __tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html
 create mode 100644 __tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html

diff --git a/__tests__/hooks/useTrackDimension.js b/__tests__/hooks/useTrackDimension.js
deleted file mode 100644
index 2498c63dea..0000000000
--- a/__tests__/hooks/useTrackDimension.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-jest.setTimeout(timeouts.test);
-
-describe('useTrackDimension', () => {
-  let driver;
-  let pageObjects;
-
-  beforeEach(async () => {
-    const setup = await setupWebDriver({
-      props: {
-        onTelemetry: event => {
-          const { data, dimensions, duration, error, name, type } = event;
-
-          name !== 'init' &&
-            window.WebChatTest.telemetryMeasurements.push({
-              data,
-              dimensions,
-              duration,
-              error,
-              name,
-              type
-            });
-        }
-      },
-      setup: () => {
-        window.WebChatTest.telemetryMeasurements = [];
-      }
-    });
-
-    driver = setup.driver;
-    pageObjects = setup.pageObjects;
-
-    await driver.wait(uiConnected(), timeouts.directLine);
-  });
-
-  test('should track string dimension', async () => {
-    await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello', 'aloha'));
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping').length)
-    ).resolves.toBe(1);
-
-    await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello'));
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping2'));
-
-    await expect(
-      driver.executeScript(() =>
-        window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping' || name === 'ping2')
-      )
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "hello": "aloha",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "name": "ping",
-          "type": "event",
-        },
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "name": "ping2",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should not track invalid dimension name', async () => {
-    await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension(123, 'hello'));
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "name": "ping",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should not track invalid dimension value', async () => {
-    await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello', 123));
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "name": "ping",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-});
diff --git a/__tests__/html2/hooks/2/useTrackDimension.html b/__tests__/html2/hooks/2/useTrackDimension.html
new file mode 100644
index 0000000000..746b7380b0
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackDimension.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        (await renderHook(() => useTrackDimension()))('hello', 'aloha');
+        (await renderHook(() => useTrackEvent()))('ping');
+
+        expect(onTelemetry).toHaveBeenCalledWith(expect.objectContaining({ name: 'ping' }));
+
+        (await renderHook(() => useTrackDimension()))('hello');
+        (await renderHook(() => useTrackEvent()))('ping2');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              hello: 'aloha',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            name: 'ping',
+            type: 'event'
+          })
+        );
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            name: 'ping2',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html b/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html
new file mode 100644
index 0000000000..cc63966724
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        (await renderHook(() => useTrackDimension()))(123, 'aloha');
+        (await renderHook(() => useTrackEvent()))('ping');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            name: 'ping',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html b/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html
new file mode 100644
index 0000000000..1f7b724159
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        (await renderHook(() => useTrackDimension()))('hello', 123);
+        (await renderHook(() => useTrackEvent()))('ping');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            name: 'ping',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>

From 3b9e8544b87132709478889f4f75ee2d463295f6 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:37:27 +0000
Subject: [PATCH 46/56] Migrate useTrackEvent

---
 __tests__/hooks/useTrackEvent.js              | 196 ------------------
 .../html2/hooks/2/useTrackEvent.debug.html    |  67 ++++++
 .../hooks/2/useTrackEvent.error.complex.html  |  70 +++++++
 __tests__/html2/hooks/2/useTrackEvent.html    |  67 ++++++
 .../html2/hooks/2/useTrackEvent.info.html     |  67 ++++++
 .../2/useTrackEvent.invalid.booleanData.html  |  53 +++++
 .../2/useTrackEvent.invalid.complex.html      |  53 +++++
 .../hooks/2/useTrackEvent.invalid.name.html   |  53 +++++
 .../hooks/2/useTrackEvent.warn.numeric.html   |  67 ++++++
 9 files changed, 497 insertions(+), 196 deletions(-)
 delete mode 100644 __tests__/hooks/useTrackEvent.js
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.debug.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.error.complex.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.info.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.invalid.complex.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.invalid.name.html
 create mode 100644 __tests__/html2/hooks/2/useTrackEvent.warn.numeric.html

diff --git a/__tests__/hooks/useTrackEvent.js b/__tests__/hooks/useTrackEvent.js
deleted file mode 100644
index ad41fcaec7..0000000000
--- a/__tests__/hooks/useTrackEvent.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-jest.setTimeout(timeouts.test);
-
-describe('useTrackEvent', () => {
-  let driver;
-  let pageObjects;
-
-  beforeEach(async () => {
-    const setup = await setupWebDriver({
-      props: {
-        onTelemetry: event => {
-          const { data, dimensions, duration, error, level, name, type } = event;
-
-          name !== 'init' &&
-            window.WebChatTest.telemetryMeasurements.push({
-              data,
-              dimensions,
-              duration,
-              error,
-              level,
-              name,
-              type
-            });
-        }
-      },
-      setup: () => {
-        window.WebChatTest.telemetryMeasurements = [];
-      }
-    });
-
-    driver = setup.driver;
-    pageObjects = setup.pageObjects;
-
-    await driver.wait(uiConnected(), timeouts.directLine);
-  });
-
-  test('should track simple event', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "level": "info",
-          "name": "hello",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should track simple event using info explicitly', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.info('hello'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "level": "info",
-          "name": "hello",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should track numeric event', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.warn('hello', 123));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": 123,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "level": "warn",
-          "name": "hello",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should track numeric event', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.debug('hello', 'aloha'));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": "aloha",
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "level": "debug",
-          "name": "hello",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should track complex event', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.error('hello', { one: 1, hello: 'aloha' }));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": {
-            "hello": "aloha",
-            "one": 1,
-          },
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": null,
-          "level": "error",
-          "name": "hello",
-          "type": "event",
-        },
-      ]
-    `);
-  });
-
-  test('should not track event with boolean data', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello', true));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toHaveLength(0);
-  });
-
-  test('should not track event with incompatible complex data', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello', { truthy: true }));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toHaveLength(0);
-  });
-
-  test('should not track event with invalid name', async () => {
-    await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent(123));
-
-    await expect(
-      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
-    ).resolves.toHaveLength(0);
-  });
-});
diff --git a/__tests__/html2/hooks/2/useTrackEvent.debug.html b/__tests__/html2/hooks/2/useTrackEvent.debug.html
new file mode 100644
index 0000000000..3b26a8c748
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.debug.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent())).debug('hello', 'aloha');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: 'aloha',
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            level: 'debug',
+            name: 'hello',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.error.complex.html b/__tests__/html2/hooks/2/useTrackEvent.error.complex.html
new file mode 100644
index 0000000000..8e0190e385
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.error.complex.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent())).error('hello', { one: 1, hello: 'aloha' });
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: {
+              hello: 'aloha',
+              one: 1
+            },
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            level: 'error',
+            name: 'hello',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.html b/__tests__/html2/hooks/2/useTrackEvent.html
new file mode 100644
index 0000000000..16b7891ad3
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent()))('hello');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            level: 'info',
+            name: 'hello',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.info.html b/__tests__/html2/hooks/2/useTrackEvent.info.html
new file mode 100644
index 0000000000..cb07d704ec
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.info.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent())).info('hello');
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: undefined,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            level: 'info',
+            name: 'hello',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html b/__tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html
new file mode 100644
index 0000000000..be9fa1ddc2
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent()))('hello', true);
+
+        expect(onTelemetry).not.toHaveBeenCalledWith(expect.objectContaining({ name: 'hello' }));
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.complex.html b/__tests__/html2/hooks/2/useTrackEvent.invalid.complex.html
new file mode 100644
index 0000000000..9c2284906b
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.invalid.complex.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent()))('hello', { truthy: true });
+
+        expect(onTelemetry).not.toHaveBeenCalledWith(expect.objectContaining({ name: 'hello' }));
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.name.html b/__tests__/html2/hooks/2/useTrackEvent.invalid.name.html
new file mode 100644
index 0000000000..4b1f8da645
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.invalid.name.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent()))(123);
+
+        expect(onTelemetry).not.toHaveBeenCalledWith(expect.objectContaining({ name: 123 }));
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackEvent.warn.numeric.html b/__tests__/html2/hooks/2/useTrackEvent.warn.numeric.html
new file mode 100644
index 0000000000..fb470eba71
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackEvent.warn.numeric.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackEvent } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        (await renderHook(() => useTrackEvent())).warn('hello', 123);
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            data: 123,
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            level: 'warn',
+            name: 'hello',
+            type: 'event'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>

From 597c28bca40bcaa1d7f252b2305475cc7f495fa2 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:37:43 +0000
Subject: [PATCH 47/56] Move tests

---
 __tests__/html2/hooks/{2 => }/useSendMessage.html   |   0
 .../hooks/{2 => }/useSendMessage.html.snap-1.png    | Bin
 .../html2/hooks/{2 => }/useSendMessageBack.html     |   0
 .../{2 => }/useSendMessageBack.html.snap-1.png      | Bin
 __tests__/html2/hooks/{2 => }/useSendPostBack.html  |   0
 .../hooks/{2 => }/useSendPostBack.html.snap-1.png   | Bin
 .../html2/hooks/{2 => }/useSetNotification.html     |   0
 .../useShouldSpeakIncomingActivity.false.html       |   0
 .../useShouldSpeakIncomingActivity.true.html        |   0
 __tests__/html2/hooks/{2 => }/useStartDictate.html  |   0
 __tests__/html2/hooks/{2 => }/useStopDictate.html   |   0
 .../html2/hooks/{2 => }/useStyleOptions.getter.html |   0
 .../html2/hooks/{2 => }/useStyleOptions.setter.html |   0
 .../html2/hooks/{2 => }/useStyleSet.getter.html     |   0
 .../html2/hooks/{2 => }/useStyleSet.setter.html     |   0
 __tests__/html2/hooks/{2 => }/useSubmitSendBox.html |   0
 .../hooks/{2 => }/useSubmitSendBox.html.snap-1.png  | Bin
 .../html2/hooks/{2 => }/useSuggestedActions.html    |   0
 __tests__/html2/hooks/{2 => }/useTextBoxValue.html  |   0
 .../hooks/{2 => }/useTimeoutForSend.default.html    |   0
 .../hooks/{2 => }/useTimeoutForSend.getter.html     |   0
 .../hooks/{2 => }/useTimeoutForSend.setter.html     |   0
 .../html2/hooks/{2 => }/useTrackDimension.html      |   0
 .../useTrackDimension.invalidDimensionName.html     |   0
 .../useTrackDimension.invalidDimensionValue.html    |   0
 .../html2/hooks/{2 => }/useTrackEvent.debug.html    |   0
 .../hooks/{2 => }/useTrackEvent.error.complex.html  |   0
 __tests__/html2/hooks/{2 => }/useTrackEvent.html    |   0
 .../html2/hooks/{2 => }/useTrackEvent.info.html     |   0
 .../{2 => }/useTrackEvent.invalid.booleanData.html  |   0
 .../{2 => }/useTrackEvent.invalid.complex.html      |   0
 .../hooks/{2 => }/useTrackEvent.invalid.name.html   |   0
 .../hooks/{2 => }/useTrackEvent.warn.numeric.html   |   0
 33 files changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/{2 => }/useSendMessage.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendMessage.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/useSendMessageBack.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendMessageBack.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/useSendPostBack.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSendPostBack.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/useSetNotification.html (100%)
 rename __tests__/html2/hooks/{2 => }/useShouldSpeakIncomingActivity.false.html (100%)
 rename __tests__/html2/hooks/{2 => }/useShouldSpeakIncomingActivity.true.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStartDictate.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStopDictate.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStyleOptions.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStyleOptions.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStyleSet.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useStyleSet.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSubmitSendBox.html (100%)
 rename __tests__/html2/hooks/{2 => }/useSubmitSendBox.html.snap-1.png (100%)
 rename __tests__/html2/hooks/{2 => }/useSuggestedActions.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTextBoxValue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTimeoutForSend.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTimeoutForSend.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTimeoutForSend.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackDimension.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackDimension.invalidDimensionName.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackDimension.invalidDimensionValue.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.debug.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.error.complex.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.info.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.invalid.booleanData.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.invalid.complex.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.invalid.name.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackEvent.warn.numeric.html (100%)

diff --git a/__tests__/html2/hooks/2/useSendMessage.html b/__tests__/html2/hooks/useSendMessage.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendMessage.html
rename to __tests__/html2/hooks/useSendMessage.html
diff --git a/__tests__/html2/hooks/2/useSendMessage.html.snap-1.png b/__tests__/html2/hooks/useSendMessage.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/useSendMessage.html.snap-1.png
rename to __tests__/html2/hooks/useSendMessage.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/useSendMessageBack.html b/__tests__/html2/hooks/useSendMessageBack.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendMessageBack.html
rename to __tests__/html2/hooks/useSendMessageBack.html
diff --git a/__tests__/html2/hooks/2/useSendMessageBack.html.snap-1.png b/__tests__/html2/hooks/useSendMessageBack.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/useSendMessageBack.html.snap-1.png
rename to __tests__/html2/hooks/useSendMessageBack.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/useSendPostBack.html b/__tests__/html2/hooks/useSendPostBack.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSendPostBack.html
rename to __tests__/html2/hooks/useSendPostBack.html
diff --git a/__tests__/html2/hooks/2/useSendPostBack.html.snap-1.png b/__tests__/html2/hooks/useSendPostBack.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/useSendPostBack.html.snap-1.png
rename to __tests__/html2/hooks/useSendPostBack.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/useSetNotification.html b/__tests__/html2/hooks/useSetNotification.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSetNotification.html
rename to __tests__/html2/hooks/useSetNotification.html
diff --git a/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html b/__tests__/html2/hooks/useShouldSpeakIncomingActivity.false.html
similarity index 100%
rename from __tests__/html2/hooks/2/useShouldSpeakIncomingActivity.false.html
rename to __tests__/html2/hooks/useShouldSpeakIncomingActivity.false.html
diff --git a/__tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html b/__tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html
similarity index 100%
rename from __tests__/html2/hooks/2/useShouldSpeakIncomingActivity.true.html
rename to __tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html
diff --git a/__tests__/html2/hooks/2/useStartDictate.html b/__tests__/html2/hooks/useStartDictate.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStartDictate.html
rename to __tests__/html2/hooks/useStartDictate.html
diff --git a/__tests__/html2/hooks/2/useStopDictate.html b/__tests__/html2/hooks/useStopDictate.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStopDictate.html
rename to __tests__/html2/hooks/useStopDictate.html
diff --git a/__tests__/html2/hooks/2/useStyleOptions.getter.html b/__tests__/html2/hooks/useStyleOptions.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStyleOptions.getter.html
rename to __tests__/html2/hooks/useStyleOptions.getter.html
diff --git a/__tests__/html2/hooks/2/useStyleOptions.setter.html b/__tests__/html2/hooks/useStyleOptions.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStyleOptions.setter.html
rename to __tests__/html2/hooks/useStyleOptions.setter.html
diff --git a/__tests__/html2/hooks/2/useStyleSet.getter.html b/__tests__/html2/hooks/useStyleSet.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStyleSet.getter.html
rename to __tests__/html2/hooks/useStyleSet.getter.html
diff --git a/__tests__/html2/hooks/2/useStyleSet.setter.html b/__tests__/html2/hooks/useStyleSet.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useStyleSet.setter.html
rename to __tests__/html2/hooks/useStyleSet.setter.html
diff --git a/__tests__/html2/hooks/2/useSubmitSendBox.html b/__tests__/html2/hooks/useSubmitSendBox.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSubmitSendBox.html
rename to __tests__/html2/hooks/useSubmitSendBox.html
diff --git a/__tests__/html2/hooks/2/useSubmitSendBox.html.snap-1.png b/__tests__/html2/hooks/useSubmitSendBox.html.snap-1.png
similarity index 100%
rename from __tests__/html2/hooks/2/useSubmitSendBox.html.snap-1.png
rename to __tests__/html2/hooks/useSubmitSendBox.html.snap-1.png
diff --git a/__tests__/html2/hooks/2/useSuggestedActions.html b/__tests__/html2/hooks/useSuggestedActions.html
similarity index 100%
rename from __tests__/html2/hooks/2/useSuggestedActions.html
rename to __tests__/html2/hooks/useSuggestedActions.html
diff --git a/__tests__/html2/hooks/2/useTextBoxValue.html b/__tests__/html2/hooks/useTextBoxValue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTextBoxValue.html
rename to __tests__/html2/hooks/useTextBoxValue.html
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.default.html b/__tests__/html2/hooks/useTimeoutForSend.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTimeoutForSend.default.html
rename to __tests__/html2/hooks/useTimeoutForSend.default.html
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.getter.html b/__tests__/html2/hooks/useTimeoutForSend.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTimeoutForSend.getter.html
rename to __tests__/html2/hooks/useTimeoutForSend.getter.html
diff --git a/__tests__/html2/hooks/2/useTimeoutForSend.setter.html b/__tests__/html2/hooks/useTimeoutForSend.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTimeoutForSend.setter.html
rename to __tests__/html2/hooks/useTimeoutForSend.setter.html
diff --git a/__tests__/html2/hooks/2/useTrackDimension.html b/__tests__/html2/hooks/useTrackDimension.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackDimension.html
rename to __tests__/html2/hooks/useTrackDimension.html
diff --git a/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html b/__tests__/html2/hooks/useTrackDimension.invalidDimensionName.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackDimension.invalidDimensionName.html
rename to __tests__/html2/hooks/useTrackDimension.invalidDimensionName.html
diff --git a/__tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html b/__tests__/html2/hooks/useTrackDimension.invalidDimensionValue.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackDimension.invalidDimensionValue.html
rename to __tests__/html2/hooks/useTrackDimension.invalidDimensionValue.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.debug.html b/__tests__/html2/hooks/useTrackEvent.debug.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.debug.html
rename to __tests__/html2/hooks/useTrackEvent.debug.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.error.complex.html b/__tests__/html2/hooks/useTrackEvent.error.complex.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.error.complex.html
rename to __tests__/html2/hooks/useTrackEvent.error.complex.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.html b/__tests__/html2/hooks/useTrackEvent.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.html
rename to __tests__/html2/hooks/useTrackEvent.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.info.html b/__tests__/html2/hooks/useTrackEvent.info.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.info.html
rename to __tests__/html2/hooks/useTrackEvent.info.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html b/__tests__/html2/hooks/useTrackEvent.invalid.booleanData.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.invalid.booleanData.html
rename to __tests__/html2/hooks/useTrackEvent.invalid.booleanData.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.complex.html b/__tests__/html2/hooks/useTrackEvent.invalid.complex.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.invalid.complex.html
rename to __tests__/html2/hooks/useTrackEvent.invalid.complex.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.invalid.name.html b/__tests__/html2/hooks/useTrackEvent.invalid.name.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.invalid.name.html
rename to __tests__/html2/hooks/useTrackEvent.invalid.name.html
diff --git a/__tests__/html2/hooks/2/useTrackEvent.warn.numeric.html b/__tests__/html2/hooks/useTrackEvent.warn.numeric.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackEvent.warn.numeric.html
rename to __tests__/html2/hooks/useTrackEvent.warn.numeric.html

From 7a96ee9b24075a1ecccd685291a4f83e7708b6ca Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:41:18 +0000
Subject: [PATCH 48/56] Migrate useTrackException

---
 __tests__/hooks/useTrackException.js          | 91 -------------------
 .../html2/hooks/2/useTrackException.html      | 69 ++++++++++++++
 .../hooks/2/useTrackException.nonFatal.html   | 69 ++++++++++++++
 3 files changed, 138 insertions(+), 91 deletions(-)
 delete mode 100644 __tests__/hooks/useTrackException.js
 create mode 100644 __tests__/html2/hooks/2/useTrackException.html
 create mode 100644 __tests__/html2/hooks/2/useTrackException.nonFatal.html

diff --git a/__tests__/hooks/useTrackException.js b/__tests__/hooks/useTrackException.js
deleted file mode 100644
index da730d4368..0000000000
--- a/__tests__/hooks/useTrackException.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { timeouts } from '../constants.json';
-
-import uiConnected from '../setup/conditions/uiConnected';
-
-jest.setTimeout(timeouts.test);
-
-describe('useTrackException', () => {
-  let driver;
-  let pageObjects;
-
-  beforeEach(async () => {
-    const setup = await setupWebDriver({
-      props: {
-        onTelemetry: event => {
-          const { data, dimensions, duration, error, fatal, name, type } = event;
-
-          name !== 'init' &&
-            window.WebChatTest.telemetryMeasurements.push({
-              data,
-              dimensions,
-              duration,
-              error: error?.message,
-              fatal,
-              name,
-              type
-            });
-        }
-      },
-      setup: () => {
-        window.WebChatTest.telemetryMeasurements = [];
-      }
-    });
-
-    driver = setup.driver;
-    pageObjects = setup.pageObjects;
-
-    await driver.wait(uiConnected(), timeouts.directLine);
-  });
-
-  test('should track exception', async () => {
-    await pageObjects.runHook('useTrackException', [], trackException => trackException(new Error('artificial error')));
-
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ error }) => error)))
-      .resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": "artificial error",
-          "fatal": true,
-          "name": null,
-          "type": "exception",
-        },
-      ]
-    `);
-  });
-
-  test('should track non-fatal exception', async () => {
-    await pageObjects.runHook('useTrackException', [], trackException =>
-      trackException(new Error('non-fatal error'), false)
-    );
-
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ error }) => error)))
-      .resolves.toMatchInlineSnapshot(`
-      [
-        {
-          "data": null,
-          "dimensions": {
-            "capability:downscaleImage:workerType": "web worker",
-            "capability:renderer": "html",
-            "prop:locale": "en-US",
-            "prop:speechRecognition": "false",
-            "prop:speechSynthesis": "false",
-          },
-          "duration": null,
-          "error": "non-fatal error",
-          "fatal": false,
-          "name": null,
-          "type": "exception",
-        },
-      ]
-    `);
-  });
-});
diff --git a/__tests__/html2/hooks/2/useTrackException.html b/__tests__/html2/hooks/2/useTrackException.html
new file mode 100644
index 0000000000..8822fcf821
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackException.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackException } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        const trackException = await renderHook(() => useTrackException());
+        const error = new Error('artificial error');
+
+        trackException(error);
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            error,
+            fatal: true,
+            type: 'exception'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useTrackException.nonFatal.html b/__tests__/html2/hooks/2/useTrackException.nonFatal.html
new file mode 100644
index 0000000000..d3ba3fa539
--- /dev/null
+++ b/__tests__/html2/hooks/2/useTrackException.nonFatal.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useTrackDimension, useTrackException } from 'botframework-webchat/hook';
+      import { fn } from 'jest-mock';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const onTelemetry = fn();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          onTelemetry,
+          store
+        });
+
+        await renderHook();
+
+        await pageConditions.uiConnected();
+
+        const trackException = await renderHook(() => useTrackException());
+        const error = new Error('non-fatal error');
+
+        trackException(error, false);
+
+        expect(onTelemetry).toHaveBeenCalledWith(
+          expect.objectContaining({
+            dimensions: {
+              'capability:downscaleImage:workerType': 'web worker',
+              'capability:renderer': 'html',
+              'prop:locale': 'en-US',
+              'prop:speechRecognition': 'false',
+              'prop:speechSynthesis': 'false'
+            },
+            error,
+            fatal: false,
+            type: 'exception'
+          })
+        );
+      });
+    </script>
+  </body>
+</html>

From af73691c9776179ad3db812ef970a24c84a109a5 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:42:59 +0000
Subject: [PATCH 49/56] Migrate useUserID

---
 __tests__/hooks/useUserID.js                  | 33 -------------
 .../hooks/2/useUserID.getter.default.html     | 42 +++++++++++++++++
 __tests__/html2/hooks/2/useUserID.getter.html | 46 +++++++++++++++++++
 __tests__/html2/hooks/2/useUserID.setter.html | 42 +++++++++++++++++
 4 files changed, 130 insertions(+), 33 deletions(-)
 delete mode 100644 __tests__/hooks/useUserID.js
 create mode 100644 __tests__/html2/hooks/2/useUserID.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useUserID.getter.html
 create mode 100644 __tests__/html2/hooks/2/useUserID.setter.html

diff --git a/__tests__/hooks/useUserID.js b/__tests__/hooks/useUserID.js
deleted file mode 100644
index ec0e521036..0000000000
--- a/__tests__/hooks/useUserID.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return user ID set in props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      userID: 'u-12345'
-    }
-  });
-
-  const [userID] = await pageObjects.runHook('useUserID');
-
-  expect(userID).toMatchInlineSnapshot(`"u-12345"`);
-});
-
-test('getter should return empty string if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [userID] = await pageObjects.runHook('useUserID');
-
-  expect(userID).toMatchInlineSnapshot(`""`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setUserID] = await pageObjects.runHook('useUserID');
-
-  expect(setUserID).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useUserID.getter.default.html b/__tests__/html2/hooks/2/useUserID.getter.default.html
new file mode 100644
index 0000000000..f25809a8c4
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUserID.getter.default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUserID } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [userId] = await renderHook(() => useUserID());
+
+        expect(userId).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useUserID.getter.html b/__tests__/html2/hooks/2/useUserID.getter.html
new file mode 100644
index 0000000000..d7c8d14e44
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUserID.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUserID } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          userID: 'u-12345'
+        });
+
+        const [userId] = await renderHook(() => useUserID());
+
+        expect(userId).toBe('u-12345');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useUserID.setter.html b/__tests__/html2/hooks/2/useUserID.setter.html
new file mode 100644
index 0000000000..c4b67a566b
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUserID.setter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUserID } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const userIdState = await renderHook(() => useUserID());
+
+        expect(userIdState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 53e633aa65015e7cdecc45fe0621554d7bf2a229 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:47:17 +0000
Subject: [PATCH 50/56] Migrate useUsername

---
 __tests__/hooks/useUsername.js                | 33 -------------
 .../hooks/2/useUsername.getter.default.html   | 43 +++++++++++++++++
 .../html2/hooks/2/useUsername.getter.html     | 46 +++++++++++++++++++
 .../html2/hooks/2/useUsername.setter.html     | 43 +++++++++++++++++
 4 files changed, 132 insertions(+), 33 deletions(-)
 delete mode 100644 __tests__/hooks/useUsername.js
 create mode 100644 __tests__/html2/hooks/2/useUsername.getter.default.html
 create mode 100644 __tests__/html2/hooks/2/useUsername.getter.html
 create mode 100644 __tests__/html2/hooks/2/useUsername.setter.html

diff --git a/__tests__/hooks/useUsername.js b/__tests__/hooks/useUsername.js
deleted file mode 100644
index 0cde8b289e..0000000000
--- a/__tests__/hooks/useUsername.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return username set in props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      username: 'u-12345'
-    }
-  });
-
-  const [username] = await pageObjects.runHook('useUsername');
-
-  expect(username).toMatchInlineSnapshot(`"u-12345"`);
-});
-
-test('getter should return undefined if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  const [username] = await pageObjects.runHook('useUsername');
-
-  expect(username).toMatchInlineSnapshot(`"Happy Web Chat user"`);
-});
-
-test('setter should be falsy', async () => {
-  const { pageObjects } = await setupWebDriver();
-  const [_, setUsername] = await pageObjects.runHook('useUsername');
-
-  expect(setUsername).toBeFalsy();
-});
diff --git a/__tests__/html2/hooks/2/useUsername.getter.default.html b/__tests__/html2/hooks/2/useUsername.getter.default.html
new file mode 100644
index 0000000000..2e787e7bf0
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUsername.getter.default.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUsername } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [username] = await renderHook(() => useUsername());
+
+        expect(username).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useUsername.getter.html b/__tests__/html2/hooks/2/useUsername.getter.html
new file mode 100644
index 0000000000..88f175d49d
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUsername.getter.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUsername } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          username: 'u-12345'
+        });
+
+        const [username] = await renderHook(() => useUsername());
+
+        expect(username).toBe('u-12345');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useUsername.setter.html b/__tests__/html2/hooks/2/useUsername.setter.html
new file mode 100644
index 0000000000..893cf70cb7
--- /dev/null
+++ b/__tests__/html2/hooks/2/useUsername.setter.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useUsername } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const usernameState = await renderHook(() => useUsername());
+
+        expect(usernameState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 1eecd161172d043e32c973fb49204047c6de8ca6 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:49:10 +0000
Subject: [PATCH 51/56] Migrate useVoiceSelector

---
 __tests__/hooks/useVoiceSelector.js           | 45 -----------
 __tests__/html2/hooks/2/useVoiceSelector.html | 76 +++++++++++++++++++
 2 files changed, 76 insertions(+), 45 deletions(-)
 delete mode 100644 __tests__/hooks/useVoiceSelector.js
 create mode 100644 __tests__/html2/hooks/2/useVoiceSelector.html

diff --git a/__tests__/hooks/useVoiceSelector.js b/__tests__/hooks/useVoiceSelector.js
deleted file mode 100644
index 043782c018..0000000000
--- a/__tests__/hooks/useVoiceSelector.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('calling voiceSelector should use selectVoice from props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      locale: 'en-US',
-      selectVoice: voices => voices.find(({ lang }) => lang === 'zh-YUE'),
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await expect(
-    pageObjects.runHook('useVoiceSelector', [{ language: 'en-US' }], selectVoice =>
-      selectVoice([
-        {
-          default: false,
-          lang: 'zh-YUE',
-          localService: true,
-          name: 'Mock Voice (zh-YUE)',
-          voiceURI: 'mock://web-speech/voice/zh-YUE'
-        },
-        {
-          default: false,
-          lang: 'en-US',
-          localService: true,
-          name: 'Mock Voice (en-US)',
-          voiceURI: 'mock://web-speech/voice/en-US'
-        }
-      ])
-    )
-  ).resolves.toMatchInlineSnapshot(`
-    {
-      "default": false,
-      "lang": "zh-YUE",
-      "localService": true,
-      "name": "Mock Voice (zh-YUE)",
-      "voiceURI": "mock://web-speech/voice/zh-YUE",
-    }
-  `);
-});
diff --git a/__tests__/html2/hooks/2/useVoiceSelector.html b/__tests__/html2/hooks/2/useVoiceSelector.html
new file mode 100644
index 0000000000..3d21f68401
--- /dev/null
+++ b/__tests__/html2/hooks/2/useVoiceSelector.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useVoiceSelector } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          locale: 'en-US',
+          selectVoice: voices => voices.find(({ lang }) => lang === 'zh-YUE'),
+          store,
+          webSpeechPonyfillFactory: () => ponyfill
+        });
+
+        const selectVoice = await renderHook(() => useVoiceSelector());
+
+        const actual = selectVoice([
+          {
+            default: false,
+            lang: 'zh-YUE',
+            localService: true,
+            name: 'Mock Voice (zh-YUE)',
+            voiceURI: 'mock://web-speech/voice/zh-YUE'
+          },
+          {
+            default: false,
+            lang: 'en-US',
+            localService: true,
+            name: 'Mock Voice (en-US)',
+            voiceURI: 'mock://web-speech/voice/en-US'
+          }
+        ]);
+
+        expect(actual).toEqual({
+          default: false,
+          lang: 'zh-YUE',
+          localService: true,
+          name: 'Mock Voice (zh-YUE)',
+          voiceURI: 'mock://web-speech/voice/zh-YUE'
+        });
+      });
+    </script>
+  </body>
+</html>

From 0bd479f839651c3b3ffe7f6355b12c6537d92131 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 09:53:04 +0000
Subject: [PATCH 52/56] Migrate useWebSpeechPonyfill

---
 __tests__/hooks/useWebSpeechPonyfill.js       | 38 --------------
 .../2/useWebSpeechPonyfill.getter.bypass.html | 47 +++++++++++++++++
 .../hooks/2/useWebSpeechPonyfill.getter.html  | 51 +++++++++++++++++++
 .../hooks/2/useWebSpeechPonyfill.setter.html  | 51 +++++++++++++++++++
 4 files changed, 149 insertions(+), 38 deletions(-)
 delete mode 100644 __tests__/hooks/useWebSpeechPonyfill.js
 create mode 100644 __tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html
 create mode 100644 __tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html
 create mode 100644 __tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html

diff --git a/__tests__/hooks/useWebSpeechPonyfill.js b/__tests__/hooks/useWebSpeechPonyfill.js
deleted file mode 100644
index a6aba71e12..0000000000
--- a/__tests__/hooks/useWebSpeechPonyfill.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { timeouts } from '../constants.json';
-
-// selenium-webdriver API doc:
-// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
-
-jest.setTimeout(timeouts.test);
-
-test('getter should return webSpeechPonyfill from props', async () => {
-  const { pageObjects } = await setupWebDriver({
-    props: {
-      webSpeechPonyfillFactory: () => window.WebSpeechMock
-    }
-  });
-
-  await expect(
-    pageObjects.runHook('useWebSpeechPonyfill', [], webSpeechPonyfill => !!webSpeechPonyfill[0])
-  ).resolves.toBeTruthy();
-});
-
-test('getter should return speech synthesis bypass if not set in props', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(
-    pageObjects.runHook('useWebSpeechPonyfill', [], webSpeechPonyfill =>
-      Object.keys(webSpeechPonyfill[0])
-        .sort()
-        .join(', ')
-    )
-  ).resolves.toMatchInlineSnapshot(`"SpeechSynthesisUtterance, speechSynthesis"`);
-});
-
-test('setter should throw exception', async () => {
-  const { pageObjects } = await setupWebDriver();
-
-  await expect(
-    pageObjects.runHook('useWebSpeechPonyfill', [], webSpeechPonyfill => webSpeechPonyfill[1]())
-  ).rejects.toThrow();
-});
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html b/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html
new file mode 100644
index 0000000000..175b0de176
--- /dev/null
+++ b/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useWebSpeechPonyfill } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const renderHook = createRenderHook(document.getElementById('webchat'), { directLine, store });
+
+        const [webSpeechPonyfill] = await renderHook(() => useWebSpeechPonyfill());
+
+        expect(webSpeechPonyfill).toEqual(
+          expect.objectContaining({
+            speechSynthesis: expect.anything(),
+            SpeechSynthesisUtterance: expect.anything()
+          })
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html b/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html
new file mode 100644
index 0000000000..48e240b337
--- /dev/null
+++ b/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useWebSpeechPonyfill } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          webSpeechPonyfillFactory: () => ponyfill
+        });
+
+        const [webSpeechPonyfill] = await renderHook(() => useWebSpeechPonyfill());
+
+        expect(webSpeechPonyfill).toEqual(ponyfill);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html b/__tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html
new file mode 100644
index 0000000000..2735d681f9
--- /dev/null
+++ b/__tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
+          "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18",
+          "react-dictate-button": "https://esm.sh/react-dictate-button",
+          "react-dictate-button/": "https://esm.sh/react-dictate-button/",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, testIds } from 'botframework-webchat';
+      import { useWebSpeechPonyfill } from 'botframework-webchat/hook';
+      import createRenderHook from '/assets/esm/createRenderHook.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+
+      const { createDirectLineEmulator } = window.testHelpers;
+
+      window.WebChat = { createStoreWithOptions, testIds };
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const ponyfill = createWebSpeechPonyfill();
+        const renderHook = createRenderHook(document.getElementById('webchat'), {
+          directLine,
+          store,
+          webSpeechPonyfillFactory: () => ponyfill
+        });
+
+        const webSpeechPonyfillState = await renderHook(() => useWebSpeechPonyfill());
+
+        expect(webSpeechPonyfillState).toEqual([expect.anything()]);
+      });
+    </script>
+  </body>
+</html>

From 22ad84d41a85a83e1a4b65ada68c3b40eee1b2d8 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 10:41:58 +0000
Subject: [PATCH 53/56] Move tests

---
 __tests__/html2/hooks/{2 => }/useTrackException.html              | 0
 __tests__/html2/hooks/{2 => }/useTrackException.nonFatal.html     | 0
 __tests__/html2/hooks/{2 => }/useUserID.getter.default.html       | 0
 __tests__/html2/hooks/{2 => }/useUserID.getter.html               | 0
 __tests__/html2/hooks/{2 => }/useUserID.setter.html               | 0
 __tests__/html2/hooks/{2 => }/useUsername.getter.default.html     | 0
 __tests__/html2/hooks/{2 => }/useUsername.getter.html             | 0
 __tests__/html2/hooks/{2 => }/useUsername.setter.html             | 0
 __tests__/html2/hooks/{2 => }/useVoiceSelector.html               | 0
 .../html2/hooks/{2 => }/useWebSpeechPonyfill.getter.bypass.html   | 0
 __tests__/html2/hooks/{2 => }/useWebSpeechPonyfill.getter.html    | 0
 __tests__/html2/hooks/{2 => }/useWebSpeechPonyfill.setter.html    | 0
 12 files changed, 0 insertions(+), 0 deletions(-)
 rename __tests__/html2/hooks/{2 => }/useTrackException.html (100%)
 rename __tests__/html2/hooks/{2 => }/useTrackException.nonFatal.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUserID.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUserID.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUserID.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUsername.getter.default.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUsername.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useUsername.setter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useVoiceSelector.html (100%)
 rename __tests__/html2/hooks/{2 => }/useWebSpeechPonyfill.getter.bypass.html (100%)
 rename __tests__/html2/hooks/{2 => }/useWebSpeechPonyfill.getter.html (100%)
 rename __tests__/html2/hooks/{2 => }/useWebSpeechPonyfill.setter.html (100%)

diff --git a/__tests__/html2/hooks/2/useTrackException.html b/__tests__/html2/hooks/useTrackException.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackException.html
rename to __tests__/html2/hooks/useTrackException.html
diff --git a/__tests__/html2/hooks/2/useTrackException.nonFatal.html b/__tests__/html2/hooks/useTrackException.nonFatal.html
similarity index 100%
rename from __tests__/html2/hooks/2/useTrackException.nonFatal.html
rename to __tests__/html2/hooks/useTrackException.nonFatal.html
diff --git a/__tests__/html2/hooks/2/useUserID.getter.default.html b/__tests__/html2/hooks/useUserID.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUserID.getter.default.html
rename to __tests__/html2/hooks/useUserID.getter.default.html
diff --git a/__tests__/html2/hooks/2/useUserID.getter.html b/__tests__/html2/hooks/useUserID.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUserID.getter.html
rename to __tests__/html2/hooks/useUserID.getter.html
diff --git a/__tests__/html2/hooks/2/useUserID.setter.html b/__tests__/html2/hooks/useUserID.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUserID.setter.html
rename to __tests__/html2/hooks/useUserID.setter.html
diff --git a/__tests__/html2/hooks/2/useUsername.getter.default.html b/__tests__/html2/hooks/useUsername.getter.default.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUsername.getter.default.html
rename to __tests__/html2/hooks/useUsername.getter.default.html
diff --git a/__tests__/html2/hooks/2/useUsername.getter.html b/__tests__/html2/hooks/useUsername.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUsername.getter.html
rename to __tests__/html2/hooks/useUsername.getter.html
diff --git a/__tests__/html2/hooks/2/useUsername.setter.html b/__tests__/html2/hooks/useUsername.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useUsername.setter.html
rename to __tests__/html2/hooks/useUsername.setter.html
diff --git a/__tests__/html2/hooks/2/useVoiceSelector.html b/__tests__/html2/hooks/useVoiceSelector.html
similarity index 100%
rename from __tests__/html2/hooks/2/useVoiceSelector.html
rename to __tests__/html2/hooks/useVoiceSelector.html
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html b/__tests__/html2/hooks/useWebSpeechPonyfill.getter.bypass.html
similarity index 100%
rename from __tests__/html2/hooks/2/useWebSpeechPonyfill.getter.bypass.html
rename to __tests__/html2/hooks/useWebSpeechPonyfill.getter.bypass.html
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html b/__tests__/html2/hooks/useWebSpeechPonyfill.getter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useWebSpeechPonyfill.getter.html
rename to __tests__/html2/hooks/useWebSpeechPonyfill.getter.html
diff --git a/__tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html b/__tests__/html2/hooks/useWebSpeechPonyfill.setter.html
similarity index 100%
rename from __tests__/html2/hooks/2/useWebSpeechPonyfill.setter.html
rename to __tests__/html2/hooks/useWebSpeechPonyfill.setter.html

From 08dc630c092dcb475f6d9c03a38c9f9c714dc035 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 10:53:55 +0000
Subject: [PATCH 54/56] Update path of speechPageObjects.js

---
 .../speech/js => assets/esm/speech}/MockedSpeechSynthesis.js  | 0
 .../esm/speech}/MockedSpeechSynthesisErrorEvent.js            | 0
 .../js => assets/esm/speech}/MockedSpeechSynthesisEvent.js    | 0
 .../esm/speech}/MockedSpeechSynthesisUtterance.js             | 0
 .../js => assets/esm/speech}/MockedSpeechSynthesisVoice.js    | 0
 __tests__/{html2/speech/js => assets/esm/speech}/index.js     | 0
 .../speech/js => assets/esm/speech}/speechPageObjects.js      | 0
 __tests__/html2/hooks/useDictateInterims.getter.html          | 2 +-
 __tests__/html2/hooks/useDictateInterims.setter.html          | 2 +-
 __tests__/html2/hooks/useDictateState.html                    | 2 +-
 __tests__/html2/hooks/useMarkActivityAsSpoken.html            | 2 +-
 __tests__/html2/hooks/useMicrophoneButtonClick.html           | 2 +-
 .../useSendBoxSpeechInterimsVisible.getter.recognition.html   | 2 +-
 .../useSendBoxSpeechInterimsVisible.getter.synthesis.html     | 2 +-
 .../html2/hooks/useSendBoxSpeechInterimsVisible.setter.html   | 2 +-
 .../html2/hooks/useShouldSpeakIncomingActivity.true.html      | 2 +-
 __tests__/html2/hooks/useStartDictate.html                    | 2 +-
 __tests__/html2/hooks/useStopDictate.html                     | 2 +-
 __tests__/html2/hooks/useVoiceSelector.html                   | 2 +-
 __tests__/html2/hooks/useWebSpeechPonyfill.getter.html        | 2 +-
 __tests__/html2/hooks/useWebSpeechPonyfill.setter.html        | 2 +-
 __tests__/html2/speech/bargeIn/behavior.html                  | 2 +-
 __tests__/html2/speech/comprehensive.html                     | 2 +-
 __tests__/html2/speech/errorTelemetry.html                    | 2 +-
 __tests__/html2/speech/inputHint.acceptingInput.html          | 4 ++--
 __tests__/html2/speech/inputHint.ignoringInput.html           | 2 +-
 .../html2/speech/inputHint/acceptingInputViaKeyboard.html     | 2 +-
 .../html2/speech/inputHint/acceptingInputViaMicrophone.html   | 2 +-
 .../speech/inputHint/consecutive/acceptingAccepting.html      | 2 +-
 .../speech/inputHint/consecutive/acceptingExpecting.html      | 2 +-
 .../html2/speech/inputHint/consecutive/acceptingIgnoring.html | 2 +-
 .../speech/inputHint/consecutive/expectingAccepting.html      | 2 +-
 .../speech/inputHint/consecutive/expectingExpecting.html      | 2 +-
 .../html2/speech/inputHint/consecutive/expectingIgnoring.html | 2 +-
 .../html2/speech/inputHint/consecutive/ignoringAccepting.html | 2 +-
 .../html2/speech/inputHint/consecutive/ignoringExpecting.html | 2 +-
 .../html2/speech/inputHint/consecutive/ignoringIgnoring.html  | 2 +-
 .../html2/speech/inputHint/expectingInputViaKeyboard.html     | 2 +-
 .../html2/speech/inputHint/expectingInputViaMicrophone.html   | 2 +-
 .../html2/speech/inputHint/ignoringInputViaKeyboard.html      | 2 +-
 .../html2/speech/inputHint/ignoringInputViaMicrophone.html    | 2 +-
 __tests__/html2/speech/inputHint/undefinedViaKeyboard.html    | 2 +-
 __tests__/html2/speech/inputHint/undefinedViaMicrophone.html  | 2 +-
 __tests__/html2/speech/mockSetup.html                         | 2 +-
 __tests__/html2/speech/performCardAction.continuous.html      | 2 +-
 __tests__/html2/speech/performCardAction.interactive.html     | 2 +-
 __tests__/html2/speech/recognition/abortAfterAudioStart.html  | 4 ++--
 __tests__/html2/speech/recognition/birdTweet.html             | 4 ++--
 __tests__/html2/speech/recognition/locale.html                | 4 ++--
 __tests__/html2/speech/recognition/microphoneNotAllowed.html  | 4 ++--
 __tests__/html2/speech/recognition/noNetwork.html             | 4 ++--
 __tests__/html2/speech/recognition/notConfident.html          | 4 ++--
 __tests__/html2/speech/recognition/silent.html                | 4 ++--
 .../recognition/stopRecognizingOnMicrophoneButtonClick.html   | 4 ++--
 .../html2/speech/recognition/stopSynthesizeOnKeyPress.html    | 4 ++--
 .../stopSynthesizeWhenKeyPressBeforeSynthesis.html            | 4 ++--
 __tests__/html2/speech/recognition/unrecognizableSpeech.html  | 4 ++--
 __tests__/html2/speech/synthesis/adaptiveCards.html           | 2 +-
 __tests__/html2/speech/synthesis/consecutiveMessages.html     | 2 +-
 __tests__/html2/speech/synthesis/disableSynthesis.html        | 2 +-
 __tests__/html2/speech/synthesis/selectVoice.custom.html      | 2 +-
 __tests__/html2/speech/synthesis/selectVoice.en-US.html       | 2 +-
 __tests__/html2/speech/synthesis/selectVoice.zh-YUE.html      | 2 +-
 .../synthesis/startRecognitionAfterFailedSynthesis.html       | 2 +-
 .../speech/synthesis/stopSynthesisOnMicrophoneButton.html     | 2 +-
 serve-test.json                                               | 4 ++++
 66 files changed, 74 insertions(+), 70 deletions(-)
 rename __tests__/{html2/speech/js => assets/esm/speech}/MockedSpeechSynthesis.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/MockedSpeechSynthesisErrorEvent.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/MockedSpeechSynthesisEvent.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/MockedSpeechSynthesisUtterance.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/MockedSpeechSynthesisVoice.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/index.js (100%)
 rename __tests__/{html2/speech/js => assets/esm/speech}/speechPageObjects.js (100%)

diff --git a/__tests__/html2/speech/js/MockedSpeechSynthesis.js b/__tests__/assets/esm/speech/MockedSpeechSynthesis.js
similarity index 100%
rename from __tests__/html2/speech/js/MockedSpeechSynthesis.js
rename to __tests__/assets/esm/speech/MockedSpeechSynthesis.js
diff --git a/__tests__/html2/speech/js/MockedSpeechSynthesisErrorEvent.js b/__tests__/assets/esm/speech/MockedSpeechSynthesisErrorEvent.js
similarity index 100%
rename from __tests__/html2/speech/js/MockedSpeechSynthesisErrorEvent.js
rename to __tests__/assets/esm/speech/MockedSpeechSynthesisErrorEvent.js
diff --git a/__tests__/html2/speech/js/MockedSpeechSynthesisEvent.js b/__tests__/assets/esm/speech/MockedSpeechSynthesisEvent.js
similarity index 100%
rename from __tests__/html2/speech/js/MockedSpeechSynthesisEvent.js
rename to __tests__/assets/esm/speech/MockedSpeechSynthesisEvent.js
diff --git a/__tests__/html2/speech/js/MockedSpeechSynthesisUtterance.js b/__tests__/assets/esm/speech/MockedSpeechSynthesisUtterance.js
similarity index 100%
rename from __tests__/html2/speech/js/MockedSpeechSynthesisUtterance.js
rename to __tests__/assets/esm/speech/MockedSpeechSynthesisUtterance.js
diff --git a/__tests__/html2/speech/js/MockedSpeechSynthesisVoice.js b/__tests__/assets/esm/speech/MockedSpeechSynthesisVoice.js
similarity index 100%
rename from __tests__/html2/speech/js/MockedSpeechSynthesisVoice.js
rename to __tests__/assets/esm/speech/MockedSpeechSynthesisVoice.js
diff --git a/__tests__/html2/speech/js/index.js b/__tests__/assets/esm/speech/index.js
similarity index 100%
rename from __tests__/html2/speech/js/index.js
rename to __tests__/assets/esm/speech/index.js
diff --git a/__tests__/html2/speech/js/speechPageObjects.js b/__tests__/assets/esm/speech/speechPageObjects.js
similarity index 100%
rename from __tests__/html2/speech/js/speechPageObjects.js
rename to __tests__/assets/esm/speech/speechPageObjects.js
diff --git a/__tests__/html2/hooks/useDictateInterims.getter.html b/__tests__/html2/hooks/useDictateInterims.getter.html
index 076e03c6ed..468040fae7 100644
--- a/__tests__/html2/hooks/useDictateInterims.getter.html
+++ b/__tests__/html2/hooks/useDictateInterims.getter.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useDictateInterims } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useDictateInterims.setter.html b/__tests__/html2/hooks/useDictateInterims.setter.html
index 446e2fe063..90e2fcaffd 100644
--- a/__tests__/html2/hooks/useDictateInterims.setter.html
+++ b/__tests__/html2/hooks/useDictateInterims.setter.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useDictateInterims } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useDictateState.html b/__tests__/html2/hooks/useDictateState.html
index 838bc22fba..155711b625 100644
--- a/__tests__/html2/hooks/useDictateState.html
+++ b/__tests__/html2/hooks/useDictateState.html
@@ -31,7 +31,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../speech/js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
       import renderHook from './private/renderHook.js';
 
       const {
diff --git a/__tests__/html2/hooks/useMarkActivityAsSpoken.html b/__tests__/html2/hooks/useMarkActivityAsSpoken.html
index c8c2142001..741ab7b7ea 100644
--- a/__tests__/html2/hooks/useMarkActivityAsSpoken.html
+++ b/__tests__/html2/hooks/useMarkActivityAsSpoken.html
@@ -33,7 +33,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../speech/js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useMicrophoneButtonClick.html b/__tests__/html2/hooks/useMicrophoneButtonClick.html
index d236b19d06..21209967a1 100644
--- a/__tests__/html2/hooks/useMicrophoneButtonClick.html
+++ b/__tests__/html2/hooks/useMicrophoneButtonClick.html
@@ -29,7 +29,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useMicrophoneButtonClick, useMicrophoneButtonDisabled } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html
index 1a0b41b805..481b573643 100644
--- a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html
+++ b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.recognition.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendBoxSpeechInterimsVisible } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html
index fee3ef9ad7..5564408277 100644
--- a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html
+++ b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.getter.synthesis.html
@@ -31,7 +31,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../speech/js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html
index d9f737fbe8..b59b7d8baa 100644
--- a/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html
+++ b/__tests__/html2/hooks/useSendBoxSpeechInterimsVisible.setter.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useSendBoxSpeechInterimsVisible } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html b/__tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html
index 929ef60210..86bcac4fdc 100644
--- a/__tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html
+++ b/__tests__/html2/hooks/useShouldSpeakIncomingActivity.true.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useShouldSpeakIncomingActivity } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { createWebSpeechPonyfill, sendMessageViaMicrophone } from '../../speech/js/speechPageObjects.js';
+      import { createWebSpeechPonyfill, sendMessageViaMicrophone } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useStartDictate.html b/__tests__/html2/hooks/useStartDictate.html
index 31b848e282..e1febc70e4 100644
--- a/__tests__/html2/hooks/useStartDictate.html
+++ b/__tests__/html2/hooks/useStartDictate.html
@@ -29,7 +29,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useStartDictate } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useStopDictate.html b/__tests__/html2/hooks/useStopDictate.html
index 518aeb3ee1..789dcf22a1 100644
--- a/__tests__/html2/hooks/useStopDictate.html
+++ b/__tests__/html2/hooks/useStopDictate.html
@@ -29,7 +29,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useStopDictate } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useVoiceSelector.html b/__tests__/html2/hooks/useVoiceSelector.html
index 3d21f68401..ca4481bf49 100644
--- a/__tests__/html2/hooks/useVoiceSelector.html
+++ b/__tests__/html2/hooks/useVoiceSelector.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useVoiceSelector } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useWebSpeechPonyfill.getter.html b/__tests__/html2/hooks/useWebSpeechPonyfill.getter.html
index 48e240b337..536730e6fe 100644
--- a/__tests__/html2/hooks/useWebSpeechPonyfill.getter.html
+++ b/__tests__/html2/hooks/useWebSpeechPonyfill.getter.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useWebSpeechPonyfill } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/hooks/useWebSpeechPonyfill.setter.html b/__tests__/html2/hooks/useWebSpeechPonyfill.setter.html
index 2735d681f9..02addfc772 100644
--- a/__tests__/html2/hooks/useWebSpeechPonyfill.setter.html
+++ b/__tests__/html2/hooks/useWebSpeechPonyfill.setter.html
@@ -27,7 +27,7 @@
       import { createStoreWithOptions, testIds } from 'botframework-webchat';
       import { useWebSpeechPonyfill } from 'botframework-webchat/hook';
       import createRenderHook from '/assets/esm/createRenderHook.js';
-      import { actRecognizeOnce, createWebSpeechPonyfill } from '../../speech/js/speechPageObjects.js';
+      import { actRecognizeOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const { createDirectLineEmulator } = window.testHelpers;
 
diff --git a/__tests__/html2/speech/bargeIn/behavior.html b/__tests__/html2/speech/bargeIn/behavior.html
index 6cc84e3243..63ab710792 100644
--- a/__tests__/html2/speech/bargeIn/behavior.html
+++ b/__tests__/html2/speech/bargeIn/behavior.html
@@ -29,7 +29,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/comprehensive.html b/__tests__/html2/speech/comprehensive.html
index 5558536658..e3c525fc1d 100644
--- a/__tests__/html2/speech/comprehensive.html
+++ b/__tests__/html2/speech/comprehensive.html
@@ -28,7 +28,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/errorTelemetry.html b/__tests__/html2/speech/errorTelemetry.html
index 3bfd809b32..4f4424caeb 100644
--- a/__tests__/html2/speech/errorTelemetry.html
+++ b/__tests__/html2/speech/errorTelemetry.html
@@ -29,7 +29,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint.acceptingInput.html b/__tests__/html2/speech/inputHint.acceptingInput.html
index 270ee66d2a..e5e78c036d 100644
--- a/__tests__/html2/speech/inputHint.acceptingInput.html
+++ b/__tests__/html2/speech/inputHint.acceptingInput.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from './js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint.ignoringInput.html b/__tests__/html2/speech/inputHint.ignoringInput.html
index 366876531d..f15658eba4 100644
--- a/__tests__/html2/speech/inputHint.ignoringInput.html
+++ b/__tests__/html2/speech/inputHint.ignoringInput.html
@@ -29,7 +29,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/acceptingInputViaKeyboard.html b/__tests__/html2/speech/inputHint/acceptingInputViaKeyboard.html
index 3436f53f4c..3d742a36ee 100644
--- a/__tests__/html2/speech/inputHint/acceptingInputViaKeyboard.html
+++ b/__tests__/html2/speech/inputHint/acceptingInputViaKeyboard.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/acceptingInputViaMicrophone.html b/__tests__/html2/speech/inputHint/acceptingInputViaMicrophone.html
index c162052ee1..d75213a32d 100644
--- a/__tests__/html2/speech/inputHint/acceptingInputViaMicrophone.html
+++ b/__tests__/html2/speech/inputHint/acceptingInputViaMicrophone.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/acceptingAccepting.html b/__tests__/html2/speech/inputHint/consecutive/acceptingAccepting.html
index e92cada159..dabc7ef84b 100644
--- a/__tests__/html2/speech/inputHint/consecutive/acceptingAccepting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/acceptingAccepting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/acceptingExpecting.html b/__tests__/html2/speech/inputHint/consecutive/acceptingExpecting.html
index ac1d3eefd6..69a508bde0 100644
--- a/__tests__/html2/speech/inputHint/consecutive/acceptingExpecting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/acceptingExpecting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/acceptingIgnoring.html b/__tests__/html2/speech/inputHint/consecutive/acceptingIgnoring.html
index 7339c9ee25..1f68b041a5 100644
--- a/__tests__/html2/speech/inputHint/consecutive/acceptingIgnoring.html
+++ b/__tests__/html2/speech/inputHint/consecutive/acceptingIgnoring.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/expectingAccepting.html b/__tests__/html2/speech/inputHint/consecutive/expectingAccepting.html
index 53f1fa5bfb..e9797b0766 100644
--- a/__tests__/html2/speech/inputHint/consecutive/expectingAccepting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/expectingAccepting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/expectingExpecting.html b/__tests__/html2/speech/inputHint/consecutive/expectingExpecting.html
index 5db55ab37b..22a64450e4 100644
--- a/__tests__/html2/speech/inputHint/consecutive/expectingExpecting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/expectingExpecting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/expectingIgnoring.html b/__tests__/html2/speech/inputHint/consecutive/expectingIgnoring.html
index 43b35a8802..930d583a25 100644
--- a/__tests__/html2/speech/inputHint/consecutive/expectingIgnoring.html
+++ b/__tests__/html2/speech/inputHint/consecutive/expectingIgnoring.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/ignoringAccepting.html b/__tests__/html2/speech/inputHint/consecutive/ignoringAccepting.html
index 36b21b0384..c260670817 100644
--- a/__tests__/html2/speech/inputHint/consecutive/ignoringAccepting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/ignoringAccepting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/ignoringExpecting.html b/__tests__/html2/speech/inputHint/consecutive/ignoringExpecting.html
index 715743f066..4dcf6f394f 100644
--- a/__tests__/html2/speech/inputHint/consecutive/ignoringExpecting.html
+++ b/__tests__/html2/speech/inputHint/consecutive/ignoringExpecting.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/consecutive/ignoringIgnoring.html b/__tests__/html2/speech/inputHint/consecutive/ignoringIgnoring.html
index c6fca66e38..c4deeca03c 100644
--- a/__tests__/html2/speech/inputHint/consecutive/ignoringIgnoring.html
+++ b/__tests__/html2/speech/inputHint/consecutive/ignoringIgnoring.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/expectingInputViaKeyboard.html b/__tests__/html2/speech/inputHint/expectingInputViaKeyboard.html
index f3a3bc6c77..7614d406dd 100644
--- a/__tests__/html2/speech/inputHint/expectingInputViaKeyboard.html
+++ b/__tests__/html2/speech/inputHint/expectingInputViaKeyboard.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/expectingInputViaMicrophone.html b/__tests__/html2/speech/inputHint/expectingInputViaMicrophone.html
index 46782a21d0..0ee599c129 100644
--- a/__tests__/html2/speech/inputHint/expectingInputViaMicrophone.html
+++ b/__tests__/html2/speech/inputHint/expectingInputViaMicrophone.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/ignoringInputViaKeyboard.html b/__tests__/html2/speech/inputHint/ignoringInputViaKeyboard.html
index 72f5bb6709..96477c63c3 100644
--- a/__tests__/html2/speech/inputHint/ignoringInputViaKeyboard.html
+++ b/__tests__/html2/speech/inputHint/ignoringInputViaKeyboard.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/ignoringInputViaMicrophone.html b/__tests__/html2/speech/inputHint/ignoringInputViaMicrophone.html
index 2ffc3990fc..5f1dd553ea 100644
--- a/__tests__/html2/speech/inputHint/ignoringInputViaMicrophone.html
+++ b/__tests__/html2/speech/inputHint/ignoringInputViaMicrophone.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/undefinedViaKeyboard.html b/__tests__/html2/speech/inputHint/undefinedViaKeyboard.html
index de62b94e78..c1210e25e7 100644
--- a/__tests__/html2/speech/inputHint/undefinedViaKeyboard.html
+++ b/__tests__/html2/speech/inputHint/undefinedViaKeyboard.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/inputHint/undefinedViaMicrophone.html b/__tests__/html2/speech/inputHint/undefinedViaMicrophone.html
index e3abe1bbbd..3f06165137 100644
--- a/__tests__/html2/speech/inputHint/undefinedViaMicrophone.html
+++ b/__tests__/html2/speech/inputHint/undefinedViaMicrophone.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/mockSetup.html b/__tests__/html2/speech/mockSetup.html
index 7441e121ed..ce4f773577 100644
--- a/__tests__/html2/speech/mockSetup.html
+++ b/__tests__/html2/speech/mockSetup.html
@@ -24,7 +24,7 @@
         SpeechGrammarList,
         SpeechRecognition
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       run(async function () {
         const speechSynthesis = new SpeechSynthesis();
diff --git a/__tests__/html2/speech/performCardAction.continuous.html b/__tests__/html2/speech/performCardAction.continuous.html
index 7723b0d60e..05152c061e 100644
--- a/__tests__/html2/speech/performCardAction.continuous.html
+++ b/__tests__/html2/speech/performCardAction.continuous.html
@@ -29,7 +29,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/performCardAction.interactive.html b/__tests__/html2/speech/performCardAction.interactive.html
index 947e897a6b..37542512a8 100644
--- a/__tests__/html2/speech/performCardAction.interactive.html
+++ b/__tests__/html2/speech/performCardAction.interactive.html
@@ -29,7 +29,7 @@
         SpeechRecognitionResult,
         SpeechRecognitionResultList
       } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from './js/index.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/abortAfterAudioStart.html b/__tests__/html2/speech/recognition/abortAfterAudioStart.html
index 2375d092b6..d85dc52438 100644
--- a/__tests__/html2/speech/recognition/abortAfterAudioStart.html
+++ b/__tests__/html2/speech/recognition/abortAfterAudioStart.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/birdTweet.html b/__tests__/html2/speech/recognition/birdTweet.html
index c4e6bd3a06..0112ed0a7e 100644
--- a/__tests__/html2/speech/recognition/birdTweet.html
+++ b/__tests__/html2/speech/recognition/birdTweet.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/locale.html b/__tests__/html2/speech/recognition/locale.html
index 3b63026313..8c0e7f68fd 100644
--- a/__tests__/html2/speech/recognition/locale.html
+++ b/__tests__/html2/speech/recognition/locale.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/microphoneNotAllowed.html b/__tests__/html2/speech/recognition/microphoneNotAllowed.html
index 8b7fbc42bb..ce037e9759 100644
--- a/__tests__/html2/speech/recognition/microphoneNotAllowed.html
+++ b/__tests__/html2/speech/recognition/microphoneNotAllowed.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/noNetwork.html b/__tests__/html2/speech/recognition/noNetwork.html
index 20d4f582fc..552ae6dedf 100644
--- a/__tests__/html2/speech/recognition/noNetwork.html
+++ b/__tests__/html2/speech/recognition/noNetwork.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/notConfident.html b/__tests__/html2/speech/recognition/notConfident.html
index 949d538967..90f745bfb7 100644
--- a/__tests__/html2/speech/recognition/notConfident.html
+++ b/__tests__/html2/speech/recognition/notConfident.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/silent.html b/__tests__/html2/speech/recognition/silent.html
index 49604a3cae..ec8903fba8 100644
--- a/__tests__/html2/speech/recognition/silent.html
+++ b/__tests__/html2/speech/recognition/silent.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/stopRecognizingOnMicrophoneButtonClick.html b/__tests__/html2/speech/recognition/stopRecognizingOnMicrophoneButtonClick.html
index 5aa2201f7e..c76cd5c619 100644
--- a/__tests__/html2/speech/recognition/stopRecognizingOnMicrophoneButtonClick.html
+++ b/__tests__/html2/speech/recognition/stopRecognizingOnMicrophoneButtonClick.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/stopSynthesizeOnKeyPress.html b/__tests__/html2/speech/recognition/stopSynthesizeOnKeyPress.html
index 2b018e6f47..b8ad3309d4 100644
--- a/__tests__/html2/speech/recognition/stopSynthesizeOnKeyPress.html
+++ b/__tests__/html2/speech/recognition/stopSynthesizeOnKeyPress.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/stopSynthesizeWhenKeyPressBeforeSynthesis.html b/__tests__/html2/speech/recognition/stopSynthesizeWhenKeyPressBeforeSynthesis.html
index 8461ac2c39..f7e1768581 100644
--- a/__tests__/html2/speech/recognition/stopSynthesizeWhenKeyPressBeforeSynthesis.html
+++ b/__tests__/html2/speech/recognition/stopSynthesizeWhenKeyPressBeforeSynthesis.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/recognition/unrecognizableSpeech.html b/__tests__/html2/speech/recognition/unrecognizableSpeech.html
index 3f45b28f50..642568288c 100644
--- a/__tests__/html2/speech/recognition/unrecognizableSpeech.html
+++ b/__tests__/html2/speech/recognition/unrecognizableSpeech.html
@@ -22,8 +22,8 @@
       import { waitFor } from '@testduet/wait-for';
       import { fn, spyOn } from 'jest-mock';
       import { SpeechGrammarList, SpeechRecognition } from 'react-dictate-button/internal';
-      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '../js/index.js';
-      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '../js/speechPageObjects.js';
+      import { SpeechSynthesis, SpeechSynthesisEvent, SpeechSynthesisUtterance } from '/assets/esm/speech/index.js';
+      import { actRecognizeOnce, actSpeakOnce, createWebSpeechPonyfill } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/adaptiveCards.html b/__tests__/html2/speech/synthesis/adaptiveCards.html
index 097f29add2..e1814673df 100644
--- a/__tests__/html2/speech/synthesis/adaptiveCards.html
+++ b/__tests__/html2/speech/synthesis/adaptiveCards.html
@@ -30,7 +30,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       // TODO: Should find ways to eliminate this line.
       window.WebChat = { createStoreWithOptions, testIds };
diff --git a/__tests__/html2/speech/synthesis/consecutiveMessages.html b/__tests__/html2/speech/synthesis/consecutiveMessages.html
index 760fa48d64..3f2276f801 100644
--- a/__tests__/html2/speech/synthesis/consecutiveMessages.html
+++ b/__tests__/html2/speech/synthesis/consecutiveMessages.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/disableSynthesis.html b/__tests__/html2/speech/synthesis/disableSynthesis.html
index 616fe756c1..061cf768b4 100644
--- a/__tests__/html2/speech/synthesis/disableSynthesis.html
+++ b/__tests__/html2/speech/synthesis/disableSynthesis.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/selectVoice.custom.html b/__tests__/html2/speech/synthesis/selectVoice.custom.html
index 7ce146a242..28cbab694d 100644
--- a/__tests__/html2/speech/synthesis/selectVoice.custom.html
+++ b/__tests__/html2/speech/synthesis/selectVoice.custom.html
@@ -27,7 +27,7 @@
         actSpeakOnce,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/selectVoice.en-US.html b/__tests__/html2/speech/synthesis/selectVoice.en-US.html
index 9867fef9ca..88e7abc261 100644
--- a/__tests__/html2/speech/synthesis/selectVoice.en-US.html
+++ b/__tests__/html2/speech/synthesis/selectVoice.en-US.html
@@ -27,7 +27,7 @@
         actSpeakOnce,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/selectVoice.zh-YUE.html b/__tests__/html2/speech/synthesis/selectVoice.zh-YUE.html
index 6ae7be9321..9ccff7e42f 100644
--- a/__tests__/html2/speech/synthesis/selectVoice.zh-YUE.html
+++ b/__tests__/html2/speech/synthesis/selectVoice.zh-YUE.html
@@ -27,7 +27,7 @@
         actSpeakOnce,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/startRecognitionAfterFailedSynthesis.html b/__tests__/html2/speech/synthesis/startRecognitionAfterFailedSynthesis.html
index 6884e14426..2e4364b258 100644
--- a/__tests__/html2/speech/synthesis/startRecognitionAfterFailedSynthesis.html
+++ b/__tests__/html2/speech/synthesis/startRecognitionAfterFailedSynthesis.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/__tests__/html2/speech/synthesis/stopSynthesisOnMicrophoneButton.html b/__tests__/html2/speech/synthesis/stopSynthesisOnMicrophoneButton.html
index 91b05d640a..e88c049772 100644
--- a/__tests__/html2/speech/synthesis/stopSynthesisOnMicrophoneButton.html
+++ b/__tests__/html2/speech/synthesis/stopSynthesisOnMicrophoneButton.html
@@ -27,7 +27,7 @@
         actSpeak,
         createWebSpeechPonyfill,
         sendMessageViaMicrophone
-      } from '../js/speechPageObjects.js';
+      } from '/assets/esm/speech/speechPageObjects.js';
 
       const {
         testHelpers: { createDirectLineEmulator },
diff --git a/serve-test.json b/serve-test.json
index 1a71016b84..e6d41d9a3b 100644
--- a/serve-test.json
+++ b/serve-test.json
@@ -23,6 +23,10 @@
       "source": "/assets/:path/:filename",
       "destination": "__tests__/assets/:path/:filename"
     },
+    {
+      "source": "/assets/:path1/:path2/:filename",
+      "destination": "__tests__/assets/:path1/:path2/:filename"
+    },
     {
       "source": "/assets/transcripts/:filename",
       "destination": "__tests__/assets/transcripts/:filename"

From 411b1674ef26e60613247bf8464d3dae264c299a Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 11:08:58 +0000
Subject: [PATCH 55/56] Add snapshot

---
 .../html2/hooks/useDictateInterims.getter.html      |   2 ++
 .../useDictateInterims.getter.html.snap-1.png}      | Bin
 2 files changed, 2 insertions(+)
 rename __tests__/{__image_snapshots__/chrome-docker/use-dictate-interims-js-getter-should-return-dictate-interims-1-snap.png => html2/hooks/useDictateInterims.getter.html.snap-1.png} (100%)

diff --git a/__tests__/html2/hooks/useDictateInterims.getter.html b/__tests__/html2/hooks/useDictateInterims.getter.html
index 468040fae7..958d21dc4f 100644
--- a/__tests__/html2/hooks/useDictateInterims.getter.html
+++ b/__tests__/html2/hooks/useDictateInterims.getter.html
@@ -64,6 +64,8 @@
         const [dictateInterims] = await renderHook(() => useDictateInterims());
 
         expect(dictateInterims).toEqual(['Hello']);
+
+        await host.snapshot('local');
       });
     </script>
   </body>
diff --git a/__tests__/__image_snapshots__/chrome-docker/use-dictate-interims-js-getter-should-return-dictate-interims-1-snap.png b/__tests__/html2/hooks/useDictateInterims.getter.html.snap-1.png
similarity index 100%
rename from __tests__/__image_snapshots__/chrome-docker/use-dictate-interims-js-getter-should-return-dictate-interims-1-snap.png
rename to __tests__/html2/hooks/useDictateInterims.getter.html.snap-1.png

From d036c1e59ec107059d43a30850d0f0b61e6e9639 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 12 Dec 2025 11:29:19 +0000
Subject: [PATCH 56/56] Reduce flakiness

---
 .../html2/upload/withWebWorker/customThumbnailQuality.html      | 2 +-
 __tests__/html2/upload/withWebWorker/customThumbnailSize.html   | 2 +-
 __tests__/html2/upload/withWebWorker/withoutThumbnail.html      | 2 +-
 .../html2/upload/withoutWebWorker/customThumbnailQuality.html   | 2 +-
 .../html2/upload/withoutWebWorker/customThumbnailSize.html      | 2 +-
 __tests__/html2/upload/withoutWebWorker/simple.html             | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/__tests__/html2/upload/withWebWorker/customThumbnailQuality.html b/__tests__/html2/upload/withWebWorker/customThumbnailQuality.html
index 086f2d1300..88df2ba5ff 100644
--- a/__tests__/html2/upload/withWebWorker/customThumbnailQuality.html
+++ b/__tests__/html2/upload/withWebWorker/customThumbnailQuality.html
@@ -28,9 +28,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');
diff --git a/__tests__/html2/upload/withWebWorker/customThumbnailSize.html b/__tests__/html2/upload/withWebWorker/customThumbnailSize.html
index 5e4ca79968..fe76a9f050 100644
--- a/__tests__/html2/upload/withWebWorker/customThumbnailSize.html
+++ b/__tests__/html2/upload/withWebWorker/customThumbnailSize.html
@@ -30,9 +30,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');
diff --git a/__tests__/html2/upload/withWebWorker/withoutThumbnail.html b/__tests__/html2/upload/withWebWorker/withoutThumbnail.html
index 1cd2d8a730..118beafdfc 100644
--- a/__tests__/html2/upload/withWebWorker/withoutThumbnail.html
+++ b/__tests__/html2/upload/withWebWorker/withoutThumbnail.html
@@ -28,9 +28,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');
diff --git a/__tests__/html2/upload/withoutWebWorker/customThumbnailQuality.html b/__tests__/html2/upload/withoutWebWorker/customThumbnailQuality.html
index fb1eb60160..4f579debea 100644
--- a/__tests__/html2/upload/withoutWebWorker/customThumbnailQuality.html
+++ b/__tests__/html2/upload/withoutWebWorker/customThumbnailQuality.html
@@ -30,9 +30,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');
diff --git a/__tests__/html2/upload/withoutWebWorker/customThumbnailSize.html b/__tests__/html2/upload/withoutWebWorker/customThumbnailSize.html
index 9a9403e0ea..fd70f0862e 100644
--- a/__tests__/html2/upload/withoutWebWorker/customThumbnailSize.html
+++ b/__tests__/html2/upload/withoutWebWorker/customThumbnailSize.html
@@ -32,9 +32,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');
diff --git a/__tests__/html2/upload/withoutWebWorker/simple.html b/__tests__/html2/upload/withoutWebWorker/simple.html
index 53e38b1801..215c5a79a4 100644
--- a/__tests__/html2/upload/withoutWebWorker/simple.html
+++ b/__tests__/html2/upload/withoutWebWorker/simple.html
@@ -29,9 +29,9 @@
         await pageConditions.uiConnected();
 
         await pageObjects.uploadFile('seaofthieves.jpg');
-        await pageConditions.allOutgoingActivitiesSent();
 
         await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.allImagesLoaded();
 
         await host.snapshot('local');