BotFramework-WebChat/__tests__/html2/basic/dragAndDrop.upload.html at 55598655a97ed4797e518ef79d0deb1c2d6ebbc3 · garypretty/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
<!doctype html>
<html lang="en-US">
  <head>
    <title>Drag and drop file upload (basic theme)</title>
    <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.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.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>
    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        renderWebChat(
          {
            directLine,
            store
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        const dataTransfer = new DataTransfer();

        dataTransfer.items.add(new File([new ArrayBuffer(100)], 'simple.txt'));

        // WHEN: Dragging a file into document.
        const dragEnterDocumentEvent = new DragEvent('dragenter', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document.dispatchEvent(dragEnterDocumentEvent);

        // THEN: Should render the drop zone.
        await pageConditions.became(
          'Drop zone should appear',
          () => !!document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`),
          1000
        );

        await host.snapshot('local');

        // WHEN: Dragging into the drop zone.
        const dragEnterDropZoneEvent = new DragEvent('dragenter', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document
          .querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`)
          .dispatchEvent(dragEnterDropZoneEvent);

        // THEN: Should render drop zone in droppable state.
        await host.snapshot('local');

        // WHEN: Dropping into the drop zone.
        const dropEvent = new DragEvent('drop', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`).dispatchEvent(dropEvent);

        // THEN: An attachment should appear in the attachment bar.
        await pageConditions.became(
          'Attachment bar item should appear',
          () => !!pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem),
          1000
        );

        await host.snapshot('local');

        // WHEN: Dragging a file into document again.
        const dragEnterDocumentEvent1 = new DragEvent('dragenter', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document.dispatchEvent(dragEnterDocumentEvent1);

        // THEN: Should render the drop zone again.
        await pageConditions.became(
          'Drop zone should appear again',
          () => !!document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`),
          1000
        );

        // WHEN: Dragging a file over the document.
        const dragOverDocumentEvent = new DragEvent('dragover', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document.dispatchEvent(dragOverDocumentEvent);

        // THEN: The default browser behavior should be prevented.
        await pageConditions.became(
          'DragOver event preventDefault is called',
          () => dragOverDocumentEvent.defaultPrevented,
          1000
        );

        // WHEN: Dropping out of the drop zone.
        const dropEvent1 = new DragEvent('drop', {
          bubbles: true,
          cancelable: true,
          dataTransfer
        });

        document.body.dispatchEvent(dropEvent1);

        // THEN: Should render single attachment (no duplicate from out-of-zone drop).
        await host.snapshot('local');
      });
    </script>
  </body>
</html>