f5a3158a78 · samitouri/QOS-React-1

@@ -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]);

Convert ReactDOMEventPropagation to createRoot (#28177)