Refactor SyntheticClipboardEvent tests to only use the public API (#11365)
* Refactor SyntheticClipboardEvent tests to only use the public API * Replace local document creation by document body reset on each test case execution * Set up and tear down container separately * Tweak test assertion logic for clarity * Remove simulate abstraction and create events directly * Ensure the test covers IE8 behavior * Verify that persistence works
Bernardo Smaniotto committed
Nov 10, 2017 at 13:53 UTC
7c150a80784ef7bcc08c25a150bc869a0e0f0846
1 file changed
+172
-27
packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
+172
-27
@@ -9,25 +9,33 @@
9
10
'use strict';
11
12
-var SyntheticClipboardEvent;
12
+var React;
13
+var ReactDOM;
14
15
describe('SyntheticClipboardEvent', () => {
15
- var createEvent;
16
+ var simulateEvent;
17
+ var container;
18
19
beforeEach(() => {
18
- // TODO: can we express this test with only public API?
19
- SyntheticClipboardEvent = require('../SyntheticClipboardEvent').default;
20
- createEvent = function(nativeEvent) {
21
- var target = require('../getEventTarget').default(nativeEvent);
22
- return SyntheticClipboardEvent.getPooled({}, '', nativeEvent, target);
23
- };
20
+ React = require('react');
21
+ ReactDOM = require('react-dom');
22
+
23
+ container = document.createElement('div');
24
+ document.body.appendChild(container);
25
+ });
26
+
27
+ afterEach(() => {
28
+ document.body.removeChild(container);
29
+ container = null;
30
});
31
32
describe('ClipboardEvent interface', () => {
33
describe('clipboardData', () => {
34
describe('when event has clipboardData', () => {
35
it("returns event's clipboardData", () => {
30
- // Mock clipboardData since native implementation doesn't have a constructor
36
+ var expectedCount = 0;
37
+
38
+ // Mock clipboardData since jsdom implementation doesn't have a constructor
39
var clipboardData = {
40
dropEffect: null,
41
effectAllowed: null,
@@ -35,9 +43,36 @@ describe('SyntheticClipboardEvent', () => {
43
items: null,
44
types: null,
45
};
38
- var clipboardEvent = createEvent({clipboardData: clipboardData});
46
+ var eventHandler = event => {
47
+ expect(event.clipboardData).toBe(clipboardData);
48
+ expectedCount++;
49
+ };
50
+ var div = ReactDOM.render(
51
+ <div
52
+ onCopy={eventHandler}
53
+ onCut={eventHandler}
54
+ onPaste={eventHandler}
55
+ />,
56
+ container,
57
+ );
58
+
59
+ var event;
60
+ event = document.createEvent('Event');
61
+ event.initEvent('copy', true, true);
62
+ event.clipboardData = clipboardData;
63
+ div.dispatchEvent(event);
64
+
65
+ event = document.createEvent('Event');
66
+ event.initEvent('cut', true, true);
67
+ event.clipboardData = clipboardData;
68
+ div.dispatchEvent(event);
69
40
- expect(clipboardEvent.clipboardData).toBe(clipboardData);
70
+ event = document.createEvent('Event');
71
+ event.initEvent('paste', true, true);
72
+ event.clipboardData = clipboardData;
73
+ div.dispatchEvent(event);
74
+
75
+ expect(expectedCount).toBe(3);
76
});
77
});
78
});
@@ -45,32 +80,142 @@ describe('SyntheticClipboardEvent', () => {
80
81
describe('EventInterface', () => {
82
it('normalizes properties from the Event interface', () => {
48
- var target = document.createElement('div');
49
- var syntheticEvent = createEvent({srcElement: target});
83
+ var expectedCount = 0;
84
+ var div;
85
+
86
+ var eventHandler = type => event => {
87
+ expect(event.target).toBe(div);
88
+ expect(event.type).toBe(type);
89
+ expectedCount++;
90
+ };
91
+
92
+ div = ReactDOM.render(
93
+ <div
94
+ onCopy={eventHandler('copy')}
95
+ onCut={eventHandler('cut')}
96
+ onPaste={eventHandler('paste')}
97
+ />,
98
+ container,
99
+ );
100
+
101
+ var event;
102
+ event = document.createEvent('Event');
103
+ event.initEvent('copy', true, true);
104
+ // Emulate IE8
105
+ Object.defineProperty(event, 'target', {
106
+ get() {},
107
+ });
108
+ Object.defineProperty(event, 'srcElement', {
109
+ get() {
110
+ return div;
111
+ },
112
+ });
113
+ div.dispatchEvent(event);
114
+
115
+ event = document.createEvent('Event');
116
+ event.initEvent('cut', true, true);
117
+ // Emulate IE8
118
+ Object.defineProperty(event, 'target', {
119
+ get() {},
120
+ });
121
+ Object.defineProperty(event, 'srcElement', {
122
+ get() {
123
+ return div;
124
+ },
125
+ });
126
+ div.dispatchEvent(event);
127
51
- expect(syntheticEvent.target).toBe(target);
52
- expect(syntheticEvent.type).toBe(undefined);
128
+ event = document.createEvent('Event');
129
+ event.initEvent('paste', true, true);
130
+ // Emulate IE8
131
+ Object.defineProperty(event, 'target', {
132
+ get() {},
133
+ });
134
+ Object.defineProperty(event, 'srcElement', {
135
+ get() {
136
+ return div;
137
+ },
138
+ });
139
+ div.dispatchEvent(event);
140
+
141
+ expect(expectedCount).toBe(3);
142
});
143
144
it('is able to `preventDefault` and `stopPropagation`', () => {
56
- var nativeEvent = {};
57
- var syntheticEvent = createEvent(nativeEvent);
145
+ var expectedCount = 0;
146
+
147
+ var eventHandler = event => {
148
+ expect(event.isDefaultPrevented()).toBe(false);
149
+ event.preventDefault();
150
+ expect(event.isDefaultPrevented()).toBe(true);
151
+ expect(event.isPropagationStopped()).toBe(false);
152
+ event.stopPropagation();
153
+ expect(event.isPropagationStopped()).toBe(true);
154
+ expectedCount++;
155
+ };
156
+
157
+ var div = ReactDOM.render(
158
+ <div
159
+ onCopy={eventHandler}
160
+ onCut={eventHandler}
161
+ onPaste={eventHandler}
162
+ />,
163
+ container,
164
+ );
165
59
- expect(syntheticEvent.isDefaultPrevented()).toBe(false);
60
- syntheticEvent.preventDefault();
61
- expect(syntheticEvent.isDefaultPrevented()).toBe(true);
166
+ var event;
167
+ event = document.createEvent('Event');
168
+ event.initEvent('copy', true, true);
169
+ div.dispatchEvent(event);
170
63
- expect(syntheticEvent.isPropagationStopped()).toBe(false);
64
- syntheticEvent.stopPropagation();
65
- expect(syntheticEvent.isPropagationStopped()).toBe(true);
171
+ event = document.createEvent('Event');
172
+ event.initEvent('cut', true, true);
173
+ div.dispatchEvent(event);
174
+
175
+ event = document.createEvent('Event');
176
+ event.initEvent('paste', true, true);
177
+ div.dispatchEvent(event);
178
+
179
+ expect(expectedCount).toBe(3);
180
});
181
182
it('is able to `persist`', () => {
69
- var syntheticEvent = createEvent({});
183
+ var expectedCount = 0;
184
+
185
+ const persistentEvents = [];
186
+ var eventHandler = event => {
187
+ expect(event.isPersistent()).toBe(false);
188
+ event.persist();
189
+ expect(event.isPersistent()).toBe(true);
190
+ persistentEvents.push(event);
191
+ };
192
+
193
+ var div = ReactDOM.render(
194
+ <div
195
+ onCopy={eventHandler}
196
+ onCut={eventHandler}
197
+ onPaste={eventHandler}
198
+ />,
199
+ container,
200
+ );
201
+
202
+ var event;
203
+ event = document.createEvent('Event');
204
+ event.initEvent('copy', true, true);
205
+ div.dispatchEvent(event);
206
+
207
+ event = document.createEvent('Event');
208
+ event.initEvent('cut', true, true);
209
+ div.dispatchEvent(event);
210
+
211
+ event = document.createEvent('Event');
212
+ event.initEvent('paste', true, true);
213
+ div.dispatchEvent(event);
214
71
- expect(syntheticEvent.isPersistent()).toBe(false);
72
- syntheticEvent.persist();
73
- expect(syntheticEvent.isPersistent()).toBe(true);
215
+ expect(persistentEvents.length).toBe(3);
216
+ expect(persistentEvents[0].type).toBe('copy');
217
+ expect(persistentEvents[1].type).toBe('cut');
218
+ expect(persistentEvents[2].type).toBe('paste');
219
});
220
});
221
});