@samitouri / QOS-React / commits / f5a3158a78

Convert ReactDOMEventPropagation to createRoot (#28177)

Sebastian Silbermann committed Feb 4, 2024 at 11:29 UTC f5a3158a784ad9677d071004b37b100f26c6c4e3
1 file changed +249 -234
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+249 -234
@@ -9,45 +9,55 @@
9
10 describe('ReactDOMEventListener', () => {
11 let React;
12 - let OuterReactDOM;
12 + let OuterReactDOMClient;
13 let InnerReactDOM;
14 + let InnerReactDOMClient;
15 + let act;
16 let container;
17 + let root;
18
19 beforeEach(() => {
20 window.TextEvent = function () {};
21 jest.resetModules();
22 jest.isolateModules(() => {
23 React = require('react');
21 - OuterReactDOM = require('react-dom');
24 + act = require('internal-test-utils').act;
25 + OuterReactDOMClient = require('react-dom/client');
26 });
27 jest.isolateModules(() => {
28 InnerReactDOM = require('react-dom');
29 + InnerReactDOMClient = require('react-dom/client');
30 });
26 - expect(OuterReactDOM).not.toBe(InnerReactDOM);
31 + expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);
32 });
33
29 - afterEach(() => {
30 - cleanup();
34 + afterEach(async () => {
35 + await cleanup();
36 });
37
33 - function cleanup() {
38 + async function cleanup() {
39 if (container) {
35 - OuterReactDOM.unmountComponentAtNode(container);
40 + await act(() => {
41 + root.unmount();
42 + });
43 document.body.removeChild(container);
44 container = null;
45 }
46 }
47
41 - function render(tree) {
42 - cleanup();
48 + async function render(tree) {
49 + await cleanup();
50 container = document.createElement('div');
51 document.body.appendChild(container);
45 - OuterReactDOM.render(tree, container);
52 + root = OuterReactDOMClient.createRoot(container);
53 + await act(() => {
54 + root.render(tree);
55 + });
56 }
57
58 describe('bubbling events', () => {
49 - it('onAnimationEnd', () => {
50 - testNativeBubblingEvent({
59 + it('onAnimationEnd', async () => {
60 + await testNativeBubblingEvent({
61 type: 'div',
62 reactEvent: 'onAnimationEnd',
63 reactEventType: 'animationend',
@@ -63,8 +73,8 @@ describe('ReactDOMEventListener', () => {
73 });
74 });
75
66 - it('onAnimationIteration', () => {
67 - testNativeBubblingEvent({
76 + it('onAnimationIteration', async () => {
77 + await testNativeBubblingEvent({
78 type: 'div',
79 reactEvent: 'onAnimationIteration',
80 reactEventType: 'animationiteration',
@@ -80,8 +90,8 @@ describe('ReactDOMEventListener', () => {
90 });
91 });
92
83 - it('onAnimationStart', () => {
84 - testNativeBubblingEvent({
93 + it('onAnimationStart', async () => {
94 + await testNativeBubblingEvent({
95 type: 'div',
96 reactEvent: 'onAnimationStart',
97 reactEventType: 'animationstart',
@@ -97,8 +107,8 @@ describe('ReactDOMEventListener', () => {
107 });
108 });
109
100 - it('onAuxClick', () => {
101 - testNativeBubblingEvent({
110 + it('onAuxClick', async () => {
111 + await testNativeBubblingEvent({
112 type: 'div',
113 reactEvent: 'onAuxClick',
114 reactEventType: 'auxclick',
@@ -114,8 +124,8 @@ describe('ReactDOMEventListener', () => {
124 });
125 });
126
117 - it('onBlur', () => {
118 - testNativeBubblingEvent({
127 + it('onBlur', async () => {
128 + await testNativeBubblingEvent({
129 type: 'input',
130 reactEvent: 'onBlur',
131 reactEventType: 'blur',
@@ -134,8 +144,8 @@ describe('ReactDOMEventListener', () => {
144 // because we emulate the React 16 behavior where
145 // the click handler is attached to the document.
146 // @gate !enableLegacyFBSupport
137 - it('onClick', () => {
138 - testNativeBubblingEvent({
147 + it('onClick', async () => {
148 + await testNativeBubblingEvent({
149 type: 'div',
150 reactEvent: 'onClick',
151 reactEventType: 'click',
@@ -146,8 +156,8 @@ describe('ReactDOMEventListener', () => {
156 });
157 });
158
149 - it('onContextMenu', () => {
150 - testNativeBubblingEvent({
159 + it('onContextMenu', async () => {
160 + await testNativeBubblingEvent({
161 type: 'div',
162 reactEvent: 'onContextMenu',
163 reactEventType: 'contextmenu',
@@ -163,8 +173,8 @@ describe('ReactDOMEventListener', () => {
173 });
174 });
175
166 - it('onCopy', () => {
167 - testNativeBubblingEvent({
176 + it('onCopy', async () => {
177 + await testNativeBubblingEvent({
178 type: 'div',
179 reactEvent: 'onCopy',
180 reactEventType: 'copy',
@@ -180,8 +190,8 @@ describe('ReactDOMEventListener', () => {
190 });
191 });
192
183 - it('onCut', () => {
184 - testNativeBubblingEvent({
193 + it('onCut', async () => {
194 + await testNativeBubblingEvent({
195 type: 'div',
196 reactEvent: 'onCut',
197 reactEventType: 'cut',
@@ -197,8 +207,8 @@ describe('ReactDOMEventListener', () => {
207 });
208 });
209
200 - it('onDoubleClick', () => {
201 - testNativeBubblingEvent({
210 + it('onDoubleClick', async () => {
211 + await testNativeBubblingEvent({
212 type: 'div',
213 reactEvent: 'onDoubleClick',
214 reactEventType: 'dblclick',
@@ -214,8 +224,8 @@ describe('ReactDOMEventListener', () => {
224 });
225 });
226
217 - it('onDrag', () => {
218 - testNativeBubblingEvent({
227 + it('onDrag', async () => {
228 + await testNativeBubblingEvent({
229 type: 'div',
230 reactEvent: 'onDrag',
231 reactEventType: 'drag',
@@ -231,8 +241,8 @@ describe('ReactDOMEventListener', () => {
241 });
242 });
243
234 - it('onDragEnd', () => {
235 - testNativeBubblingEvent({
244 + it('onDragEnd', async () => {
245 + await testNativeBubblingEvent({
246 type: 'div',
247 reactEvent: 'onDragEnd',
248 reactEventType: 'dragend',
@@ -248,8 +258,8 @@ describe('ReactDOMEventListener', () => {
258 });
259 });
260
251 - it('onDragEnter', () => {
252 - testNativeBubblingEvent({
261 + it('onDragEnter', async () => {
262 + await testNativeBubblingEvent({
263 type: 'div',
264 reactEvent: 'onDragEnter',
265 reactEventType: 'dragenter',
@@ -265,8 +275,8 @@ describe('ReactDOMEventListener', () => {
275 });
276 });
277
268 - it('onDragExit', () => {
269 - testNativeBubblingEvent({
278 + it('onDragExit', async () => {
279 + await testNativeBubblingEvent({
280 type: 'div',
281 reactEvent: 'onDragExit',
282 reactEventType: 'dragexit',
@@ -282,8 +292,8 @@ describe('ReactDOMEventListener', () => {
292 });
293 });
294
285 - it('onDragLeave', () => {
286 - testNativeBubblingEvent({
295 + it('onDragLeave', async () => {
296 + await testNativeBubblingEvent({
297 type: 'div',
298 reactEvent: 'onDragLeave',
299 reactEventType: 'dragleave',
@@ -299,8 +309,8 @@ describe('ReactDOMEventListener', () => {
309 });
310 });
311
302 - it('onDragOver', () => {
303 - testNativeBubblingEvent({
312 + it('onDragOver', async () => {
313 + await testNativeBubblingEvent({
314 type: 'div',
315 reactEvent: 'onDragOver',
316 reactEventType: 'dragover',
@@ -316,8 +326,8 @@ describe('ReactDOMEventListener', () => {
326 });
327 });
328
319 - it('onDragStart', () => {
320 - testNativeBubblingEvent({
329 + it('onDragStart', async () => {
330 + await testNativeBubblingEvent({
331 type: 'div',
332 reactEvent: 'onDragStart',
333 reactEventType: 'dragstart',
@@ -333,8 +343,8 @@ describe('ReactDOMEventListener', () => {
343 });
344 });
345
336 - it('onDrop', () => {
337 - testNativeBubblingEvent({
346 + it('onDrop', async () => {
347 + await testNativeBubblingEvent({
348 type: 'div',
349 reactEvent: 'onDrop',
350 reactEventType: 'drop',
@@ -350,8 +360,8 @@ describe('ReactDOMEventListener', () => {
360 });
361 });
362
353 - it('onFocus', () => {
354 - testNativeBubblingEvent({
363 + it('onFocus', async () => {
364 + await testNativeBubblingEvent({
365 type: 'input',
366 reactEvent: 'onFocus',
367 reactEventType: 'focus',
@@ -366,8 +376,8 @@ describe('ReactDOMEventListener', () => {
376 });
377 });
378
369 - it('onGotPointerCapture', () => {
370 - testNativeBubblingEvent({
379 + it('onGotPointerCapture', async () => {
380 + await testNativeBubblingEvent({
381 type: 'div',
382 reactEvent: 'onGotPointerCapture',
383 reactEventType: 'gotpointercapture',
@@ -383,8 +393,8 @@ describe('ReactDOMEventListener', () => {
393 });
394 });
395
386 - it('onKeyDown', () => {
387 - testNativeBubblingEvent({
396 + it('onKeyDown', async () => {
397 + await testNativeBubblingEvent({
398 type: 'input',
399 reactEvent: 'onKeyDown',
400 reactEventType: 'keydown',
@@ -400,8 +410,8 @@ describe('ReactDOMEventListener', () => {
410 });
411 });
412
403 - it('onKeyPress', () => {
404 - testNativeBubblingEvent({
413 + it('onKeyPress', async () => {
414 + await testNativeBubblingEvent({
415 type: 'input',
416 reactEvent: 'onKeyPress',
417 reactEventType: 'keypress',
@@ -418,8 +428,8 @@ describe('ReactDOMEventListener', () => {
428 });
429 });
430
421 - it('onKeyUp', () => {
422 - testNativeBubblingEvent({
431 + it('onKeyUp', async () => {
432 + await testNativeBubblingEvent({
433 type: 'input',
434 reactEvent: 'onKeyUp',
435 reactEventType: 'keyup',
@@ -435,8 +445,8 @@ describe('ReactDOMEventListener', () => {
445 });
446 });
447
438 - it('onLostPointerCapture', () => {
439 - testNativeBubblingEvent({
448 + it('onLostPointerCapture', async () => {
449 + await testNativeBubblingEvent({
450 type: 'div',
451 reactEvent: 'onLostPointerCapture',
452 reactEventType: 'lostpointercapture',
@@ -452,8 +462,8 @@ describe('ReactDOMEventListener', () => {
462 });
463 });
464
455 - it('onMouseDown', () => {
456 - testNativeBubblingEvent({
465 + it('onMouseDown', async () => {
466 + await testNativeBubblingEvent({
467 type: 'div',
468 reactEvent: 'onMouseDown',
469 reactEventType: 'mousedown',
@@ -469,8 +479,8 @@ describe('ReactDOMEventListener', () => {
479 });
480 });
481
472 - it('onMouseOut', () => {
473 - testNativeBubblingEvent({
482 + it('onMouseOut', async () => {
483 + await testNativeBubblingEvent({
484 type: 'div',
485 reactEvent: 'onMouseOut',
486 reactEventType: 'mouseout',
@@ -486,8 +496,8 @@ describe('ReactDOMEventListener', () => {
496 });
497 });
498
489 - it('onMouseOver', () => {
490 - testNativeBubblingEvent({
499 + it('onMouseOver', async () => {
500 + await testNativeBubblingEvent({
501 type: 'div',
502 reactEvent: 'onMouseOver',
503 reactEventType: 'mouseover',
@@ -503,8 +513,8 @@ describe('ReactDOMEventListener', () => {
513 });
514 });
515
506 - it('onMouseUp', () => {
507 - testNativeBubblingEvent({
516 + it('onMouseUp', async () => {
517 + await testNativeBubblingEvent({
518 type: 'div',
519 reactEvent: 'onMouseUp',
520 reactEventType: 'mouseup',
@@ -520,8 +530,8 @@ describe('ReactDOMEventListener', () => {
530 });
531 });
532
523 - it('onPaste', () => {
524 - testNativeBubblingEvent({
533 + it('onPaste', async () => {
534 + await testNativeBubblingEvent({
535 type: 'div',
536 reactEvent: 'onPaste',
537 reactEventType: 'paste',
@@ -537,8 +547,8 @@ describe('ReactDOMEventListener', () => {
547 });
548 });
549
540 - it('onPointerCancel', () => {
541 - testNativeBubblingEvent({
550 + it('onPointerCancel', async () => {
551 + await testNativeBubblingEvent({
552 type: 'div',
553 reactEvent: 'onPointerCancel',
554 reactEventType: 'pointercancel',
@@ -554,8 +564,8 @@ describe('ReactDOMEventListener', () => {
564 });
565 });
566
557 - it('onPointerDown', () => {
558 - testNativeBubblingEvent({
567 + it('onPointerDown', async () => {
568 + await testNativeBubblingEvent({
569 type: 'div',
570 reactEvent: 'onPointerDown',
571 reactEventType: 'pointerdown',
@@ -571,8 +581,8 @@ describe('ReactDOMEventListener', () => {
581 });
582 });
583
574 - it('onPointerMove', () => {
575 - testNativeBubblingEvent({
584 + it('onPointerMove', async () => {
585 + await testNativeBubblingEvent({
586 type: 'div',
587 reactEvent: 'onPointerMove',
588 reactEventType: 'pointermove',
@@ -588,8 +598,8 @@ describe('ReactDOMEventListener', () => {
598 });
599 });
600
591 - it('onPointerOut', () => {
592 - testNativeBubblingEvent({
601 + it('onPointerOut', async () => {
602 + await testNativeBubblingEvent({
603 type: 'div',
604 reactEvent: 'onPointerOut',
605 reactEventType: 'pointerout',
@@ -605,8 +615,8 @@ describe('ReactDOMEventListener', () => {
615 });
616 });
617
608 - it('onPointerOver', () => {
609 - testNativeBubblingEvent({
618 + it('onPointerOver', async () => {
619 + await testNativeBubblingEvent({
620 type: 'div',
621 reactEvent: 'onPointerOver',
622 reactEventType: 'pointerover',
@@ -622,8 +632,8 @@ describe('ReactDOMEventListener', () => {
632 });
633 });
634
625 - it('onPointerUp', () => {
626 - testNativeBubblingEvent({
635 + it('onPointerUp', async () => {
636 + await testNativeBubblingEvent({
637 type: 'div',
638 reactEvent: 'onPointerUp',
639 reactEventType: 'pointerup',
@@ -639,8 +649,8 @@ describe('ReactDOMEventListener', () => {
649 });
650 });
651
642 - it('onReset', () => {
643 - testNativeBubblingEvent({
652 + it('onReset', async () => {
653 + await testNativeBubblingEvent({
654 type: 'form',
655 reactEvent: 'onReset',
656 reactEventType: 'reset',
@@ -655,8 +665,8 @@ describe('ReactDOMEventListener', () => {
665 });
666 });
667
658 - it('onSubmit', () => {
659 - testNativeBubblingEvent({
668 + it('onSubmit', async () => {
669 + await testNativeBubblingEvent({
670 type: 'form',
671 reactEvent: 'onSubmit',
672 reactEventType: 'submit',
@@ -671,8 +681,8 @@ describe('ReactDOMEventListener', () => {
681 });
682 });
683
674 - it('onTouchCancel', () => {
675 - testNativeBubblingEvent({
684 + it('onTouchCancel', async () => {
685 + await testNativeBubblingEvent({
686 type: 'div',
687 reactEvent: 'onTouchCancel',
688 reactEventType: 'touchcancel',
@@ -688,8 +698,8 @@ describe('ReactDOMEventListener', () => {
698 });
699 });
700
691 - it('onTouchEnd', () => {
692 - testNativeBubblingEvent({
701 + it('onTouchEnd', async () => {
702 + await testNativeBubblingEvent({
703 type: 'div',
704 reactEvent: 'onTouchEnd',
705 reactEventType: 'touchend',
@@ -705,8 +715,8 @@ describe('ReactDOMEventListener', () => {
715 });
716 });
717
708 - it('onTouchMove', () => {
709 - testNativeBubblingEvent({
718 + it('onTouchMove', async () => {
719 + await testNativeBubblingEvent({
720 type: 'div',
721 reactEvent: 'onTouchMove',
722 reactEventType: 'touchmove',
@@ -722,8 +732,8 @@ describe('ReactDOMEventListener', () => {
732 });
733 });
734
725 - it('onTouchStart', () => {
726 - testNativeBubblingEvent({
735 + it('onTouchStart', async () => {
736 + await testNativeBubblingEvent({
737 type: 'div',
738 reactEvent: 'onTouchStart',
739 reactEventType: 'touchstart',
@@ -739,8 +749,8 @@ describe('ReactDOMEventListener', () => {
749 });
750 });
751
742 - it('onTransitionEnd', () => {
743 - testNativeBubblingEvent({
752 + it('onTransitionEnd', async () => {
753 + await testNativeBubblingEvent({
754 type: 'div',
755 reactEvent: 'onTransitionEnd',
756 reactEventType: 'transitionend',
@@ -756,8 +766,8 @@ describe('ReactDOMEventListener', () => {
766 });
767 });
768
759 - it('onWheel', () => {
760 - testNativeBubblingEvent({
769 + it('onWheel', async () => {
770 + await testNativeBubblingEvent({
771 type: 'div',
772 reactEvent: 'onWheel',
773 reactEventType: 'wheel',
@@ -775,8 +785,8 @@ describe('ReactDOMEventListener', () => {
785 });
786
787 describe('non-bubbling events that bubble in React', () => {
778 - it('onAbort', () => {
779 - testEmulatedBubblingEvent({
788 + it('onAbort', async () => {
789 + await testEmulatedBubblingEvent({
790 type: 'video',
791 reactEvent: 'onAbort',
792 reactEventType: 'abort',
@@ -791,8 +801,8 @@ describe('ReactDOMEventListener', () => {
801 });
802 });
803
794 - it('onCancel', () => {
795 - testEmulatedBubblingEvent({
804 + it('onCancel', async () => {
805 + await testEmulatedBubblingEvent({
806 type: 'dialog',
807 reactEvent: 'onCancel',
808 reactEventType: 'cancel',
@@ -807,8 +817,8 @@ describe('ReactDOMEventListener', () => {
817 });
818 });
819
810 - it('onCanPlay', () => {
811 - testEmulatedBubblingEvent({
820 + it('onCanPlay', async () => {
821 + await testEmulatedBubblingEvent({
822 type: 'video',
823 reactEvent: 'onCanPlay',
824 reactEventType: 'canplay',
@@ -823,8 +833,8 @@ describe('ReactDOMEventListener', () => {
833 });
834 });
835
826 - it('onCanPlayThrough', () => {
827 - testEmulatedBubblingEvent({
836 + it('onCanPlayThrough', async () => {
837 + await testEmulatedBubblingEvent({
838 type: 'video',
839 reactEvent: 'onCanPlayThrough',
840 reactEventType: 'canplaythrough',
@@ -839,8 +849,8 @@ describe('ReactDOMEventListener', () => {
849 });
850 });
851
842 - it('onClose', () => {
843 - testEmulatedBubblingEvent({
852 + it('onClose', async () => {
853 + await testEmulatedBubblingEvent({
854 type: 'dialog',
855 reactEvent: 'onClose',
856 reactEventType: 'close',
@@ -855,8 +865,8 @@ describe('ReactDOMEventListener', () => {
865 });
866 });
867
858 - it('onDurationChange', () => {
859 - testEmulatedBubblingEvent({
868 + it('onDurationChange', async () => {
869 + await testEmulatedBubblingEvent({
870 type: 'video',
871 reactEvent: 'onDurationChange',
872 reactEventType: 'durationchange',
@@ -871,8 +881,8 @@ describe('ReactDOMEventListener', () => {
881 });
882 });
883
874 - it('onEmptied', () => {
875 - testEmulatedBubblingEvent({
884 + it('onEmptied', async () => {
885 + await testEmulatedBubblingEvent({
886 type: 'video',
887 reactEvent: 'onEmptied',
888 reactEventType: 'emptied',
@@ -887,8 +897,8 @@ describe('ReactDOMEventListener', () => {
897 });
898 });
899
890 - it('onEncrypted', () => {
891 - testEmulatedBubblingEvent({
900 + it('onEncrypted', async () => {
901 + await testEmulatedBubblingEvent({
902 type: 'video',
903 reactEvent: 'onEncrypted',
904 reactEventType: 'encrypted',
@@ -903,8 +913,8 @@ describe('ReactDOMEventListener', () => {
913 });
914 });
915
906 - it('onEnded', () => {
907 - testEmulatedBubblingEvent({
916 + it('onEnded', async () => {
917 + await testEmulatedBubblingEvent({
918 type: 'video',
919 reactEvent: 'onEnded',
920 reactEventType: 'ended',
@@ -919,8 +929,8 @@ describe('ReactDOMEventListener', () => {
929 });
930 });
931
922 - it('onError', () => {
923 - testEmulatedBubblingEvent({
932 + it('onError', async () => {
933 + await testEmulatedBubblingEvent({
934 type: 'img',
935 reactEvent: 'onError',
936 reactEventType: 'error',
@@ -935,8 +945,8 @@ describe('ReactDOMEventListener', () => {
945 });
946 });
947
938 - it('onInvalid', () => {
939 - testEmulatedBubblingEvent({
948 + it('onInvalid', async () => {
949 + await testEmulatedBubblingEvent({
950 type: 'input',
951 reactEvent: 'onInvalid',
952 reactEventType: 'invalid',
@@ -951,8 +961,8 @@ describe('ReactDOMEventListener', () => {
961 });
962 });
963
954 - it('onLoad', () => {
955 - testEmulatedBubblingEvent({
964 + it('onLoad', async () => {
965 + await testEmulatedBubblingEvent({
966 type: 'img',
967 reactEvent: 'onLoad',
968 reactEventType: 'load',
@@ -967,8 +977,8 @@ describe('ReactDOMEventListener', () => {
977 });
978 });
979
970 - it('onLoadedData', () => {
971 - testEmulatedBubblingEvent({
980 + it('onLoadedData', async () => {
981 + await testEmulatedBubblingEvent({
982 type: 'video',
983 reactEvent: 'onLoadedData',
984 reactEventType: 'loadeddata',
@@ -983,8 +993,8 @@ describe('ReactDOMEventListener', () => {
993 });
994 });
995
986 - it('onLoadedMetadata', () => {
987 - testEmulatedBubblingEvent({
996 + it('onLoadedMetadata', async () => {
997 + await testEmulatedBubblingEvent({
998 type: 'video',
999 reactEvent: 'onLoadedMetadata',
1000 reactEventType: 'loadedmetadata',
@@ -999,8 +1009,8 @@ describe('ReactDOMEventListener', () => {
1009 });
1010 });
1011
1002 - it('onLoadStart', () => {
1003 - testEmulatedBubblingEvent({
1012 + it('onLoadStart', async () => {
1013 + await testEmulatedBubblingEvent({
1014 type: 'video',
1015 reactEvent: 'onLoadStart',
1016 reactEventType: 'loadstart',
@@ -1015,8 +1025,8 @@ describe('ReactDOMEventListener', () => {
1025 });
1026 });
1027
1018 - it('onPause', () => {
1019 - testEmulatedBubblingEvent({
1028 + it('onPause', async () => {
1029 + await testEmulatedBubblingEvent({
1030 type: 'video',
1031 reactEvent: 'onPause',
1032 reactEventType: 'pause',
@@ -1031,8 +1041,8 @@ describe('ReactDOMEventListener', () => {
1041 });
1042 });
1043
1034 - it('onPlay', () => {
1035 - testEmulatedBubblingEvent({
1044 + it('onPlay', async () => {
1045 + await testEmulatedBubblingEvent({
1046 type: 'video',
1047 reactEvent: 'onPlay',
1048 reactEventType: 'play',
@@ -1047,8 +1057,8 @@ describe('ReactDOMEventListener', () => {
1057 });
1058 });
1059
1050 - it('onPlaying', () => {
1051 - testEmulatedBubblingEvent({
1060 + it('onPlaying', async () => {
1061 + await testEmulatedBubblingEvent({
1062 type: 'video',
1063 reactEvent: 'onPlaying',
1064 reactEventType: 'playing',
@@ -1063,8 +1073,8 @@ describe('ReactDOMEventListener', () => {
1073 });
1074 });
1075
1066 - it('onProgress', () => {
1067 - testEmulatedBubblingEvent({
1076 + it('onProgress', async () => {
1077 + await testEmulatedBubblingEvent({
1078 type: 'video',
1079 reactEvent: 'onProgress',
1080 reactEventType: 'progress',
@@ -1079,8 +1089,8 @@ describe('ReactDOMEventListener', () => {
1089 });
1090 });
1091
1082 - it('onRateChange', () => {
1083 - testEmulatedBubblingEvent({
1092 + it('onRateChange', async () => {
1093 + await testEmulatedBubblingEvent({
1094 type: 'video',
1095 reactEvent: 'onRateChange',
1096 reactEventType: 'ratechange',
@@ -1095,8 +1105,8 @@ describe('ReactDOMEventListener', () => {
1105 });
1106 });
1107
1098 - it('onResize', () => {
1099 - testEmulatedBubblingEvent({
1108 + it('onResize', async () => {
1109 + await testEmulatedBubblingEvent({
1110 type: 'video',
1111 reactEvent: 'onResize',
1112 reactEventType: 'resize',
@@ -1111,8 +1121,8 @@ describe('ReactDOMEventListener', () => {
1121 });
1122 });
1123
1114 - it('onSeeked', () => {
1115 - testEmulatedBubblingEvent({
1124 + it('onSeeked', async () => {
1125 + await testEmulatedBubblingEvent({
1126 type: 'video',
1127 reactEvent: 'onSeeked',
1128 reactEventType: 'seeked',
@@ -1127,8 +1137,8 @@ describe('ReactDOMEventListener', () => {
1137 });
1138 });
1139
1130 - it('onSeeking', () => {
1131 - testEmulatedBubblingEvent({
1140 + it('onSeeking', async () => {
1141 + await testEmulatedBubblingEvent({
1142 type: 'video',
1143 reactEvent: 'onSeeking',
1144 reactEventType: 'seeking',
@@ -1143,8 +1153,8 @@ describe('ReactDOMEventListener', () => {
1153 });
1154 });
1155
1146 - it('onStalled', () => {
1147 - testEmulatedBubblingEvent({
1156 + it('onStalled', async () => {
1157 + await testEmulatedBubblingEvent({
1158 type: 'video',
1159 reactEvent: 'onStalled',
1160 reactEventType: 'stalled',
@@ -1159,8 +1169,8 @@ describe('ReactDOMEventListener', () => {
1169 });
1170 });
1171
1162 - it('onSuspend', () => {
1163 - testEmulatedBubblingEvent({
1172 + it('onSuspend', async () => {
1173 + await testEmulatedBubblingEvent({
1174 type: 'video',
1175 reactEvent: 'onSuspend',
1176 reactEventType: 'suspend',
@@ -1175,8 +1185,8 @@ describe('ReactDOMEventListener', () => {
1185 });
1186 });
1187
1178 - it('onTimeUpdate', () => {
1179 - testEmulatedBubblingEvent({
1188 + it('onTimeUpdate', async () => {
1189 + await testEmulatedBubblingEvent({
1190 type: 'video',
1191 reactEvent: 'onTimeUpdate',
1192 reactEventType: 'timeupdate',
@@ -1191,8 +1201,8 @@ describe('ReactDOMEventListener', () => {
1201 });
1202 });
1203
1194 - it('onToggle', () => {
1195 - testEmulatedBubblingEvent({
1204 + it('onToggle', async () => {
1205 + await testEmulatedBubblingEvent({
1206 type: 'details',
1207 reactEvent: 'onToggle',
1208 reactEventType: 'toggle',
@@ -1207,8 +1217,8 @@ describe('ReactDOMEventListener', () => {
1217 });
1218 });
1219
1210 - it('onVolumeChange', () => {
1211 - testEmulatedBubblingEvent({
1220 + it('onVolumeChange', async () => {
1221 + await testEmulatedBubblingEvent({
1222 type: 'video',
1223 reactEvent: 'onVolumeChange',
1224 reactEventType: 'volumechange',
@@ -1223,8 +1233,8 @@ describe('ReactDOMEventListener', () => {
1233 });
1234 });
1235
1226 - it('onWaiting', () => {
1227 - testEmulatedBubblingEvent({
1236 + it('onWaiting', async () => {
1237 + await testEmulatedBubblingEvent({
1238 type: 'video',
1239 reactEvent: 'onWaiting',
1240 reactEventType: 'waiting',
@@ -1241,8 +1251,8 @@ describe('ReactDOMEventListener', () => {
1251 });
1252
1253 describe('non-bubbling events that do not bubble in React', () => {
1244 - it('onScroll', () => {
1245 - testNonBubblingEvent({
1254 + it('onScroll', async () => {
1255 + await testNonBubblingEvent({
1256 type: 'div',
1257 reactEvent: 'onScroll',
1258 reactEventType: 'scroll',
@@ -1257,8 +1267,8 @@ describe('ReactDOMEventListener', () => {
1267 });
1268 });
1269
1260 - it('onScrollEnd', () => {
1261 - testNonBubblingEvent({
1270 + it('onScrollEnd', async () => {
1271 + await testNonBubblingEvent({
1272 type: 'div',
1273 reactEvent: 'onScrollEnd',
1274 reactEventType: 'scrollend',
@@ -1279,10 +1289,10 @@ describe('ReactDOMEventListener', () => {
1289 // work very well across different roots. For now, we'll
1290 // just document the current state in these tests.
1291 describe('enter/leave events', () => {
1282 - it('onMouseEnter and onMouseLeave', () => {
1292 + it('onMouseEnter and onMouseLeave', async () => {
1293 const log = [];
1294 const targetRef = React.createRef();
1285 - render(
1295 + await render(
1296 <Fixture
1297 type="div"
1298 targetRef={targetRef}
@@ -1352,10 +1362,10 @@ describe('ReactDOMEventListener', () => {
1362 `);
1363 });
1364
1355 - it('onPointerEnter and onPointerLeave', () => {
1365 + it('onPointerEnter and onPointerLeave', async () => {
1366 const log = [];
1367 const targetRef = React.createRef();
1358 - render(
1368 + await render(
1369 <Fixture
1370 type="div"
1371 targetRef={targetRef}
@@ -1436,10 +1446,10 @@ describe('ReactDOMEventListener', () => {
1446 // work very well across different roots. For now, we'll
1447 // just document the current state in these tests.
1448 describe('polyfilled events', () => {
1439 - it('onBeforeInput', () => {
1449 + it('onBeforeInput', async () => {
1450 const log = [];
1451 const targetRef = React.createRef();
1442 - render(
1452 + await render(
1453 <Fixture
1454 type="input"
1455 targetRef={targetRef}
@@ -1499,10 +1509,10 @@ describe('ReactDOMEventListener', () => {
1509 `);
1510 });
1511
1502 - it('onChange', () => {
1512 + it('onChange', async () => {
1513 const log = [];
1514 const targetRef = React.createRef();
1505 - render(
1515 + await render(
1516 <Fixture
1517 type="input"
1518 targetRef={targetRef}
@@ -1558,10 +1568,10 @@ describe('ReactDOMEventListener', () => {
1568 `);
1569 });
1570
1561 - it('onCompositionStart', () => {
1571 + it('onCompositionStart', async () => {
1572 const log = [];
1573 const targetRef = React.createRef();
1564 - render(
1574 + await render(
1575 <Fixture
1576 type="input"
1577 targetRef={targetRef}
@@ -1620,10 +1630,10 @@ describe('ReactDOMEventListener', () => {
1630 `);
1631 });
1632
1623 - it('onCompositionEnd', () => {
1633 + it('onCompositionEnd', async () => {
1634 const log = [];
1635 const targetRef = React.createRef();
1626 - render(
1636 + await render(
1637 <Fixture
1638 type="input"
1639 targetRef={targetRef}
@@ -1682,10 +1692,10 @@ describe('ReactDOMEventListener', () => {
1692 `);
1693 });
1694
1685 - it('onCompositionUpdate', () => {
1695 + it('onCompositionUpdate', async () => {
1696 const log = [];
1697 const targetRef = React.createRef();
1688 - render(
1698 + await render(
1699 <Fixture
1700 type="input"
1701 targetRef={targetRef}
@@ -1744,10 +1754,10 @@ describe('ReactDOMEventListener', () => {
1754 `);
1755 });
1756
1747 - it('onSelect', () => {
1757 + it('onSelect', async () => {
1758 const log = [];
1759 const targetRef = React.createRef();
1750 - render(
1760 + await render(
1761 <Fixture
1762 type="input"
1763 targetRef={targetRef}
@@ -1806,47 +1816,47 @@ describe('ReactDOMEventListener', () => {
1816
1817 // Events that bubble in React and in the browser.
1818 // React delegates them to the root.
1809 - function testNativeBubblingEvent(config) {
1810 - testNativeBubblingEventWithTargetListener(config);
1811 - testNativeBubblingEventWithoutTargetListener(config);
1812 - testReactStopPropagationInOuterCapturePhase(config);
1813 - testReactStopPropagationInInnerCapturePhase(config);
1814 - testReactStopPropagationInInnerBubblePhase(config);
1815 - testReactStopPropagationInOuterBubblePhase(config);
1816 - testNativeStopPropagationInOuterCapturePhase(config);
1817 - testNativeStopPropagationInInnerCapturePhase(config);
1818 - testNativeStopPropagationInInnerBubblePhase(config);
1819 - testNativeStopPropagationInOuterBubblePhase(config);
1819 + async function testNativeBubblingEvent(config) {
1820 + await testNativeBubblingEventWithTargetListener(config);
1821 + await testNativeBubblingEventWithoutTargetListener(config);
1822 + await testReactStopPropagationInOuterCapturePhase(config);
1823 + await testReactStopPropagationInInnerCapturePhase(config);
1824 + await testReactStopPropagationInInnerBubblePhase(config);
1825 + await testReactStopPropagationInOuterBubblePhase(config);
1826 + await testNativeStopPropagationInOuterCapturePhase(config);
1827 + await testNativeStopPropagationInInnerCapturePhase(config);
1828 + await testNativeStopPropagationInInnerBubblePhase(config);
1829 + await testNativeStopPropagationInOuterBubblePhase(config);
1830 }
1831
1832 // Events that bubble in React but not in the browser.
1833 // React attaches them to the elements.
1824 - function testEmulatedBubblingEvent(config) {
1825 - testEmulatedBubblingEventWithTargetListener(config);
1826 - testEmulatedBubblingEventWithoutTargetListener(config);
1827 - testReactStopPropagationInOuterCapturePhase(config);
1828 - testReactStopPropagationInInnerCapturePhase(config);
1829 - testReactStopPropagationInInnerBubblePhase(config);
1830 - testNativeStopPropagationInOuterCapturePhase(config);
1831 - testNativeStopPropagationInInnerCapturePhase(config);
1832 - testNativeStopPropagationInInnerEmulatedBubblePhase(config);
1834 + async function testEmulatedBubblingEvent(config) {
1835 + await testEmulatedBubblingEventWithTargetListener(config);
1836 + await testEmulatedBubblingEventWithoutTargetListener(config);
1837 + await testReactStopPropagationInOuterCapturePhase(config);
1838 + await testReactStopPropagationInInnerCapturePhase(config);
1839 + await testReactStopPropagationInInnerBubblePhase(config);
1840 + await testNativeStopPropagationInOuterCapturePhase(config);
1841 + await testNativeStopPropagationInInnerCapturePhase(config);
1842 + await testNativeStopPropagationInInnerEmulatedBubblePhase(config);
1843 }
1844
1845 // Events that don't bubble either in React or in the browser.
1836 - function testNonBubblingEvent(config) {
1837 - testNonBubblingEventWithTargetListener(config);
1838 - testNonBubblingEventWithoutTargetListener(config);
1839 - testReactStopPropagationInOuterCapturePhase(config);
1840 - testReactStopPropagationInInnerCapturePhase(config);
1841 - testReactStopPropagationInInnerBubblePhase(config);
1842 - testNativeStopPropagationInOuterCapturePhase(config);
1843 - testNativeStopPropagationInInnerCapturePhase(config);
1846 + async function testNonBubblingEvent(config) {
1847 + await testNonBubblingEventWithTargetListener(config);
1848 + await testNonBubblingEventWithoutTargetListener(config);
1849 + await testReactStopPropagationInOuterCapturePhase(config);
1850 + await testReactStopPropagationInInnerCapturePhase(config);
1851 + await testReactStopPropagationInInnerBubblePhase(config);
1852 + await testNativeStopPropagationInOuterCapturePhase(config);
1853 + await testNativeStopPropagationInInnerCapturePhase(config);
1854 }
1855
1846 - function testNativeBubblingEventWithTargetListener(eventConfig) {
1856 + async function testNativeBubblingEventWithTargetListener(eventConfig) {
1857 const log = [];
1858 const targetRef = React.createRef();
1849 - render(
1859 + await render(
1860 <Fixture
1861 type={eventConfig.type}
1862 targetRef={targetRef}
@@ -1900,10 +1910,10 @@ describe('ReactDOMEventListener', () => {
1910 `);
1911 }
1912
1903 - function testEmulatedBubblingEventWithTargetListener(eventConfig) {
1913 + async function testEmulatedBubblingEventWithTargetListener(eventConfig) {
1914 const log = [];
1915 const targetRef = React.createRef();
1906 - render(
1916 + await render(
1917 <Fixture
1918 type={eventConfig.type}
1919 targetRef={targetRef}
@@ -1959,10 +1969,10 @@ describe('ReactDOMEventListener', () => {
1969 `);
1970 }
1971
1962 - function testNonBubblingEventWithTargetListener(eventConfig) {
1972 + async function testNonBubblingEventWithTargetListener(eventConfig) {
1973 const log = [];
1974 const targetRef = React.createRef();
1965 - render(
1975 + await render(
1976 <Fixture
1977 type={eventConfig.type}
1978 targetRef={targetRef}
@@ -2015,10 +2025,10 @@ describe('ReactDOMEventListener', () => {
2025 `);
2026 }
2027
2018 - function testNativeBubblingEventWithoutTargetListener(eventConfig) {
2028 + async function testNativeBubblingEventWithoutTargetListener(eventConfig) {
2029 const log = [];
2030 const targetRef = React.createRef();
2021 - render(
2031 + await render(
2032 <Fixture
2033 type={eventConfig.type}
2034 targetRef={targetRef}
@@ -2067,10 +2077,10 @@ describe('ReactDOMEventListener', () => {
2077 `);
2078 }
2079
2070 - function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {
2080 + async function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {
2081 const log = [];
2082 const targetRef = React.createRef();
2073 - render(
2083 + await render(
2084 <Fixture
2085 type={eventConfig.type}
2086 targetRef={targetRef}
@@ -2121,10 +2131,10 @@ describe('ReactDOMEventListener', () => {
2131 `);
2132 }
2133
2124 - function testNonBubblingEventWithoutTargetListener(eventConfig) {
2134 + async function testNonBubblingEventWithoutTargetListener(eventConfig) {
2135 const log = [];
2136 const targetRef = React.createRef();
2127 - render(
2137 + await render(
2138 <Fixture
2139 type={eventConfig.type}
2140 targetRef={targetRef}
@@ -2172,10 +2182,10 @@ describe('ReactDOMEventListener', () => {
2182 `);
2183 }
2184
2175 - function testReactStopPropagationInOuterCapturePhase(eventConfig) {
2185 + async function testReactStopPropagationInOuterCapturePhase(eventConfig) {
2186 const log = [];
2187 const targetRef = React.createRef();
2178 - render(
2188 + await render(
2189 <Fixture
2190 type={eventConfig.type}
2191 targetRef={node => {
@@ -2235,10 +2245,10 @@ describe('ReactDOMEventListener', () => {
2245 `);
2246 }
2247
2238 - function testReactStopPropagationInInnerCapturePhase(eventConfig) {
2248 + async function testReactStopPropagationInInnerCapturePhase(eventConfig) {
2249 const log = [];
2250 const targetRef = React.createRef();
2241 - render(
2251 + await render(
2252 <Fixture
2253 type={eventConfig.type}
2254 targetRef={node => {
@@ -2299,10 +2309,10 @@ describe('ReactDOMEventListener', () => {
2309 `);
2310 }
2311
2302 - function testReactStopPropagationInInnerBubblePhase(eventConfig) {
2312 + async function testReactStopPropagationInInnerBubblePhase(eventConfig) {
2313 const log = [];
2314 const targetRef = React.createRef();
2305 - render(
2315 + await render(
2316 <Fixture
2317 type={eventConfig.type}
2318 targetRef={targetRef}
@@ -2364,10 +2374,10 @@ describe('ReactDOMEventListener', () => {
2374 `);
2375 }
2376
2367 - function testReactStopPropagationInOuterBubblePhase(eventConfig) {
2377 + async function testReactStopPropagationInOuterBubblePhase(eventConfig) {
2378 const log = [];
2379 const targetRef = React.createRef();
2370 - render(
2380 + await render(
2381 <Fixture
2382 type={eventConfig.type}
2383 targetRef={targetRef}
@@ -2421,10 +2431,10 @@ describe('ReactDOMEventListener', () => {
2431 `);
2432 }
2433
2424 - function testNativeStopPropagationInOuterCapturePhase(eventConfig) {
2434 + async function testNativeStopPropagationInOuterCapturePhase(eventConfig) {
2435 const log = [];
2436 const targetRef = React.createRef();
2427 - render(
2437 + await render(
2438 <Fixture
2439 type={eventConfig.type}
2440 targetRef={targetRef}
@@ -2489,10 +2499,10 @@ describe('ReactDOMEventListener', () => {
2499 `);
2500 }
2501
2492 - function testNativeStopPropagationInInnerCapturePhase(eventConfig) {
2502 + async function testNativeStopPropagationInInnerCapturePhase(eventConfig) {
2503 const log = [];
2504 const targetRef = React.createRef();
2495 - render(
2505 + await render(
2506 <Fixture
2507 type={eventConfig.type}
2508 targetRef={targetRef}
@@ -2559,10 +2569,10 @@ describe('ReactDOMEventListener', () => {
2569 `);
2570 }
2571
2562 - function testNativeStopPropagationInInnerBubblePhase(eventConfig) {
2572 + async function testNativeStopPropagationInInnerBubblePhase(eventConfig) {
2573 const log = [];
2574 const targetRef = React.createRef();
2565 - render(
2575 + await render(
2576 <Fixture
2577 type={eventConfig.type}
2578 targetRef={node => {
@@ -2625,10 +2635,12 @@ describe('ReactDOMEventListener', () => {
2635 `);
2636 }
2637
2628 - function testNativeStopPropagationInInnerEmulatedBubblePhase(eventConfig) {
2638 + async function testNativeStopPropagationInInnerEmulatedBubblePhase(
2639 + eventConfig,
2640 + ) {
2641 const log = [];
2642 const targetRef = React.createRef();
2631 - render(
2643 + await render(
2644 <Fixture
2645 type={eventConfig.type}
2646 targetRef={node => {
@@ -2694,10 +2706,10 @@ describe('ReactDOMEventListener', () => {
2706 `);
2707 }
2708
2697 - function testNativeStopPropagationInOuterBubblePhase(eventConfig) {
2709 + async function testNativeStopPropagationInOuterBubblePhase(eventConfig) {
2710 const log = [];
2711 const targetRef = React.createRef();
2700 - render(
2712 + await render(
2713 <Fixture
2714 type={eventConfig.type}
2715 targetRef={targetRef}
@@ -2802,9 +2814,12 @@ describe('ReactDOMEventListener', () => {
2814 const parent = ref.current;
2815 const innerContainer = document.createElement('div');
2816 parent.appendChild(innerContainer);
2805 - InnerReactDOM.render(children, innerContainer);
2817 + const innerReactRoot = InnerReactDOMClient.createRoot(innerContainer);
2818 + InnerReactDOM.flushSync(() => {
2819 + innerReactRoot.render(children);
2820 + });
2821 return () => {
2807 - InnerReactDOM.unmountComponentAtNode(innerContainer);
2822 + innerReactRoot.unmount();
2823 parent.removeChild(innerContainer);
2824 };
2825 }, [children, ref]);