BotFramework-WebChat/__tests__/html2/store/suggestedActions/hooks.useSuggestedActions.html at 0635125297762acfbddba49ef80abd6bbffafb39 · microsoft/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
136
137
138
139
140
141
142
143
144
145
<!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>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="importmap">
      {
        "imports": {
          "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs"
        }
      }
    </script>
    <script type="module">
      import { waitFor } from '@testduet/wait-for';
      import renderHook from '../../hooks/private/renderHook.js';

      const {
        React: { createElement },
        testHelpers: { createDirectLineEmulator },
        WebChat: {
          Components: { BasicWebChat, Composer },
          hooks: { useSuggestedActions },
          testIds
        }
      } = window;

      run(async function () {
        const { directLine, store } = createDirectLineEmulator();
        const WebChatWrapper = ({ children }) =>
          createElement(Composer, { directLine, store }, createElement(BasicWebChat), children);

        // WHEN: Render initially.
        const renderResult = renderHook(
          props => {
            const state = useSuggestedActions();

            if (props) {
              state[1](props.suggestedActions);
            } else {
              return state;
            }
          },
          {
            legacyRoot: true,
            wrapper: WebChatWrapper
          }
        );

        await pageConditions.uiConnected();

        // THEN: useSuggestedActions() getter should return empty array.
        await waitFor(() =>
          expect(renderResult).toHaveProperty('result.current', [[], expect.anything(), { activity: undefined }])
        );

        // WHEN: An activity with 2 suggested actions is received.
        await directLine.emulateIncomingActivity({
          from: { role: 'bot' },
          suggestedActions: {
            actions: [
              { title: 'Hello, World!', type: 'imBack' },
              { title: 'Aloha!', type: 'imBack' }
            ],
            to: ''
          },
          text: 'Hello, World!',
          type: 'message'
        });

        // THEN: useSuggestedActions() getter should return 2 suggested actions and origin activity.
        renderResult.rerender();

        await waitFor(() =>
          expect(renderResult).toHaveProperty('result.current', [
            [
              { title: 'Hello, World!', type: 'imBack' },
              { title: 'Aloha!', type: 'imBack' }
            ],
            expect.any(Function),
            {
              activity: expect.objectContaining({
                from: { role: 'bot' },
                suggestedActions: {
                  actions: [
                    { title: 'Hello, World!', type: 'imBack' },
                    { title: 'Aloha!', type: 'imBack' }
                  ],
                  to: ''
                },
                text: 'Hello, World!',
                type: 'message'
              })
            }
          ])
        );

        // WHEN: useSuggestedActions() setter is called with 1 suggested action.
        renderResult.rerender({ suggestedActions: [{ title: 'Good morning!', type: 'imBack' }] });

        // THEN: Should show 1 suggested action.
        await waitFor(() => expect(pageElements.allByTestId(testIds.suggestedActionButton)).toHaveLength(1));
        expect(pageElements.allByTestId(testIds.suggestedActionButton)[0]).toHaveProperty(
          'textContent',
          'Good morning!'
        );

        // THEN: Should return 1 suggested action.
        renderResult.rerender();
        await waitFor(() =>
          expect(renderResult).toHaveProperty('result.current', [
            [{ title: 'Good morning!', type: 'imBack' }],
            expect.any(Function),
            { activity: undefined }
          ])
        );

        // THEN: getState() should have 1 suggested action.
        expect(store.getState().suggestedActions).toHaveLength(1);
        expect(store.getState().suggestedActions[0]).toEqual({ title: 'Good morning!', type: 'imBack' });

        // WHEN: useSuggestedActions() is called with no suggested actions.
        renderResult.rerender({ suggestedActions: [] });

        // THEN: UI should hide suggested actions.
        await waitFor(() => expect(pageElements.allByTestId(testIds.suggestedActionButton)).toHaveLength(0));

        // THEN: useSuggestedActions() should return no suggested actions.
        renderResult.rerender();
        await waitFor(() =>
          expect(renderResult).toHaveProperty('result.current', [[], expect.any(Function), { activity: undefined }])
        );

        // THEN: getState() should have no suggested actions.
        expect(store.getState().suggestedActions).toHaveLength(0);
      });
    </script>
  </body>
</html>