BotFramework-WebChat/__tests__/html2/sendBox/sendAttachmentOn/useSendBoxAttachments.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
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="focus-indicator.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="/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>
      run(async function () {
        const useDeprecatedHook = new URL(location).searchParams.has('deprecated');
        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
        const store = testHelpers.createStore();

        WebChat.renderWebChat(
          { activityMiddleware: testHelpers.createRunHookActivityMiddleware(), directLine, store },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const initialSendBoxAttachments = await pageObjects.runHook(hooks =>
          useDeprecatedHook
            ? hooks.useSendBoxAttachments()[0]
            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
        );

        // THEN: It should return empty array.
        expect(Array.isArray(initialSendBoxAttachments)).toBe(true);
        expect(initialSendBoxAttachments).toHaveLength(0);

        // SETUP: An empty file blob.
        const blob = new File(
          [
            await (
              await fetch(
                'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
              )
            ).blob()
          ],
          'surface1.jpg',
          { type: 'image/jpeg' }
        );

        const thumbnailBlob = await (
          await fetch(
            'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
          )
        ).blob();

        const thumbnailURL = await new Promise((resolve, reject) => {
          const fileReader = new FileReader();

          fileReader.onerror = reject;
          fileReader.onload = () => resolve(new URL(fileReader.result));
          fileReader.readAsDataURL(thumbnailBlob);
        });

        // WHEN: `useSendBoxAttachments` hook is called to set an attachment.
        await pageObjects.runHook(hooks => {
          const attachmentsRef = React.useRef([{ blob, thumbnailURL }]);

          if (useDeprecatedHook) {
            hooks.useSendBoxAttachments()[1](attachmentsRef.current);
          } else {
            hooks.useSendBoxHooks().useSendBoxAttachments()[1](attachmentsRef.current);
          }
        });

        // THEN: It should show checkmark on the button and file preview.
        await host.snapshot('local');

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const sendBoxAttachments = await pageObjects.runHook(hooks =>
          useDeprecatedHook
            ? hooks.useSendBoxAttachments()[0]
            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
        );

        // THEN: It should return 1 attachment.
        expect(sendBoxAttachments).toHaveLength(1);
        expect(sendBoxAttachments[0].blob).toBe(blob);

        // WHEN: Send button is clicked.
        await host.click(pageElements.sendButton());

        // THEN: It should send the attachment (each "run hook" is an activity).
        await pageConditions.allOutgoingActivitiesSent();
        await pageConditions.numActivitiesShown(5);
        await host.snapshot('local');

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const finalSendBoxAttachments = await pageObjects.runHook(hooks =>
          useDeprecatedHook
            ? hooks.useSendBoxAttachments()[0]
            : hooks.useSendBoxHooks().useSendBoxAttachments()[0]
        );

        // THEN: It should return 0 attachments.
        expect(finalSendBoxAttachments).toHaveLength(0);
      });
    </script>
  </body>
</html>