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
|
import { shallowMount } from '@vue/test-utils';
import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue';
import createFlash from '~/flash';
jest.mock('~/flash');
describe('Design management dropzone component', () => {
let wrapper;
const mockDragEvent = ({ types = ['Files'], files = [] }) => {
return { dataTransfer: { types, files } };
};
const findDropzoneCard = () => wrapper.find('.design-dropzone-card');
function createComponent({ slots = {}, data = {} } = {}) {
wrapper = shallowMount(DesignDropzone, {
slots,
data() {
return data;
},
});
}
afterEach(() => {
wrapper.destroy();
});
describe('when slot provided', () => {
it('renders dropzone with slot content', () => {
createComponent({
slots: {
default: ['<div>dropzone slot</div>'],
},
});
expect(wrapper.element).toMatchSnapshot();
});
});
describe('when no slot provided', () => {
it('renders default dropzone card', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
it('triggers click event on file input element when clicked', () => {
createComponent();
const clickSpy = jest.spyOn(wrapper.find('input').element, 'click');
findDropzoneCard().trigger('click');
expect(clickSpy).toHaveBeenCalled();
});
});
describe('when dragging', () => {
it.each`
description | eventPayload
${'is empty'} | ${{}}
${'contains text'} | ${mockDragEvent({ types: ['text'] })}
${'contains files and text'} | ${mockDragEvent({ types: ['Files', 'text'] })}
${'contains files'} | ${mockDragEvent({ types: ['Files'] })}
`('renders correct template when drag event $description', ({ eventPayload }) => {
createComponent();
wrapper.trigger('dragenter', eventPayload);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders correct template when dragging stops', () => {
createComponent();
wrapper.trigger('dragenter');
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.trigger('dragleave');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
});
describe('when dropping', () => {
it('emits upload event', () => {
createComponent();
const mockFile = { name: 'test', type: 'image/jpg' };
const mockEvent = mockDragEvent({ files: [mockFile] });
wrapper.trigger('dragenter', mockEvent);
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.trigger('drop', mockEvent);
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
});
});
});
describe('ondrop', () => {
const mockData = { dragCounter: 1, isDragDataValid: true };
describe('when drag data is valid', () => {
it('emits upload event for valid files', () => {
createComponent({ data: mockData });
const mockFile = { type: 'image/jpg' };
const mockEvent = mockDragEvent({ files: [mockFile] });
wrapper.vm.ondrop(mockEvent);
expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
});
it('calls createFlash when files are invalid', () => {
createComponent({ data: mockData });
const mockEvent = mockDragEvent({ files: [{ type: 'audio/midi' }] });
wrapper.vm.ondrop(mockEvent);
expect(createFlash).toHaveBeenCalledTimes(1);
});
});
});
});
|
