BotFramework-WebChat/__tests__/html2/linkDefinition/badge.html at 5afef9f65aba265e8e8dfa69523d88282dc2f1d8 · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!doctype html>
<html lang="en-US">
  <head>
    <title>Link Definition Badge: Test link definition badge</title>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script type="importmap">
      {
        "imports": {
          "@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
          "@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
          "react": "https://esm.sh/react@18",
          "react-dom": "https://esm.sh/react-dom@18",
          "react-dom/": "https://esm.sh/react-dom@18/",
          "react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
        }
      }
    </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 type="text/css">
      .fui-FluentProvider {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="module">
      import { FluentProvider } from '@fluentui/react-provider';
      import { createDarkTheme, webLightTheme } from '@fluentui/tokens';
      import React from 'react';
      import { createRoot } from 'react-dom/client';

      run(async function () {
        const {
          WebChat: { FluentThemeProvider, ReactWebChat }
        } = window;

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

        const searchParams = new URLSearchParams(location.search);
        const variant = searchParams.get('variant');
        const theme = searchParams.get('fluent-theme');

        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
          features: [
            { name: 'prefers-reduced-motion', value: 'reduce' },
            ...(theme === 'dark' || theme === 'light'
              ? [{ name: 'prefers-color-scheme', value: theme }]
              : [])
          ]
        });

        const root = createRoot(document.getElementById('webchat'));

        let fluentTheme;

        if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
          fluentTheme = {
            ...createDarkTheme({
              10: '#12174c',
              20: '#1a1f5b',
              30: '#21276a',
              40: '#293079',
              50: '#303788',
              60: '#384097',
              70: '#4049a7',
              80: '#151e80',
              90: '#4f59c5',
              100: '#5661d4',
              110: '#5e69e3',
              120: '#7982e8',
              130: '#949bec',
              140: '#afb5f1',
              150: '#c9cdf6',
              160: '#e4e6fa'
            }),
            colorNeutralBackground1Disabled: '#101010',
            colorNeutralBackground1Hover: '#101010',
            colorNeutralForeground5: '#424242'
          };
        } else {
          fluentTheme = {
            ...webLightTheme,
            // Original is #242424 which is too light for fui-FluentProvider to pass our a11y
            colorNeutralForeground1: '#1b1b1b',
          };
        }

        const webChatProps = { dir: searchParams.get('dir'), directLine, store };

        root.render(
          variant ?
            React.createElement(
              FluentProvider,
              { className: 'fui-FluentProvider', theme: fluentTheme },
              React.createElement(
                FluentThemeProvider,
                { variant: variant },
                React.createElement(ReactWebChat, webChatProps)
              )
            ) :
            React.createElement(ReactWebChat, webChatProps)
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          entities: [
            {
              '@context': 'https://schema.org',
              '@id': '',
              '@type': 'Message',
              citation: [
                {
                  '@type': 'Claim',
                  appearance: {
                    '@type': 'DigitalDocument',
                    url: 'https://example.com/1/',
                    usageInfo: {
                      '@id': '_:1',
                      '@type': 'CreativeWork',
                      description:
                        'Nisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.',
                      keywords: ['encrypted-content'],
                      name: 'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat',
                      pattern: {
                        '@type': 'DefinedTerm',
                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
                        name: 'color',
                        termCode: 'orange'
                      }
                    }
                  },
                  position: 1
                },
                {
                  '@type': 'Claim',
                  appearance: {
                    '@type': 'DigitalDocument',
                    text: 'Incididunt amet dolore anim commodo fugiat occaecat elit nulla do consequat. Quis incididunt occaecat labore adipisicing. Cillum sunt velit consequat irure ipsum ullamco sint ea aute. Sunt et eu ut enim aliqua cupidatat non adipisicing dolore commodo dolor magna enim. Commodo reprehenderit excepteur ad nostrud ex id aliquip deserunt eiusmod. Esse non labore nulla voluptate.',
                    usageInfo: {
                      '@type': 'CreativeWork',
                      name: 'Velit exercitation',
                      pattern: {
                        '@type': 'DefinedTerm',
                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
                        name: 'color',
                        termCode: 'Yellow'
                      }
                    }
                  },
                  position: 3
                },
                {
                  '@type': 'Claim',
                  appearance: {
                    '@type': 'DigitalDocument',
                    text: 'Ea nisi nostrud duis dolore aliqua sit reprehenderit minim est nisi id est sit. Amet mollit ex fugiat sint aliquip Lorem eiusmod incididunt nulla laboris labore nulla. In id exercitation ut non non Lorem consequat cupidatat deserunt do aliqua exercitation. Minim commodo aliquip dolore exercitation officia commodo sint aute aute. Fugiat laborum proident cupidatat quis eiusmod excepteur voluptate commodo. Ullamco minim duis id deserunt laboris ullamco cupidatat dolor est sint ut. Anim pariatur non ea do occaecat dolor sint ad.'
                  },
                  position: 4
                }
              ],
              type: 'https://schema.org/Message',
              usageInfo: { '@id': '_:1' },
              author: {
                '@type': 'Person',
                name: 'Lorem Ipsum Expert'
              }
            }
          ],
          text: 'Ipsum[1] dolore[2] cupidatat[3] magna[4] consectetur[5] do tempor est excepteur.\n\n[1]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[2]: https://example.com/2/ "Laboris cupidatat voluptate"\n[3]: _:3 "Velit nulla culpa eu ea consectetur consectetur dolore velit"\n[4]: _:4 "Adipisicing enim nulla"\n[5]: https://example.com/5',
          type: 'message'
        });

        await host.snapshot('local');

        // When (copilot): opening the link definitions since they start closed
        if (variant) {
          await host.click(pageElements.linkDefinitions()[0].querySelector('summary'));
        }

        const [firstActivityElement] = pageElements.activities();

        const linkDefinitions = firstActivityElement.querySelectorAll('.link-definitions__list-item');

        expect(linkDefinitions).toHaveProperty('length', 5);

        expect(linkDefinitions[0].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
        expect(
          linkDefinitions[0].querySelector('.link-definitions__list-item-text').getAttribute('title')
        ).toBe('Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat');
        expect(
          linkDefinitions[0].querySelector('.link-definitions__list-item-badge').getAttribute('title')
        ).toBe(
          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
        );

        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
        expect(
          linkDefinitions[1].querySelector('.link-definitions__list-item-text').getAttribute('title')
        ).toBe('Laboris cupidatat voluptate');
        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-badge')).toBeNull();

        expect(linkDefinitions[2].querySelector('.link-definitions__list-item-box').tagName).toBe('BUTTON');
        expect(
          linkDefinitions[2].querySelector('.link-definitions__list-item-text').getAttribute('title')
        ).toBe('Velit nulla culpa eu ea consectetur consectetur dolore velit');
        expect(
          linkDefinitions[2].querySelector('.link-definitions__list-item-badge').getAttribute('title')
        ).toBe('Velit exercitation');

        expect(linkDefinitions[3].querySelector('.link-definitions__list-item-box').tagName).toBe('BUTTON');
        expect(
          linkDefinitions[3].querySelector('.link-definitions__list-item-text').getAttribute('title')
        ).toBe('Adipisicing enim nulla');
        expect(linkDefinitions[3].querySelector('.link-definitions__list-item-badge')).toBeNull();

        expect(document.querySelector('.link-definitions__header-text')).toHaveProperty(
          'textContent',
          '5 references'
        );

        expect(document.querySelector('.link-definitions__message-sensitivity-label-text')).toHaveProperty(
          'textContent',
          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat'
        );

        expect(document.querySelector('.link-definitions__message-sensitivity-label')).toHaveProperty(
          'title',
          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
        );

        expect(
          document.querySelector('.link-definitions__message-sensitivity-label--is-encrypted')
        ).toBeTruthy();
      });
    </script>
  </body>
</html>