BotFramework-WebChat/__tests__/html2/feedbackForm/feedback.form.activity.html at fae09e815674dbb92d2ed0e30b8a3fdfdfe3c18f · lexi-taylor/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
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="importmap">
      {
        "imports": {
          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
        }
      }
    </script>
    <script type="module">
      import { waitFor } from '@testduet/wait-for';

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

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

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

        await pageConditions.uiConnected();

        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);

        pageElements.byTestId('send box text area').focus();
        await host.sendShiftTab(3);

        await host.sendKeys('ENTER');
        await host.sendKeys('SPACE');

        await host.snapshot('local');

        // WHEN: Like button is dismissed by tapping on it again.
        await host.sendKeys('ESCAPE');

        // THEN: Should focus on the like button.
        await waitFor(() => expect(document.activeElement).toBe(pageElements.allByTestId('feedback button')[0]));

        // WHEN: Like button is tapped again.
        await host.sendKeys('SPACE');

        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
          1000
        );

        // WHEN: The cancel button is clicked.
        await host.sendTab(2);
        await host.sendKeys('ENTER');

        // WHEN: Should focus on the Like button as it was the action that just cancelled.
        expect(document.activeElement).toEqual(
          document.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`)[0]
        );

        // THEN: Should match snapshot.
        await host.snapshot('local');

        // WHEN: Click on dislike button to re-open feedback form
        await host.sendKeys('RIGHT', 'SPACE');

        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
          1000
        );

        await host.sendKeys('Test feedback');

        await host.snapshot('local');

        const { activity } = await directLine.actPostActivity(async () => {
          await host.sendTab(1);
          await host.sendKeys('ENTER');
        });

        expect(activity).toEqual(
          expect.objectContaining({
            type: 'invoke',
            name: 'message/submitAction',
            value: {
              actionName: 'feedback',
              actionValue: {
                reaction: 'dislike',
                feedback: {
                  feedbackText: 'Test feedback'
                }
              }
            }
          })
        );

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