@samitouri / QOS-React-1 / commits / 624b51388b

Convert SyntheticKeyboardEvent-test to createRoot (#28007)

Convert SyntheticKeyboardEvent-test to createRoot

Jan Kassens committed Jan 19, 2024 at 13:36 UTC 624b51388b25143398a71e42225c612a9a785218
1 file changed +230 -203
packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js
+230 -203
@@ -10,20 +10,30 @@
10 'use strict';
11
12 let React;
13 -let ReactDOM;
13 +let ReactDOMClient;
14 +
15 +let act;
16
17 describe('SyntheticKeyboardEvent', () => {
18 let container;
19 + let root;
20
21 beforeEach(() => {
22 React = require('react');
20 - ReactDOM = require('react-dom');
23 + ReactDOMClient = require('react-dom/client');
24 +
25 + act = require('internal-test-utils').act;
26 +
27 // The container has to be attached for events to fire.
28 container = document.createElement('div');
29 + root = ReactDOMClient.createRoot(container);
30 document.body.appendChild(container);
31 });
32
26 - afterEach(() => {
33 + afterEach(async () => {
34 + await act(() => {
35 + root.unmount();
36 + });
37 document.body.removeChild(container);
38 container = null;
39 });
@@ -32,17 +42,18 @@ describe('SyntheticKeyboardEvent', () => {
42 describe('charCode', () => {
43 describe('when event is `keypress`', () => {
44 describe('when charCode is present in nativeEvent', () => {
35 - it('when charCode is 0 and keyCode is 13, returns 13', () => {
45 + it('when charCode is 0 and keyCode is 13, returns 13', async () => {
46 let charCode = null;
37 - const node = ReactDOM.render(
38 - <input
39 - onKeyPress={e => {
40 - charCode = e.charCode;
41 - }}
42 - />,
43 - container,
44 - );
45 - node.dispatchEvent(
47 + await act(() => {
48 + root.render(
49 + <input
50 + onKeyPress={e => {
51 + charCode = e.charCode;
52 + }}
53 + />,
54 + );
55 + });
56 + container.firstChild.dispatchEvent(
57 new KeyboardEvent('keypress', {
58 charCode: 0,
59 keyCode: 13,
@@ -53,17 +64,18 @@ describe('SyntheticKeyboardEvent', () => {
64 expect(charCode).toBe(13);
65 });
66
56 - it('when charCode is 32 or bigger and keyCode is missing, returns charCode', () => {
67 + it('when charCode is 32 or bigger and keyCode is missing, returns charCode', async () => {
68 let charCode = null;
58 - const node = ReactDOM.render(
59 - <input
60 - onKeyPress={e => {
61 - charCode = e.charCode;
62 - }}
63 - />,
64 - container,
65 - );
66 - node.dispatchEvent(
69 + await act(() => {
70 + root.render(
71 + <input
72 + onKeyPress={e => {
73 + charCode = e.charCode;
74 + }}
75 + />,
76 + );
77 + });
78 + container.firstChild.dispatchEvent(
79 new KeyboardEvent('keypress', {
80 charCode: 32,
81 bubbles: true,
@@ -73,17 +85,18 @@ describe('SyntheticKeyboardEvent', () => {
85 expect(charCode).toBe(32);
86 });
87
76 - it('when charCode is 13 and keyCode is missing, returns charCode', () => {
88 + it('when charCode is 13 and keyCode is missing, returns charCode', async () => {
89 let charCode = null;
78 - const node = ReactDOM.render(
79 - <input
80 - onKeyPress={e => {
81 - charCode = e.charCode;
82 - }}
83 - />,
84 - container,
85 - );
86 - node.dispatchEvent(
90 + await act(() => {
91 + root.render(
92 + <input
93 + onKeyPress={e => {
94 + charCode = e.charCode;
95 + }}
96 + />,
97 + );
98 + });
99 + container.firstChild.dispatchEvent(
100 new KeyboardEvent('keypress', {
101 charCode: 13,
102 bubbles: true,
@@ -96,17 +109,18 @@ describe('SyntheticKeyboardEvent', () => {
109 // Firefox creates a keypress event for function keys too. This removes
110 // the unwanted keypress events. Enter is however both printable and
111 // non-printable. One would expect Tab to be as well (but it isn't).
99 - it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', () => {
112 + it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', async () => {
113 let called = false;
101 - const node = ReactDOM.render(
102 - <input
103 - onKeyPress={() => {
104 - called = true;
105 - }}
106 - />,
107 - container,
108 - );
109 - node.dispatchEvent(
114 + await act(() => {
115 + root.render(
116 + <input
117 + onKeyPress={() => {
118 + called = true;
119 + }}
120 + />,
121 + );
122 + });
123 + container.firstChild.dispatchEvent(
124 new KeyboardEvent('keypress', {
125 charCode: 31,
126 bubbles: true,
@@ -116,17 +130,18 @@ describe('SyntheticKeyboardEvent', () => {
130 expect(called).toBe(false);
131 });
132
119 - it('when charCode is 10, returns 13', () => {
133 + it('when charCode is 10, returns 13', async () => {
134 let charCode = null;
121 - const node = ReactDOM.render(
122 - <input
123 - onKeyPress={e => {
124 - charCode = e.charCode;
125 - }}
126 - />,
127 - container,
128 - );
129 - node.dispatchEvent(
135 + await act(() => {
136 + root.render(
137 + <input
138 + onKeyPress={e => {
139 + charCode = e.charCode;
140 + }}
141 + />,
142 + );
143 + });
144 + container.firstChild.dispatchEvent(
145 new KeyboardEvent('keypress', {
146 charCode: 10,
147 bubbles: true,
@@ -136,17 +151,18 @@ describe('SyntheticKeyboardEvent', () => {
151 expect(charCode).toBe(13);
152 });
153
139 - it('when charCode is 10 and ctrl is pressed, returns 13', () => {
154 + it('when charCode is 10 and ctrl is pressed, returns 13', async () => {
155 let charCode = null;
141 - const node = ReactDOM.render(
142 - <input
143 - onKeyPress={e => {
144 - charCode = e.charCode;
145 - }}
146 - />,
147 - container,
148 - );
149 - node.dispatchEvent(
156 + await act(() => {
157 + root.render(
158 + <input
159 + onKeyPress={e => {
160 + charCode = e.charCode;
161 + }}
162 + />,
163 + );
164 + });
165 + container.firstChild.dispatchEvent(
166 new KeyboardEvent('keypress', {
167 charCode: 10,
168 ctrlKey: true,
@@ -181,17 +197,18 @@ describe('SyntheticKeyboardEvent', () => {
197 charCodeDescriptor = null;
198 });
199
184 - it('when keyCode is 32 or bigger, returns keyCode', () => {
200 + it('when keyCode is 32 or bigger, returns keyCode', async () => {
201 let charCode = null;
186 - const node = ReactDOM.render(
187 - <input
188 - onKeyPress={e => {
189 - charCode = e.charCode;
190 - }}
191 - />,
192 - container,
193 - );
194 - node.dispatchEvent(
202 + await act(() => {
203 + root.render(
204 + <input
205 + onKeyPress={e => {
206 + charCode = e.charCode;
207 + }}
208 + />,
209 + );
210 + });
211 + container.firstChild.dispatchEvent(
212 new KeyboardEvent('keypress', {
213 keyCode: 32,
214 bubbles: true,
@@ -201,17 +218,18 @@ describe('SyntheticKeyboardEvent', () => {
218 expect(charCode).toBe(32);
219 });
220
204 - it('when keyCode is 13, returns 13', () => {
221 + it('when keyCode is 13, returns 13', async () => {
222 let charCode = null;
206 - const node = ReactDOM.render(
207 - <input
208 - onKeyPress={e => {
209 - charCode = e.charCode;
210 - }}
211 - />,
212 - container,
213 - );
214 - node.dispatchEvent(
223 + await act(() => {
224 + root.render(
225 + <input
226 + onKeyPress={e => {
227 + charCode = e.charCode;
228 + }}
229 + />,
230 + );
231 + });
232 + container.firstChild.dispatchEvent(
233 new KeyboardEvent('keypress', {
234 keyCode: 13,
235 bubbles: true,
@@ -221,17 +239,18 @@ describe('SyntheticKeyboardEvent', () => {
239 expect(charCode).toBe(13);
240 });
241
224 - it('when keyCode is smaller than 32 and is not 13, ignores keypress', () => {
242 + it('when keyCode is smaller than 32 and is not 13, ignores keypress', async () => {
243 let called = false;
226 - const node = ReactDOM.render(
227 - <input
228 - onKeyPress={e => {
229 - called = true;
230 - }}
231 - />,
232 - container,
233 - );
234 - node.dispatchEvent(
244 + await act(() => {
245 + root.render(
246 + <input
247 + onKeyPress={e => {
248 + called = true;
249 + }}
250 + />,
251 + );
252 + });
253 + container.firstChild.dispatchEvent(
254 new KeyboardEvent('keypress', {
255 keyCode: 31,
256 bubbles: true,
@@ -244,28 +263,29 @@ describe('SyntheticKeyboardEvent', () => {
263 });
264
265 describe('when event is not `keypress`', () => {
247 - it('returns 0', () => {
266 + it('returns 0', async () => {
267 let charCodeDown = null;
268 let charCodeUp = null;
250 - const node = ReactDOM.render(
251 - <input
252 - onKeyDown={e => {
253 - charCodeDown = e.charCode;
254 - }}
255 - onKeyUp={e => {
256 - charCodeUp = e.charCode;
257 - }}
258 - />,
259 - container,
260 - );
261 - node.dispatchEvent(
269 + await act(() => {
270 + root.render(
271 + <input
272 + onKeyDown={e => {
273 + charCodeDown = e.charCode;
274 + }}
275 + onKeyUp={e => {
276 + charCodeUp = e.charCode;
277 + }}
278 + />,
279 + );
280 + });
281 + container.firstChild.dispatchEvent(
282 new KeyboardEvent('keydown', {
283 key: 'Del',
284 bubbles: true,
285 cancelable: true,
286 }),
287 );
268 - node.dispatchEvent(
288 + container.firstChild.dispatchEvent(
289 new KeyboardEvent('keyup', {
290 key: 'Del',
291 bubbles: true,
@@ -277,17 +297,18 @@ describe('SyntheticKeyboardEvent', () => {
297 });
298 });
299
280 - it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', () => {
300 + it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', async () => {
301 let charCode = null;
282 - const node = ReactDOM.render(
283 - <input
284 - onKeyDown={e => {
285 - charCode = e.charCode;
286 - }}
287 - />,
288 - container,
289 - );
290 - node.dispatchEvent(
302 + await act(() => {
303 + root.render(
304 + <input
305 + onKeyDown={e => {
306 + charCode = e.charCode;
307 + }}
308 + />,
309 + );
310 + });
311 + container.firstChild.dispatchEvent(
312 new KeyboardEvent('keydown', {
313 charCode: 31,
314 bubbles: true,
@@ -300,28 +321,29 @@ describe('SyntheticKeyboardEvent', () => {
321
322 describe('keyCode', () => {
323 describe('when event is `keydown` or `keyup`', () => {
303 - it('returns a passed keyCode', () => {
324 + it('returns a passed keyCode', async () => {
325 let keyCodeDown = null;
326 let keyCodeUp = null;
306 - const node = ReactDOM.render(
307 - <input
308 - onKeyDown={e => {
309 - keyCodeDown = e.keyCode;
310 - }}
311 - onKeyUp={e => {
312 - keyCodeUp = e.keyCode;
313 - }}
314 - />,
315 - container,
316 - );
317 - node.dispatchEvent(
327 + await act(() => {
328 + root.render(
329 + <input
330 + onKeyDown={e => {
331 + keyCodeDown = e.keyCode;
332 + }}
333 + onKeyUp={e => {
334 + keyCodeUp = e.keyCode;
335 + }}
336 + />,
337 + );
338 + });
339 + container.firstChild.dispatchEvent(
340 new KeyboardEvent('keydown', {
341 keyCode: 40,
342 bubbles: true,
343 cancelable: true,
344 }),
345 );
324 - node.dispatchEvent(
346 + container.firstChild.dispatchEvent(
347 new KeyboardEvent('keyup', {
348 keyCode: 40,
349 bubbles: true,
@@ -334,17 +356,18 @@ describe('SyntheticKeyboardEvent', () => {
356 });
357
358 describe('when event is `keypress`', () => {
337 - it('returns 0', () => {
359 + it('returns 0', async () => {
360 let keyCode = null;
339 - const node = ReactDOM.render(
340 - <input
341 - onKeyPress={e => {
342 - keyCode = e.keyCode;
343 - }}
344 - />,
345 - container,
346 - );
347 - node.dispatchEvent(
361 + await act(() => {
362 + root.render(
363 + <input
364 + onKeyPress={e => {
365 + keyCode = e.keyCode;
366 + }}
367 + />,
368 + );
369 + });
370 + container.firstChild.dispatchEvent(
371 new KeyboardEvent('keypress', {
372 charCode: 65,
373 bubbles: true,
@@ -358,19 +381,20 @@ describe('SyntheticKeyboardEvent', () => {
381
382 describe('which', () => {
383 describe('when event is `keypress`', () => {
361 - it('is consistent with `charCode`', () => {
384 + it('is consistent with `charCode`', async () => {
385 let calls = 0;
363 - const node = ReactDOM.render(
364 - <input
365 - onKeyPress={e => {
366 - expect(e.which).toBe(e.charCode);
367 - calls++;
368 - }}
369 - />,
370 - container,
371 - );
386 + await act(() => {
387 + root.render(
388 + <input
389 + onKeyPress={e => {
390 + expect(e.which).toBe(e.charCode);
391 + calls++;
392 + }}
393 + />,
394 + );
395 + });
396 // Try different combinations from other tests.
373 - node.dispatchEvent(
397 + container.firstChild.dispatchEvent(
398 new KeyboardEvent('keypress', {
399 charCode: 0,
400 keyCode: 13,
@@ -378,14 +402,14 @@ describe('SyntheticKeyboardEvent', () => {
402 cancelable: true,
403 }),
404 );
381 - node.dispatchEvent(
405 + container.firstChild.dispatchEvent(
406 new KeyboardEvent('keypress', {
407 charCode: 32,
408 bubbles: true,
409 cancelable: true,
410 }),
411 );
388 - node.dispatchEvent(
412 + container.firstChild.dispatchEvent(
413 new KeyboardEvent('keypress', {
414 charCode: 13,
415 bubbles: true,
@@ -397,50 +421,51 @@ describe('SyntheticKeyboardEvent', () => {
421 });
422
423 describe('when event is `keydown` or `keyup`', () => {
400 - it('is consistent with `keyCode`', () => {
424 + it('is consistent with `keyCode`', async () => {
425 let calls = 0;
402 - const node = ReactDOM.render(
403 - <input
404 - onKeyDown={e => {
405 - expect(e.which).toBe(e.keyCode);
406 - calls++;
407 - }}
408 - onKeyUp={e => {
409 - expect(e.which).toBe(e.keyCode);
410 - calls++;
411 - }}
412 - />,
413 - container,
414 - );
415 - node.dispatchEvent(
426 + await act(() => {
427 + root.render(
428 + <input
429 + onKeyDown={e => {
430 + expect(e.which).toBe(e.keyCode);
431 + calls++;
432 + }}
433 + onKeyUp={e => {
434 + expect(e.which).toBe(e.keyCode);
435 + calls++;
436 + }}
437 + />,
438 + );
439 + });
440 + container.firstChild.dispatchEvent(
441 new KeyboardEvent('keydown', {
442 key: 'Del',
443 bubbles: true,
444 cancelable: true,
445 }),
446 );
422 - node.dispatchEvent(
447 + container.firstChild.dispatchEvent(
448 new KeyboardEvent('keydown', {
449 charCode: 31,
450 bubbles: true,
451 cancelable: true,
452 }),
453 );
429 - node.dispatchEvent(
454 + container.firstChild.dispatchEvent(
455 new KeyboardEvent('keydown', {
456 keyCode: 40,
457 bubbles: true,
458 cancelable: true,
459 }),
460 );
436 - node.dispatchEvent(
461 + container.firstChild.dispatchEvent(
462 new KeyboardEvent('keyup', {
463 key: 'Del',
464 bubbles: true,
465 cancelable: true,
466 }),
467 );
443 - node.dispatchEvent(
468 + container.firstChild.dispatchEvent(
469 new KeyboardEvent('keyup', {
470 keyCode: 40,
471 bubbles: true,
@@ -453,39 +478,40 @@ describe('SyntheticKeyboardEvent', () => {
478 });
479
480 describe('code', () => {
456 - it('returns code on `keydown`, `keyup` and `keypress`', () => {
481 + it('returns code on `keydown`, `keyup` and `keypress`', async () => {
482 let codeDown = null;
483 let codeUp = null;
484 let codePress = null;
460 - const node = ReactDOM.render(
461 - <input
462 - onKeyDown={e => {
463 - codeDown = e.code;
464 - }}
465 - onKeyUp={e => {
466 - codeUp = e.code;
467 - }}
468 - onKeyPress={e => {
469 - codePress = e.code;
470 - }}
471 - />,
472 - container,
473 - );
474 - node.dispatchEvent(
485 + await act(() => {
486 + root.render(
487 + <input
488 + onKeyDown={e => {
489 + codeDown = e.code;
490 + }}
491 + onKeyUp={e => {
492 + codeUp = e.code;
493 + }}
494 + onKeyPress={e => {
495 + codePress = e.code;
496 + }}
497 + />,
498 + );
499 + });
500 + container.firstChild.dispatchEvent(
501 new KeyboardEvent('keydown', {
502 code: 'KeyQ',
503 bubbles: true,
504 cancelable: true,
505 }),
506 );
481 - node.dispatchEvent(
507 + container.firstChild.dispatchEvent(
508 new KeyboardEvent('keyup', {
509 code: 'KeyQ',
510 bubbles: true,
511 cancelable: true,
512 }),
513 );
488 - node.dispatchEvent(
514 + container.firstChild.dispatchEvent(
515 new KeyboardEvent('keypress', {
516 code: 'KeyQ',
517 charCode: 113,
@@ -501,7 +527,7 @@ describe('SyntheticKeyboardEvent', () => {
527 });
528
529 describe('EventInterface', () => {
504 - it('is able to `preventDefault` and `stopPropagation`', () => {
530 + it('is able to `preventDefault` and `stopPropagation`', async () => {
531 let expectedCount = 0;
532 const eventHandler = event => {
533 expect(event.isDefaultPrevented()).toBe(false);
@@ -513,30 +539,31 @@ describe('SyntheticKeyboardEvent', () => {
539 expect(event.isPropagationStopped()).toBe(true);
540 expectedCount++;
541 };
516 - const div = ReactDOM.render(
517 - <div
518 - onKeyDown={eventHandler}
519 - onKeyUp={eventHandler}
520 - onKeyPress={eventHandler}
521 - />,
522 - container,
523 - );
542 + await act(() => {
543 + root.render(
544 + <div
545 + onKeyDown={eventHandler}
546 + onKeyUp={eventHandler}
547 + onKeyPress={eventHandler}
548 + />,
549 + );
550 + });
551
525 - div.dispatchEvent(
552 + container.firstChild.dispatchEvent(
553 new KeyboardEvent('keydown', {
554 keyCode: 40,
555 bubbles: true,
556 cancelable: true,
557 }),
558 );
532 - div.dispatchEvent(
559 + container.firstChild.dispatchEvent(
560 new KeyboardEvent('keyup', {
561 keyCode: 40,
562 bubbles: true,
563 cancelable: true,
564 }),
565 );
539 - div.dispatchEvent(
566 + container.firstChild.dispatchEvent(
567 new KeyboardEvent('keypress', {
568 charCode: 40,
569 keyCode: 40,