blob: 0a0b1e8402bec89ea5fb52ab3a9d532113c3f867 [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {assert} from 'chai';
6import {MrUpload} from './mr-upload.js';
7
8let element;
9let preventDefault;
10let mockEvent;
11
12
13describe('mr-upload', () => {
14 beforeEach(() => {
15 element = document.createElement('mr-upload');
16 document.body.appendChild(element);
17
18 preventDefault = sinon.stub();
19
20 mockEvent = (properties) => {
21 return Object.assign({
22 preventDefault: preventDefault,
23 }, properties);
24 };
25 });
26
27 afterEach(() => {
28 document.body.removeChild(element);
29 });
30
31 it('initializes', () => {
32 assert.instanceOf(element, MrUpload);
33 });
34
35 it('reset clears files', () => {
36 element.files = [new File([''], 'filename.txt'), new File([''], 'hello')];
37
38 element.reset();
39
40 assert.deepEqual(element.files, []);
41 });
42
43 it('editing file selector adds files', () => {
44 const files = [
45 new File([''], 'filename.txt'),
46 new File([''], 'hello'),
47 ];
48 assert.deepEqual(element.files, []);
49
50 // NOTE: There is currently no way to use JavaScript to set the value of
51 // an HTML file input.
52
53 element._filesChanged({
54 currentTarget: {
55 files: files,
56 },
57 });
58
59 assert.deepEqual(element.files, files);
60 });
61
62 it('files are rendered', async () => {
63 element.files = [
64 new File([''], 'filename.txt'),
65 new File([''], 'hello'),
66 new File([''], 'file.png'),
67 ];
68
69 await element.updateComplete;
70
71 const items = element.shadowRoot.querySelectorAll('li');
72
73 assert.equal(items.length, 3);
74
75 assert.include(items[0].textContent, 'filename.txt');
76 assert.include(items[1].textContent, 'hello');
77 assert.include(items[2].textContent, 'file.png');
78 });
79
80 it('clicking removes file', async () => {
81 element.files = [
82 new File([''], 'filename.txt'),
83 new File([''], 'hello'),
84 new File([''], 'file.png'),
85 ];
86
87 await element.updateComplete;
88
89 let items = element.shadowRoot.querySelectorAll('li');
90
91 assert.equal(items.length, 3);
92
93 items[1].querySelector('button').click();
94
95 await element.updateComplete;
96
97 items = element.shadowRoot.querySelectorAll('li');
98
99 assert.equal(items.length, 2);
100
101 assert.include(items[0].textContent, 'filename.txt');
102 assert.include(items[1].textContent, 'file.png');
103
104 // Make sure clicking works even for children targets.
105 items[0].querySelector('i.material-icons').click();
106
107 await element.updateComplete;
108
109 items = element.shadowRoot.querySelectorAll('li');
110
111 assert.equal(items.length, 1);
112
113 assert.include(items[0].textContent, 'file.png');
114 });
115
116 it('duplicate files are ignored', () => {
117 const file1 = new File([''], 'filename.txt');
118 const file2 = new File([''], 'woahhh');
119 const file3 = new File([''], 'filename');
120
121 element.files = [file1, file2];
122
123 element._addFiles([file2, file3]);
124
125 assert.deepEqual(element.files, [file1, file2, file3]);
126 });
127
128 it('dragging file into window expands element', () => {
129 assert.isFalse(element.expanded);
130 assert.deepEqual(element.files, []);
131
132 element._onDragIntoWindow(mockEvent({dataTransfer: {files: [
133 new File([''], 'filename.txt'),
134 new File([''], 'hello'),
135 ]}}));
136
137 assert.isTrue(element.expanded);
138 assert.deepEqual(element.files, []);
139 assert.isTrue(preventDefault.calledOnce);
140
141 element._onDragOutOfWindow(mockEvent({dataTransfer: {files: [
142 new File([''], 'filename.txt'),
143 new File([''], 'hello'),
144 ]}}));
145
146 assert.isFalse(element.expanded);
147 assert.deepEqual(element.files, []);
148 assert.isTrue(preventDefault.calledTwice);
149 });
150
151 it('dragging non-file into window does not expands element', () => {
152 assert.isFalse(element.expanded);
153
154 element._onDragIntoWindow(mockEvent(
155 {dataTransfer: {files: [], items: [{kind: 'notFile'}]}},
156 ));
157
158 assert.isFalse(element.expanded);
159 assert.isFalse(preventDefault.called);
160
161 element._onDragOutOfWindow(mockEvent(
162 {dataTransfer: {files: [], items: [{kind: 'notFile'}]}},
163 ));
164
165 assert.isFalse(element.expanded);
166 assert.isFalse(preventDefault.called);
167 });
168
169 it('dragging file over element highlights it', () => {
170 assert.isFalse(element.highlighted);
171 assert.deepEqual(element.files, []);
172
173 element._onDragInto(mockEvent({dataTransfer: {files: [
174 new File([''], 'filename.txt'),
175 new File([''], 'hello'),
176 ]}}));
177
178 assert.isTrue(element.highlighted);
179 assert.deepEqual(element.files, []);
180 assert.isTrue(preventDefault.calledOnce);
181
182 element._onDragLeave(mockEvent({dataTransfer: {files: [
183 new File([''], 'filename.txt'),
184 new File([''], 'hello'),
185 ]}}));
186
187 assert.isFalse(element.highlighted);
188 assert.deepEqual(element.files, []);
189 assert.isTrue(preventDefault.calledTwice);
190 });
191
192 it('dropping file over element selects it', () => {
193 const files = [
194 new File([''], 'filename.txt'),
195 new File([''], 'hello'),
196 ];
197 assert.deepEqual(element.files, []);
198
199 element._onDrop(mockEvent({dataTransfer: {files: files}}));
200
201 assert.isTrue(preventDefault.calledOnce);
202 assert.deepEqual(element.files, files);
203 });
204
205 it('loadFiles loads files', async () => {
206 element.files = [
207 new File(['some content'], 'filename.txt'),
208 new File([''], 'hello'),
209 ];
210
211 const uploads = await element.loadFiles();
212
213 assert.deepEqual(uploads, [
214 {content: 'c29tZSBjb250ZW50', filename: 'filename.txt'},
215 {content: '', filename: 'hello'},
216 ]);
217 });
218});