hideSendBox.html

<!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/": "/__dist__/packages/bundle/static/botframework-webchat/",
          "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
          "react": "/__dist__/packages/bundle/static/react.js",
          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
        }
      }
    </script>
    <script type="module">
      import '/test-harness.mjs';
      import '/test-page-object.mjs';

      import { waitFor } from '@testduet/wait-for';
      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
      import { FluentThemeProvider, testIds } from 'botframework-webchat-fluent-theme';
      import { createElement } from 'react';
      import { createRoot } from 'react-dom/client';

      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
      window.WebChat = { createStoreWithOptions };

      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        // GIVEN: Web Chat with the Fluent theme (or its Copilot variant) and `hideSendBox: true`.
        createRoot(document.getElementById('webchat')).render(
          createElement(
            FluentThemeProvider,
            { variant: new URLSearchParams(location.search).get('variant') || 'fluent' },
            createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
          )
        );

        await pageConditions.uiConnected();

        // WHEN: The bot sends a message with suggested actions, which are shown inside the send box.
        await directLine.emulateIncomingActivity({
          from: { role: 'bot' },
          suggestedActions: {
            actions: [
              { title: 'Yes', type: 'imBack', value: 'Yes' },
              { title: 'No', type: 'imBack', value: 'No' }
            ]
          },
          text: 'Do you want to continue?',
          type: 'message'
        });

        await pageConditions.numActivitiesShown(1);
        await waitFor(() => expect(store.getState().suggestedActions).toHaveLength(2));

        // THEN: The send box, its toolbar, and the suggested actions should not be rendered.
        expect(pageElements.byTestId(testIds.sendBoxContainer)).toBeFalsy();
        expect(pageElements.byTestId(testIds.sendBoxTextBox)).toBeFalsy();
        expect(pageElements.byTestId(testIds.sendBoxSendButton)).toBeFalsy();
        expect(pageElements.byTestId(testIds.sendBoxSuggestedAction)).toBeFalsy();

        // THEN: The transcript shows the message, without a send box or suggested actions below it.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>