BotFramework-WebChat/__tests__/html2/fluentTheme/customElement/shadowRoot.html at ba10843b857d38448ca2efab6bd4a236ed3d15f1 · microsoft/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
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18.3.1",
          "react-dom": "https://esm.sh/react-dom@18.3.1",
          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
        }
      }
    </script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script type="module">
      import React from 'react';
      window.React = React;
    </script>
    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
    <style>
      webchat-element {
        display: contents;
      }
    </style>
  </head>
  <body>
    <webchat-element></webchat-element>

    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';

      run(async function () {
        const {
          WebChat: { FluentThemeProvider, ReactWebChat }
        } = window; // Imports in UMD fashion.

        class WebChatElement extends HTMLElement {
          constructor() {
            super();

            this.attachShadow({ mode: 'open' });
          }

          connectedCallback() {
            const container = document.createElement('main');

            container.id = 'webchat';

            this.shadowRoot.appendChild(container);
            this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());

            const directLine = testHelpers.createDirectLineWithTranscript(
              testHelpers.transcriptNavigation.generateTranscript()
            );

            const store = testHelpers.createStore();

            const App = () => React.createElement(
              ReactWebChat,
              {
                directLine: directLine,
                nonce: "test",
                store: store,
                styleOptions: { stylesRoot: this.shadowRoot }
              }
            );

            const root = createRoot(container);

            root.render(
              React.createElement(FluentThemeProvider, null,
                React.createElement(App)
              )
            );
          }
        }

        customElements.define('webchat-element', WebChatElement);

        pageElements.root(document.querySelector('webchat-element').shadowRoot);

        await pageConditions.uiConnected();
        await pageConditions.scrollToBottomCompleted();
        await host.snapshot('local');

        for (const style of document.querySelector('webchat-element').shadowRoot.querySelectorAll('style')) {
          expect(style.nonce).toBe('test');
        }
      });
    </script>
  </body>
</html>