BotFramework-WebChat/__tests__/html2/feedbackForm/feedback.form.scroll.html at b7af35c46cec98aa22fa0be2e648a08d0d7891c6 · 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
<!doctype html>
<html lang="en-US">
  <head>
    <title>Feedback Form: Scrollbar behavior when input is long</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';
      import ReactDOM from 'react-dom';
      window.React = React;
      window.ReactDOM = ReactDOM;
    </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">
      run(async function () {
        const {
          WebChat: { testIds }
        } = window; // Imports in UMD fashion.

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

        const { isFluentTheme } = renderWebChat(
          {
            directLine,
            store,
            styleOptions: { feedbackActionsPlacement: 'activity-actions' }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        pageElements.byTestId(testIds.sendBoxTextBox).focus();

        // GIVEN: An activity with feedback form.
        await directLine.emulateIncomingActivity({
          type: 'message',
          id: 'a-00000',
          timestamp: 0,
          text: 'This is a test message to show feedback buttons',
          from: {
            role: 'bot'
          },
          locale: 'en-US',
          entities: [],
          channelData: {
            feedbackLoop: {
              type: 'default',
              disclaimer: 'This is a test disclaimer message'
            }
          }
        });

        await pageConditions.numActivitiesShown(1);

        // WHEN: Focus on the like button.
        if (isFluentTheme) {
          await host.sendShiftTab(1);
          await host.sendKeys('ARROW_UP');
          await host.sendKeys('ENTER', 'SPACE');
        } else {
          await host.sendShiftTab(3);
          await host.sendKeys('ENTER', 'SPACE');
        }

        // THEN: The feedback form should be expanded.
        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId(testIds.feedbackSendBox),
          1000
        );

        // WHEN: The form is filled with more than 10 lines of text.
        await host.sendKeys('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris '.repeat(12));

        // THEN: The feedback form should have scroll visible
        await host.snapshot('local');

        // WHEN: The text area is not focused.
        await host.sendTab(1);

        // THEN: The feedback form should have scrollbar hidden.
        await host.snapshot('local');

        // WHEN: A feedback form with scroll is being submitted.
        await directLine.actPostActivity(async () => {
          await host.sendKeys('ENTER');
        });


        // THEN: Feedback form should be collapsed.
        await expect(pageElements.byTestId(testIds.feedbackSendBox)).toBeFalsy();

        // THEN: All feedback buttons should be grayed out.
        await expect(
          Array.from(pageElements.allByTestId(testIds.feedbackButton)).every(
            buttonElement => buttonElement.getAttribute('aria-disabled') === 'true'
          )
        ).toBe(true);

        // THEN: Should match snapshot.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>