BotFramework-WebChat/__tests__/html2/grouping/disableStatus.perSender.html at d5439b50091ff09bb6eb2f8fc049fcf4eda77a79 · 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
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <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>
    <link href="grouping.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <main id="webchat"></main>
    <script type="module">
      run(async function () {
        const {
          React: { createElement },
          WebChat: {
            decorator: { createActivityGroupingMiddleware },
            renderWebChat
          }
        } = window; // Imports in UMD fashion.

        const clock = lolex.createClock();

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

        const decoratorMiddleware = [
          createActivityGroupingMiddleware(next => request => {
            const DownstreamComponent = next(request);

            if (request.groupingName) {
              return ({ activities, children }) =>
                createElement(
                  'div',
                  { className: `grouping grouping--${request.groupingName}` },
                  createElement(DownstreamComponent, { activities }, children)
                );
            }

            return DownstreamComponent;
          })
        ];

        renderWebChat(
          {
            decoratorMiddleware,
            directLine,
            ponyfill: clock,
            store,
            styleOptions: {
              botAvatarBackgroundColor: 'black',
              botAvatarInitials: 'WC',
              groupActivitiesBy: ['sender'],
              groupTimestamp: 30_000,
              showAvatarInGroup: 'sender',
              userAvatarBackgroundColor: 'black',
              userAvatarInitials: 'WW'
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.webChatRendered();

        clock.tick(600);

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          from: { id: 'bot', role: 'bot' },
          text: `Bot 1: t=${(clock.Date.now() - 600) / 1_000}s`,
          timestamp: 0,
          type: 'message'
        });

        clock.tick(10_000);

        await directLine.emulateIncomingActivity({
          from: { id: 'bot', role: 'bot' },
          text: `Bot 2: t=${(clock.Date.now() - 600) / 1_000}s`,
          type: 'message'
        });

        clock.tick(110_000);

        await directLine.emulateIncomingActivity({
          from: { id: 'bot', role: 'bot' },
          text: `Bot 3: t=${(clock.Date.now() - 600) / 1_000}s`,
          type: 'message'
        });

        await directLine.emulateIncomingActivity({
          from: { id: 'user', role: 'user' },
          text: `User 1: t=${(clock.Date.now() - 600) / 1_000}s`,
          type: 'message'
        });

        clock.tick(10_000);

        await directLine.emulateIncomingActivity({
          from: { id: 'user', role: 'user' },
          text: `User 2: t=${(clock.Date.now() - 600) / 1_000}s`,
          type: 'message'
        });

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