Add unit tests to dom-event-testing-library (#17680)
Unit tests for the simple event mocks
Nicolas Gallagher committed
Dec 20, 2019 at 16:35 UTC
31350237fab02cad8c2610ff72196e807d12618f
5 files changed
+387
-12
packages/dom-event-testing-library/__tests__/__snapshots__/index-test.internal.js.snap
new
+15
@@ -0,0 +1,15 @@
1
+// Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent provides boolean to tests 1`] = `false`;
4
+
5
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: mouse 1`] = `"mouse"`;
6
+
7
+exports[`describeWithPointerEvent: MouseEvent/TouchEvent testWithPointerType: touch 1`] = `"touch"`;
8
+
9
+exports[`describeWithPointerEvent: PointerEvent provides boolean to tests 1`] = `true`;
10
+
11
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: mouse 1`] = `"mouse"`;
12
+
13
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: pen 1`] = `"pen"`;
14
+
15
+exports[`describeWithPointerEvent: PointerEvent testWithPointerType: touch 1`] = `"touch"`;
packages/dom-event-testing-library/__tests__/index-test.internal.js
new
+361
@@ -0,0 +1,361 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+import {defaultBrowserChromeSize} from '../constants';
13
+
14
+import {
15
+ createEventTarget,
16
+ describeWithPointerEvent,
17
+ testWithPointerType,
18
+ resetActivePointers,
19
+} from '../index';
20
+
21
+/**
22
+ * Unit test helpers
23
+ */
24
+describeWithPointerEvent('describeWithPointerEvent', pointerEvent => {
25
+ test('provides boolean to tests', () => {
26
+ expect(pointerEvent).toMatchSnapshot();
27
+ });
28
+
29
+ testWithPointerType('testWithPointerType', pointerType => {
30
+ expect(pointerType).toMatchSnapshot();
31
+ });
32
+});
33
+
34
+/**
35
+ * createEventTarget
36
+ */
37
+describe('createEventTarget', () => {
38
+ let node;
39
+ beforeEach(() => {
40
+ node = document.createElement('div');
41
+ });
42
+
43
+ afterEach(() => {
44
+ node = null;
45
+ resetActivePointers();
46
+ });
47
+
48
+ test('returns expected API', () => {
49
+ const target = createEventTarget(node);
50
+ expect(target.node).toEqual(node);
51
+ expect(Object.keys(target)).toMatchInlineSnapshot(`
52
+ Array [
53
+ "node",
54
+ "blur",
55
+ "click",
56
+ "focus",
57
+ "keydown",
58
+ "keyup",
59
+ "scroll",
60
+ "virtualclick",
61
+ "contextmenu",
62
+ "pointercancel",
63
+ "pointerdown",
64
+ "pointerhover",
65
+ "pointermove",
66
+ "pointerenter",
67
+ "pointerexit",
68
+ "pointerup",
69
+ "tap",
70
+ "setBoundingClientRect",
71
+ ]
72
+ `);
73
+ });
74
+
75
+ /**
76
+ * Simple events
77
+ */
78
+
79
+ describe('.blur()', () => {
80
+ test('default', () => {
81
+ const target = createEventTarget(node);
82
+ node.addEventListener('blur', e => {
83
+ expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
84
+ });
85
+ target.blur();
86
+ });
87
+
88
+ test('custom payload', () => {
89
+ const target = createEventTarget(node);
90
+ node.addEventListener('blur', e => {
91
+ expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
92
+ });
93
+ target.blur();
94
+ });
95
+ });
96
+
97
+ describe('.click()', () => {
98
+ test('default', () => {
99
+ const target = createEventTarget(node);
100
+ node.addEventListener('click', e => {
101
+ expect(e.altKey).toEqual(false);
102
+ expect(e.button).toEqual(0);
103
+ expect(e.buttons).toEqual(0);
104
+ expect(e.clientX).toEqual(0);
105
+ expect(e.clientY).toEqual(0);
106
+ expect(e.ctrlKey).toEqual(false);
107
+ expect(e.detail).toEqual(1);
108
+ expect(typeof e.getModifierState).toEqual('function');
109
+ expect(e.metaKey).toEqual(false);
110
+ expect(e.movementX).toEqual(0);
111
+ expect(e.movementY).toEqual(0);
112
+ expect(e.offsetX).toEqual(0);
113
+ expect(e.offsetY).toEqual(0);
114
+ expect(e.pageX).toEqual(0);
115
+ expect(e.pageY).toEqual(0);
116
+ expect(typeof e.preventDefault).toEqual('function');
117
+ expect(e.screenX).toEqual(0);
118
+ expect(e.screenY).toEqual(defaultBrowserChromeSize);
119
+ expect(e.shiftKey).toEqual(false);
120
+ expect(typeof e.timeStamp).toEqual('number');
121
+ });
122
+ target.click();
123
+ });
124
+
125
+ test('custom payload', () => {
126
+ const target = createEventTarget(node);
127
+ node.addEventListener('click', e => {
128
+ expect(e.altKey).toEqual(true);
129
+ expect(e.button).toEqual(1);
130
+ expect(e.buttons).toEqual(4);
131
+ expect(e.clientX).toEqual(10);
132
+ expect(e.clientY).toEqual(20);
133
+ expect(e.ctrlKey).toEqual(true);
134
+ expect(e.metaKey).toEqual(true);
135
+ expect(e.movementX).toEqual(1);
136
+ expect(e.movementY).toEqual(2);
137
+ expect(e.offsetX).toEqual(5);
138
+ expect(e.offsetY).toEqual(5);
139
+ expect(e.pageX).toEqual(50);
140
+ expect(e.pageY).toEqual(50);
141
+ expect(e.screenX).toEqual(10);
142
+ expect(e.screenY).toEqual(20 + defaultBrowserChromeSize);
143
+ expect(e.shiftKey).toEqual(true);
144
+ });
145
+ target.click({
146
+ altKey: true,
147
+ button: 1,
148
+ buttons: 4,
149
+ x: 10,
150
+ y: 20,
151
+ ctrlKey: true,
152
+ metaKey: true,
153
+ movementX: 1,
154
+ movementY: 2,
155
+ offsetX: 5,
156
+ offsetY: 5,
157
+ pageX: 50,
158
+ pageY: 50,
159
+ shiftKey: true,
160
+ });
161
+ });
162
+ });
163
+
164
+ describe('.focus()', () => {
165
+ test('default', () => {
166
+ const target = createEventTarget(node);
167
+ node.addEventListener('focus', e => {
168
+ expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
169
+ });
170
+ target.blur();
171
+ });
172
+
173
+ test('custom payload', () => {
174
+ const target = createEventTarget(node);
175
+ node.addEventListener('focus', e => {
176
+ expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
177
+ });
178
+ target.blur();
179
+ });
180
+ });
181
+
182
+ describe('.keydown()', () => {
183
+ test('default', () => {
184
+ const target = createEventTarget(node);
185
+ node.addEventListener('keydown', e => {
186
+ expect(e.altKey).toEqual(false);
187
+ expect(e.ctrlKey).toEqual(false);
188
+ expect(typeof e.getModifierState).toEqual('function');
189
+ expect(e.key).toEqual('');
190
+ expect(e.metaKey).toEqual(false);
191
+ expect(typeof e.preventDefault).toEqual('function');
192
+ expect(e.shiftKey).toEqual(false);
193
+ expect(typeof e.timeStamp).toEqual('number');
194
+ });
195
+ target.keydown();
196
+ });
197
+
198
+ test('custom payload', () => {
199
+ const target = createEventTarget(node);
200
+ node.addEventListener('keydown', e => {
201
+ expect(e.altKey).toEqual(true);
202
+ expect(e.ctrlKey).toEqual(true);
203
+ expect(e.isComposing).toEqual(true);
204
+ expect(e.key).toEqual('Enter');
205
+ expect(e.metaKey).toEqual(true);
206
+ expect(e.shiftKey).toEqual(true);
207
+ });
208
+ target.keydown({
209
+ altKey: true,
210
+ ctrlKey: true,
211
+ isComposing: true,
212
+ key: 'Enter',
213
+ metaKey: true,
214
+ shiftKey: true,
215
+ });
216
+ });
217
+ });
218
+
219
+ describe('.keyup()', () => {
220
+ test('default', () => {
221
+ const target = createEventTarget(node);
222
+ node.addEventListener('keyup', e => {
223
+ expect(e.altKey).toEqual(false);
224
+ expect(e.ctrlKey).toEqual(false);
225
+ expect(typeof e.getModifierState).toEqual('function');
226
+ expect(e.key).toEqual('');
227
+ expect(e.metaKey).toEqual(false);
228
+ expect(typeof e.preventDefault).toEqual('function');
229
+ expect(e.shiftKey).toEqual(false);
230
+ expect(typeof e.timeStamp).toEqual('number');
231
+ });
232
+ target.keydown();
233
+ });
234
+
235
+ test('custom payload', () => {
236
+ const target = createEventTarget(node);
237
+ node.addEventListener('keyup', e => {
238
+ expect(e.altKey).toEqual(true);
239
+ expect(e.ctrlKey).toEqual(true);
240
+ expect(e.isComposing).toEqual(true);
241
+ expect(e.key).toEqual('Enter');
242
+ expect(e.metaKey).toEqual(true);
243
+ expect(e.shiftKey).toEqual(true);
244
+ });
245
+ target.keyup({
246
+ altKey: true,
247
+ ctrlKey: true,
248
+ isComposing: true,
249
+ key: 'Enter',
250
+ metaKey: true,
251
+ shiftKey: true,
252
+ });
253
+ });
254
+ });
255
+
256
+ describe('.scroll()', () => {
257
+ test('default', () => {
258
+ const target = createEventTarget(node);
259
+ node.addEventListener('scroll', e => {
260
+ expect(e.type).toEqual('scroll');
261
+ });
262
+ target.scroll();
263
+ });
264
+ });
265
+
266
+ describe('.virtualclick()', () => {
267
+ test('default', () => {
268
+ const target = createEventTarget(node);
269
+ node.addEventListener('click', e => {
270
+ expect(e.altKey).toEqual(false);
271
+ expect(e.button).toEqual(0);
272
+ expect(e.buttons).toEqual(0);
273
+ expect(e.clientX).toEqual(0);
274
+ expect(e.clientY).toEqual(0);
275
+ expect(e.ctrlKey).toEqual(false);
276
+ expect(e.detail).toEqual(0);
277
+ expect(typeof e.getModifierState).toEqual('function');
278
+ expect(e.metaKey).toEqual(false);
279
+ expect(e.movementX).toEqual(0);
280
+ expect(e.movementY).toEqual(0);
281
+ expect(e.offsetX).toEqual(0);
282
+ expect(e.offsetY).toEqual(0);
283
+ expect(e.pageX).toEqual(0);
284
+ expect(e.pageY).toEqual(0);
285
+ expect(typeof e.preventDefault).toEqual('function');
286
+ expect(e.screenX).toEqual(0);
287
+ expect(e.screenY).toEqual(0);
288
+ expect(e.shiftKey).toEqual(false);
289
+ expect(typeof e.timeStamp).toEqual('number');
290
+ });
291
+ target.virtualclick();
292
+ });
293
+
294
+ test('custom payload', () => {
295
+ const target = createEventTarget(node);
296
+ node.addEventListener('click', e => {
297
+ // expect most of the custom payload to be ignored
298
+ expect(e.altKey).toEqual(true);
299
+ expect(e.button).toEqual(1);
300
+ expect(e.buttons).toEqual(0);
301
+ expect(e.clientX).toEqual(0);
302
+ expect(e.clientY).toEqual(0);
303
+ expect(e.ctrlKey).toEqual(true);
304
+ expect(e.detail).toEqual(0);
305
+ expect(e.metaKey).toEqual(true);
306
+ expect(e.pageX).toEqual(0);
307
+ expect(e.pageY).toEqual(0);
308
+ expect(e.screenX).toEqual(0);
309
+ expect(e.screenY).toEqual(0);
310
+ expect(e.shiftKey).toEqual(true);
311
+ });
312
+ target.virtualclick({
313
+ altKey: true,
314
+ button: 1,
315
+ buttons: 4,
316
+ x: 10,
317
+ y: 20,
318
+ ctrlKey: true,
319
+ metaKey: true,
320
+ pageX: 50,
321
+ pageY: 50,
322
+ shiftKey: true,
323
+ });
324
+ });
325
+ });
326
+
327
+ /**
328
+ * Complex event sequences
329
+ *
330
+ * ...coming soon
331
+ */
332
+
333
+ /**
334
+ * Other APIs
335
+ */
336
+
337
+ test('.setBoundingClientRect()', () => {
338
+ const target = createEventTarget(node);
339
+ expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
340
+ Object {
341
+ "bottom": 0,
342
+ "height": 0,
343
+ "left": 0,
344
+ "right": 0,
345
+ "top": 0,
346
+ "width": 0,
347
+ }
348
+ `);
349
+ target.setBoundingClientRect({x: 10, y: 20, width: 100, height: 200});
350
+ expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
351
+ Object {
352
+ "bottom": 220,
353
+ "height": 200,
354
+ "left": 10,
355
+ "right": 110,
356
+ "top": 20,
357
+ "width": 100,
358
+ }
359
+ `);
360
+ });
361
+});
packages/dom-event-testing-library/domEvents.js
+3
-2
@@ -231,7 +231,7 @@ function createTouchEvent(type, payload) {
231
*/
232
233
export function blur({relatedTarget} = {}) {
234
- return createEvent('blur', {relatedTarget});
234
+ return new FocusEvent('blur', {relatedTarget});
235
}
236
237
export function click(payload) {
@@ -256,7 +256,7 @@ export function dragstart(payload) {
256
}
257
258
export function focus({relatedTarget} = {}) {
259
- return createEvent('focus', {relatedTarget});
259
+ return new FocusEvent('focus', {relatedTarget});
260
}
261
262
export function scroll() {
@@ -265,6 +265,7 @@ export function scroll() {
265
266
export function virtualclick(payload) {
267
return createMouseEvent('click', {
268
+ button: 0,
269
...payload,
270
buttons: 0,
271
detail: 0,
packages/dom-event-testing-library/index.js
+7
-10
@@ -18,7 +18,7 @@ import {describeWithPointerEvent, testWithPointerType} from './testHelpers';
18
const createEventTarget = node => ({
19
node,
20
/**
21
- * General events abstraction.
21
+ * Simple events abstraction.
22
*/
23
blur(payload) {
24
node.dispatchEvent(domEvents.blur(payload));
@@ -26,25 +26,19 @@ const createEventTarget = node => ({
26
click(payload) {
27
node.dispatchEvent(domEvents.click(payload));
28
},
29
- contextmenu(payload, options) {
30
- domEventSequences.contextmenu(node, payload, options);
31
- },
29
focus(payload) {
30
node.dispatchEvent(domEvents.focus(payload));
31
node.focus();
32
},
36
- scroll(payload) {
37
- node.dispatchEvent(domEvents.scroll(payload));
38
- },
39
- /**
40
- * KeyboardEvent abstraction.
41
- */
33
keydown(payload) {
34
node.dispatchEvent(domEvents.keydown(payload));
35
},
36
keyup(payload) {
37
node.dispatchEvent(domEvents.keyup(payload));
38
},
39
+ scroll(payload) {
40
+ node.dispatchEvent(domEvents.scroll(payload));
41
+ },
42
virtualclick(payload) {
43
node.dispatchEvent(domEvents.virtualclick(payload));
44
},
@@ -53,6 +47,9 @@ const createEventTarget = node => ({
47
* Dispatches the expected sequence of PointerEvents, MouseEvents, and
48
* TouchEvents for a given environment.
49
*/
50
+ contextmenu(payload, options) {
51
+ domEventSequences.contextmenu(node, payload, options);
52
+ },
53
// node no longer receives events for the pointer
54
pointercancel(payload) {
55
domEventSequences.pointercancel(node, payload);
scripts/shared/pathsByLanguageVersion.js
+1
@@ -12,6 +12,7 @@ const esNextPaths = [
12
'packages/*/*.js',
13
// Source files
14
'packages/*/src/**/*.js',
15
+ 'packages/dom-event-testing-library/**/*.js',
16
'packages/react-interactions/**/*.js',
17
'packages/react-interactions/**/*.js',
18
'packages/legacy-events/**/*.js',