BotFramework-WebChat/__tests__/html2/activityStatus/sendFailedRetry.html at 00992e0095114f14618c8aff1357508d98f6a71c · compulim/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
<!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>
      function activityStatusInnerTextContained(expectedInnerTextPattern, index = 0) {
        return pageConditions.became(
          `Activity status should contains "${expectedInnerTextPattern}"`,
          () => pageElements.activityStatuses()[index].innerText.includes(expectedInnerTextPattern),
          1000
        );
      }

      function activityChannelDataStateBecame(expectedState, index = 0) {
        if (typeof expectedState === 'undefined') {
          return pageConditions.became(
            `Activity "channelData.state" should be undefined`,
            () => !('state' in pageObjects.getActivities()[index].channelData),
            1000
          );
        }

        return pageConditions.became(
          `Activity "channelData.state" should be "${expectedState}"`,
          () => pageObjects.getActivities()[index].channelData?.state === expectedState,
          1000
        );
      }

      function activityChannelDataWebChatSendStatusBecame(expectedSendStatus, index = 0) {
        return pageConditions.became(
          `Activity "channelData['webchat:send-status']" should be "${expectedSendStatus}"`,
          () => pageObjects.getActivities()[index].channelData?.['webchat:send-status'] === expectedSendStatus,
          1000
        );
      }

      run(
        async function () {
          const clock = lolex.createClock();

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

          WebChat.renderWebChat(
            {
              directLine,
              ponyfill: clock,
              store,
              styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
            },
            document.getElementById('webchat')
          );

          await pageConditions.webChatRendered();

          clock.tick(400);

          // SETUP: Send a message and resolve the call to `postActivity()`.
          await pageConditions.uiConnected();

          const sendMessage = await directLine.actPostActivity(
            () => pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: false }),
            { id: 'a00001' }
          );

          // THEN: `channelData.state` should be "sending".
          await activityChannelDataStateBecame('sending');

          // THEN: `channelData['webchat:send-status']` should be "sending".
          await activityChannelDataWebChatSendStatusBecame('sending');

          // THEN: The message should have status of "Sending".
          await activityStatusInnerTextContained('Sending');

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

          // WHEN: After 20 seconds.
          clock.tick(20000);

          // THEN: `channelData.state` should be "send failed".
          await activityChannelDataStateBecame('send failed');

          // THEN: `channelData['webchat:send-status']` should be "sending".
          await activityChannelDataWebChatSendStatusBecame('sending');

          // THEN: The message should have status of "Send failed. Retry."
          //       This is because the message passed 20s as defined in `styleOptions.sendTimeout`.
          await activityStatusInnerTextContained('Send failed. Retry.');

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

          // WHEN: The retry button is clicked.
          const sendMessageRetry = await directLine.actPostActivity(() =>
            host.click(pageElements.activityStatuses()[0].querySelector('button'))
          );

          // THEN: It should show 2 outgoing messages.
          await pageConditions.numActivitiesShown(2);

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

          // WHEN: The first outgoing message is sent.
          await sendMessage.resolveAll();

          // THEN: The activity status of the first message should be "Just now."
          await activityStatusInnerTextContained('Just now', 0);
          await activityStatusInnerTextContained('Sending', 1);

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

          // WHEN: The second outgoing message is sent.
          await sendMessageRetry.resolveAll();

          // THEN: The activity status of the second message should be "Just now."
          await activityStatusInnerTextContained('Just now', 0);
          await activityStatusInnerTextContained('Just now', 1);

          // THEN: It should match snapshot.
          await host.snapshot('local');
        },
        { ignoreErrors: true }
      );
    </script>
  </body>
</html>