BotFramework-WebChat/__tests__/html2/grouping/extraneousGroup.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
113
<!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" />
    <style type="text/css">
      .grouping--duo {
        border-color: orange;
      }

      .grouping--duo::after {
        background-color: orange;
        color: white;
        content: 'Duo';
        right: -2px;
      }
    </style>
  </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 groupActivitiesMiddleware = () => next => request => ({
          ...next(request),
          // Intentionally return middleware regardless of grouping name.
          duo: request.activities.reduce((result, activity) => {
            if (result.at(-1)?.length === 1) {
              result.at(-1).push(activity);
            } else {
              result.push([activity]);
            }

            return result;
          }, [])
        });

        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,
            groupActivitiesMiddleware,
            ponyfill: clock,
            store,
            styleOptions: {
              botAvatarBackgroundColor: 'black',
              botAvatarInitials: 'WC',
              // WHEN: Not grouping by the new "duo" group.
              groupActivitiesBy: ['sender', 'status'],
              groupTimestamp: 30_000,
              userAvatarBackgroundColor: 'black',
              userAvatarInitials: 'WW'
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.webChatRendered();

        clock.tick(600);

        await pageConditions.uiConnected();

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

          clock.tick(index % 3 === 2 ? 60_000 : 10_000);
        }

        // THEN: Should not render the extraneous "duo" group.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>