BotFramework-WebChat/__tests__/html2/middleware/errorBox/useBuildRenderCallback.html at db3dc02c08991bbf252f7faccac216764038ccb1 · compulim/BotFramework-WebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script>
      const warn = console.warn.bind(console);

      // We need to fake the mock ourselves without using jest-mock.
      // jest-mock is ESM and cannot mock before Web Chat.
      console.warn = (...args) => {
        console.warn.mock.calls.push(args);

        warn(...args);
      };

      console.warn._isMockFunction = true;
      console.warn.getMockName = () => 'warn';
      console.warn.mock = { calls: [] };
    </script>
    <script type="importmap">
      {
        "imports": {
          "jest-mock": "https://esm.sh/jest-mock",
          "react": "https://esm.sh/react@18.3.1",
          "react-dom": "https://esm.sh/react-dom@18.3.1",
          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
        }
      }
    </script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script type="module">
      import React from 'react';
      window.React = React;
    </script>
    <script crossorigin="anonymous" defer src="/__dist__/webchat-es5.js"></script>
    <script crossorigin="anonymous" defer src="/__dist__/botframework-webchat-debug-theme.development.js"></script>
    <style type="text/css">
      .webchat > .error-box {
        border: solid 1px red;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="module">
      import { fn, spyOn } from 'jest-mock';
      import { createElement, Fragment, memo } from 'react';
      import { createRoot } from 'react-dom/client';

      run(async function () {
        const {
          testHelpers: { createDirectLineEmulator },
          WebChat: {
            Components: { Composer, ThemeProvider },
            DebugProvider,
            middleware: { useBuildRenderErrorBoxCallback },
            ReactWebChat
          }
        } = window;

        const { directLine, store } = createDirectLineEmulator();

        const SystemUnderTest = () => {
          const renderErrorBox = useBuildRenderErrorBoxCallback();

          const errorBox = renderErrorBox({ error: new Error('Hello, World!'), where: 'Artificial' });

          return createElement('div', { className: 'error-box' }, errorBox?.({}));
        };

        const hasDebugProvider = !new URL(location.href).searchParams.has('no-debug-provider');
        const onTelemetry = fn();

        createRoot(document.getElementById('webchat')).render(
          createElement(
            hasDebugProvider ? DebugProvider : Fragment,
            {},
            createElement(
              Composer,
              {
                directLine,
                onTelemetry,
                store
              },
              createElement(SystemUnderTest)
            )
          )
        );

        await pageConditions.uiConnected();

        // THEN: Should emit as exception event.
        const exceptionEvent = onTelemetry.mock.calls.find(call => call[0]?.type === 'exception');

        expect(exceptionEvent).toBeTruthy();
        expect(exceptionEvent[0].error.message).toBe('Hello, World!');

        // THEN: Should render a red box with DebugProvider.
        await host.snapshot('local');

        // THEN: Should not warn with RCoR fallthrough.
        expect(console.warn).not.toHaveBeenCalledWith(
          expect.stringContaining('the request has fall through all middleware, set "fallbackComponent" as a catchall'),
          expect.anything()
        );
      });
    </script>
  </body>
</html>