BotFramework-WebChat/__tests__/html2/markdown/math/layout.scroll.html at fdcbf45a2b256218ddbedd215e1a02b18e69fd5f · 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
<!doctype html>
<html lang="en-US">
  <head>
    <title>Markdown Math Layout Scroll: Test markdown math layout scroll with fluent theme</title>
    <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/",
          "@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
        }
      }
    </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>
  </head>

  <body>
    <main id="webchat"></main>
    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
      import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';

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

        const { directLine, store } = testHelpers.createDirectLineEmulator();
        const searchParams = new URLSearchParams(location.search);
        const variant = searchParams.get('variant');
        const theme = searchParams.get('theme');

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

        const customBrandRamp = {
          10: '#124C32',
          20: '#1A5B3E',
          30: '#216A4A',
          40: '#297956',
          50: '#308861',
          60: '#38976D',
          70: '#40A779',
          80: '#158051',
          90: '#4FC590',
          100: '#56D49C',
          110: '#5EE3A8',
          120: '#79E8B7',
          130: '#94ECC5',
          140: '#AFF1D3',
          150: '#C9F6E2',
          160: '#E4FAF1'
        };

        let fluentTheme;

        if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
          fluentTheme = createDarkTheme(customBrandRamp);
        } else {
          fluentTheme = {
            ...webLightTheme,
            // Original is #242424 which is too light for fui-FluentProvider to pass our a11y
            colorNeutralForeground1: '#1b1b1b'
          };
        }

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

        root.render(
          variant ?
            React.createElement(
              FluentProvider,
              { theme: fluentTheme },
              React.createElement(
                FluentThemeProvider,
                { variant: variant },
                React.createElement(ReactWebChat, { directLine, store })
              )
            ) :
            React.createElement(ReactWebChat, { directLine, store })
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          type: 'message',
          from: {
            role: 'bot'
          },
          text: 'To calculate the number of oranges in a crate, you can use a few different methods depending on the information you have. Here are some formulae that might help:\n\n1. **Volume Method**:\n   If you know the volume of the crate and the average volume of an orange, you can estimate the number of oranges.\n   \\[\n   \\text{Number of Oranges} = \\frac{\\text{Volume of Crate}}{\\text{Average Volume of an Orange}}\n   \\]\n\n2. **Weight Method**:\n   If you know the total weight of the crate and the average weight of an orange, you can use this formula.\n   \\[\n   \\text{Number of Oranges} = \\frac{\\text{Total Weight of Crate}}{\\text{Average Weight of an Orange}}\n   \\]\n\n3. **Layer Method**:\n   If you know the dimensions of the crate and the average dimensions of an orange, you can calculate how many layers of oranges fit in the crate.\n   \\[\n   \\text{Number of Oranges} = \\left(\\frac{\\text{Length of Crate}}{\\text{Average Diameter of an Orange}}\\right) \\times \\left(\\frac{\\text{Width of Crate}}{\\text{Average Diameter of an Orange}}\\right) \\times \\left(\\frac{\\text{Height of Crate}}{\\text{Average Diameter of an Orange}}\\right)\n   \\]\n\nThese methods can give you a good estimate. Do you have specific measurements or weights for your crate and oranges? That would help in applying these formulae more accurately.'
        });

        await pageConditions.numActivitiesShown(1);
        await pageConditions.scrollStabilized();

        await host.snapshot('local');

        // WHEN: Press ENTER over the activity.
        document.querySelector(`#webchat [data-testid="${testIds.sendBoxTextBox}"]`).focus();

        await host.sendShiftTab(
          ['copilot', 'copilot-deprecated', 'fluent'].includes(searchParams.get('variant')) ? 2 : 3
        );
        await host.sendKeys('ENTER');

        // THEN: Should focus on the first <figure>.
        expect(document).toHaveProperty(
          'activeElement',
          pageElements.activityContents()[0].querySelectorAll('figure')[0]
        );
        // expect(document).toHaveProperty('activeElement.tagName', 'FIGURE');
        await host.snapshot('local');

        // ----------------------------------------

        // WHEN: Press RIGHT key.
        await host.sendKeys('RIGHT');

        // THEN: Should scroll to the right.
        await pageConditions.became('should scroll to the right', () => document.activeElement.scrollLeft > 10, 1000);
        await pageConditions.stabilized('should finish scrolling', () => document.activeElement.scrollLeft, 5, 1000);
        await host.snapshot('local');

        // ----------------------------------------

        // WHEN: Press TAB key.
        await host.sendKeys('TAB');

        // THEN: Should focus on the second <figure>.
        expect(document).toHaveProperty(
          'activeElement',
          pageElements.activityContents()[0].querySelectorAll('figure')[1]
        );
        await host.snapshot('local');
      });
    </script>
  </body>
</html>