microsoft · compulim · May 30, 2025 · May 30, 2025 · May 30, 2025 · May 30, 2025
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          hooks: { useSendBoxHooks }
+        }
+      } = window;
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const RunFunction = ({ fn }) => {
+          fn();
+
+          return false;
+        };
+
+        const renderWithFunction = fn =>
+          new Promise(resolve =>
+            ReactDOM.render(
+              <Composer directLine={directLine} sendTypingIndicator={true} store={store}>
+                <BasicWebChat />
+                <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
+              </Composer>,
+              document.getElementById('webchat')
+            )
+          );
+
+        await renderWithFunction();
+
+        await pageConditions.webChatRendered();
+
+        // WHEN: At initial.
+        await pageConditions.uiConnected();
+
+        // WHEN: Type "Hello, World!" without send.
+        await pageObjects.typeInSendBox('Hello, World!');
+
+        // THEN: `useActiveTyping` should return "Hello, World!"
+        await expect(renderWithFunction(() => useSendBoxHooks().useSendBoxValue()[0])).resolves.toBe('Hello, World!');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          hooks: { useSendBoxHooks },
+          testIds
+        }
+      } = window;
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const RunFunction = ({ fn }) => {
+          fn();
+
+          return false;
+        };
+
+        const renderWithFunction = fn =>
+          new Promise(resolve =>
+            ReactDOM.render(
+              <Composer directLine={directLine} sendTypingIndicator={true} store={store}>
+                <BasicWebChat />
+                <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
+              </Composer>,
+              document.getElementById('webchat')
+            )
+          );
+
+        await renderWithFunction();
+
+        await pageConditions.webChatRendered();
+
+        // WHEN: At initial.
+        await pageConditions.uiConnected();
+
+        // WHEN: `useActiveTyping` to set the text box value.
+        await renderWithFunction(() => useSendBoxHooks().useSendBoxValue()[1]('Hello, World!'));
+
+        // THEN: Send box should be "Hello, World!"
+        expect(pageElements.byTestId(testIds.sendBoxTextBox)).toHaveProperty('value', 'Hello, World!');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './useSendBoxAttachments?deprecated';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -12,6 +12,7 @@
     <main id="webchat"></main>
     <script>
       run(async function () {
+        const useDeprecatedHook = new URL(location).searchParams.has('deprecated');
         const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
         const store = testHelpers.createStore();
 
@@ -23,8 +24,10 @@
         await pageConditions.uiConnected();
 
         // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
-        const initialSendBoxAttachments = await pageObjects.runHook(
-          ({ useSendBoxAttachments }) => useSendBoxAttachments()[0]
+        const initialSendBoxAttachments = await pageObjects.runHook(hooks =>
+          useDeprecatedHook
+            ? hooks.useSendBoxAttachments()[0]
+            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
         );
 
         // THEN: It should return empty array.
@@ -59,16 +62,25 @@
         });
 
         // WHEN: `useSendBoxAttachments` hook is called to set an attachment.
-        await pageObjects.runHook(({ useSendBoxAttachments }) => {
+        await pageObjects.runHook(hooks => {
           const attachmentsRef = React.useRef([{ blob, thumbnailURL }]);
-          useSendBoxAttachments()[1](attachmentsRef.current);
+
+          if (useDeprecatedHook) {
+            hooks.useSendBoxAttachments()[1](attachmentsRef.current);
+          } else {
+            hooks.useSendBoxHooks().useSendBoxAttachments()[1](attachmentsRef.current);
+          }
         });
 
         // THEN: It should show checkmark on the button and file preview.
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
-        const sendBoxAttachments = await pageObjects.runHook(({ useSendBoxAttachments }) => useSendBoxAttachments()[0]);
+        const sendBoxAttachments = await pageObjects.runHook(hooks =>
+          useDeprecatedHook
+            ? hooks.useSendBoxAttachments()[0]
+            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
+        );
 
         // THEN: It should return 1 attachment.
         expect(sendBoxAttachments).toHaveLength(1);
@@ -80,11 +92,13 @@
         // THEN: It should send the attachment (each "run hook" is an activity).
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.numActivitiesShown(5);
-        await host.snapshot();
+        await host.snapshot('local');
 
         // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
-        const finalSendBoxAttachments = await pageObjects.runHook(
-          ({ useSendBoxAttachments }) => useSendBoxAttachments()[0]
+        const finalSendBoxAttachments = await pageObjects.runHook(hooks =>
+          useDeprecatedHook
+            ? hooks.useSendBoxAttachments()[0]
+            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
         );
 
         // THEN: It should return 0 attachments.

@@ -128,16 +128,16 @@
         // WHEN: useSuggestedActions() is called with no suggested actions.
         renderResult.rerender({ suggestedActions: [] });
 
-        // THEN: Should hide suggested actions.
+        // THEN: UI should hide suggested actions.
         await waitFor(() => expect(pageElements.allByTestId(testIds.suggestedActionButton)).toHaveLength(0));
 
-        // THEN: Should return 0 suggested actions.
+        // THEN: useSuggestedActions() should return no suggested actions.
         renderResult.rerender();
         await waitFor(() =>
           expect(renderResult).toHaveProperty('result.current', [[], expect.any(Function), { activity: undefined }])
         );
 
-        // THEN: getState() should have 1 suggested action.
+        // THEN: getState() should have no suggested actions.
         expect(store.getState().suggestedActions).toHaveLength(0);
       });
     </script>

@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import renderHook from '../../hooks/private/renderHook.js';
+
+      const {
+        React: { createElement },
+        testHelpers: { createDirectLineEmulator },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          hooks: { useSuggestedActions },
+          testIds
+        }
+      } = window;
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+        const WebChatWrapper = ({ children }) =>
+          createElement(Composer, { directLine, store }, createElement(BasicWebChat), children);
+
+        // WHEN: Render initially.
+        const renderResult = renderHook(
+          props => {
+            const state = useSuggestedActions();
+
+            if (props) {
+              state[1](props.suggestedActions);
+            } else {
+              return state;
+            }
+          },
+          {
+            legacyRoot: true,
+            wrapper: WebChatWrapper
+          }
+        );
+
+        await pageConditions.uiConnected();
+
+        // THEN: useSuggestedActions() getter should return empty array.
+        await waitFor(() =>
+          expect(renderResult).toHaveProperty('result.current', [[], expect.anything(), { activity: undefined }])
+        );
+
+        // WHEN: An activity with 2 suggested actions is received.
+        await directLine.emulateIncomingActivity({
+          from: { role: 'bot' },
+          suggestedActions: {
+            actions: [
+              { title: 'Hello, World!', type: 'imBack' },
+              { title: 'Aloha!', type: 'imBack' }
+            ],
+            to: ''
+          },
+          text: 'Hello, World!',
+          type: 'message'
+        });
+
+        // WHEN: A message is being sent.
+        pageElements.byTestId(testIds.sendBoxTextBox).focus();
+
+        await (
+          await directLine.actPostActivity(async () => {
+            await host.sendKeys('Good morning!', 'ENTER');
+          })
+        ).resolveAll();
+
+        // THEN: UI should hide suggested actions.
+        await waitFor(() => expect(pageElements.allByTestId(testIds.suggestedActionButton)).toHaveLength(0));
+
+        // THEN: useSuggestedActions() should return no suggested actions.
+        renderResult.rerender();
+        await waitFor(() =>
+          expect(renderResult).toHaveProperty('result.current', [[], expect.any(Function), { activity: undefined }])
+        );
+
+        // THEN: getState() should have no suggested actions.
+        expect(store.getState().suggestedActions).toHaveLength(0);
+      });
+    </script>
+  </body>
+</html>