BotFramework-WebChat/__tests__/html/fluentTheme/fluentThemeFallback.dark.html at 550afaa70201740f5bb035b135a88994c96f8733 · 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
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.26.5/babel.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
    <style>
      .fui-FluentProvider {
        display: contents;

        --webchat__color--surface: var(--colorNeutralBackground3);
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel">
      run(async function () {
        const {
          React,
          ReactDOMClient: { createRoot },
          WebChat: { FluentThemeProvider, ReactWebChat },
          Fluent: { FluentProvider, createDarkTheme }
        } = window; // Imports in UMD fashion.

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

        const App = () => <ReactWebChat directLine={directLine} store={store} styleOptions={{
          hideTelephoneKeypadButton: false
        }} />;

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

        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'
        };
        root.render(
          <FluentProvider theme={createDarkTheme(customBrandRamp)}>
            <FluentThemeProvider>
              <App />
            </FluentThemeProvider>
          </FluentProvider>
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity(
          'Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
        );

        await pageConditions.numActivitiesShown(1);

        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();

        await (await directLine.actPostActivity(() => host.sendKeys('Hello, World!\n'))).resolveAll();
        await host.snapshot();

        await directLine.emulateIncomingActivity({
          type: 'message',
          textFormat: 'plain',
          text: 'Please select one of the actions below',
          suggestedActions: {
            actions: [
              {
                image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-purple.png`,
                imageAltText: 'a purple square',
                displayText: 'say Hello World!',
                title: 'Message back as JSON with display text',
                text: 'Some text',
                type: 'messageBack',
                value: {
                  hello: 'World!'
                }
              }
            ],
            to: []
          }
        });
        // THEN: Should send the activity.
        await pageConditions.numActivitiesShown(3);
        await pageConditions.allOutgoingActivitiesSent();
        await host.snapshot();

        // WHEN: Telephone keypad button is clicked.
        await host.click(
          document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadToolbarButton}"]`)
        );

        // THEN: Should show the telephone keypad with button "1" focused.
        expect(document.activeElement).toBe(
          document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadButton1}"]`)
        );
        await pageConditions.scrollToBottomCompleted();
        await host.snapshot();

        // THEN: Close keypad
        await host.click(
          document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadToolbarButton}"]`)
        );

        // THEN: Upload file
        await pageObjects.uploadFile('seaofthieves.jpg');

        // THEN: Should show attachments
        await host.snapshot();
      });
    </script>
  </body>
</html>