BotFramework-WebChat/__tests__/html/hooks.useActiveTyping.html at 860f1a074b8659fbedb4e353b81a302bdd0f91e9 · 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
<!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>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        WebChat: {
          Components: { BasicWebChat, Composer },
          hooks: { useActiveTyping }
        }
      } = window;

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

        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
        const store = testHelpers.createStoreWithOptions({ ponyfill: clock });

        const RunFunction = ({ fn }) => {
          fn();

          return false;
        };

        const renderWithFunction = fn =>
          new Promise(resolve =>
            ReactDOM.render(
              <Composer directLine={directLine} ponyfill={clock} sendTypingIndicator={true} store={store}>
                <BasicWebChat />
                <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
              </Composer>,
              document.getElementById('webchat')
            )
          );

        await renderWithFunction();

        await pageConditions.webChatRendered();

        clock.tick(600);

        // WHEN: At initial.
        await pageConditions.uiConnected();

        // THEN: `useActiveTyping` should return nothing.
        await expect(renderWithFunction(() => useActiveTyping())).resolves.toEqual([{}]);

        // WHEN: Type "typing 1" without send.
        await pageObjects.typeInSendBox('typing 1');

        // THEN: `useActiveTyping` should return current user.
        await expect(renderWithFunction(() => Object.values(useActiveTyping()[0]))).resolves.toEqual([
          {
            at: 600,
            expireAt: 5600,
            name: expect.any(String),
            role: 'user',
            type: 'busy'
          }
        ]);

        // WHEN: The message is sent.
        await pageObjects.typeInSendBox('ENTER');

        // THEN: The bot should reply.
        await pageConditions.numActivitiesShown(2);
        await pageConditions.typingIndicatorShown();

        // THEN: `useActiveTyping` should return current user.
        await expect(renderWithFunction(() => Object.values(useActiveTyping()[0]))).resolves.toEqual([
          {
            at: 600,
            expireAt: 5600,
            name: expect.any(String),
            role: 'bot',
            type: 'busy'
          }
        ]);

        // WHEN: The user type ".".
        await pageObjects.typeInSendBox('.');

        // THEN: `useActiveTyping` should return both.
        const hookResult = await renderWithFunction(() => Object.values(useActiveTyping()[0]));

        expect(hookResult).toHaveLength(2);

        expect(hookResult).toEqual(
          expect.arrayContaining([
            {
              at: 600,
              expireAt: 5600,
              name: expect.any(String),
              role: 'bot',
              type: 'busy'
            },
            {
              at: 600,
              expireAt: 5600,
              name: expect.any(String),
              role: 'user',
              type: 'busy'
            }
          ])
        );
      });
    </script>
  </body>
</html>