BotFramework-WebChat/__tests__/html2/activityGrouping/activityGrouping.legacyActivityStatusMiddleware.html at 9c134d49c9c3c8c9d2e9dd67d1136f161b7749c6 · 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
<!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.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <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>
    <style type="text/css">
      .activity-status {
        color: #767676;
        font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
      }

      .activity-status .activity-status__send-failed,
      .activity-status .activity-status__sending,
      .activity-status .activity-status__timestamp-pretext {
        font-size: 80%;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      run(async function () {
        const clock = lolex.createClock();

        await host.windowSize(undefined, 1280, document.getElementById('webchat'));

        const activityStatusMiddleware =
          () =>
          next =>
          (...args) => {
            const [
              {
                activity: {
                  from: { role }
                },
                hideTimestamp,
                sendState
              }
            ] = args;

            if (sendState === 'sending') {
              return (
                <span className="activity-status">
                  <span className="activity-status__sending">Sending&hellip;</span>
                </span>
              );
            } else if (sendState === 'send failed') {
              // Custom retry logic can be added when rendering the "Send failed." status.
              return (
                <span className="activity-status">
                  <span className="activity-status__send-failed">Send failed.</span>
                </span>
              );
            } else if (!hideTimestamp) {
              return (
                <span className="activity-status">
                  <span className="activity-status__timestamp-pretext">{role === 'user' ? 'User at ' : 'Bot at '}</span>
                  {next(...args)}
                </span>
              );
            }

            return next(...args);
          };

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

        WebChat.renderWebChat(
          {
            activityStatusMiddleware,
            directLine,
            ponyfill: clock,
            store
          },
          document.getElementById('webchat')
        );

        await pageConditions.webChatRendered();

        clock.tick(1000);

        await directLine.emulateIncomingActivity('This message should have timestamp "Bot at Just now".');

        await (
          await directLine.emulateOutgoingActivity('This message should have timestamp "User at Just now".')
        ).resolveAll();

        clock.tick(10000);

        await directLine.emulateOutgoingActivity('This message should have status "Send failed".');

        clock.tick(20000);

        await directLine.emulateOutgoingActivity(
          'This message should have status "Sending...", then turn to "Send failed".'
        );

        await host.snapshot('local');

        clock.tick(20000);

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