Complete DOMPluginEventSystem migration to createRoot (#28148)
Follow-up to https://github.com/facebook/react/pull/28139#discussion_r1468852457 I mistakenly kept the tests using comment nodes as containers as legacy tests. It's not that comments nodes aren't allowed in createRoot entirely. Only behind `disableCommentsAsDOMContainers`. We already had one test following that pattern so I just applied the same pattern to the other tests for consistency. Now `DOMPluginEventSystem` no longer uses any legacy roots.
Sebastian Silbermann committed
Jan 30, 2024 at 09:11 UTC
2477384650bd184d3ac4a881130118f2636f8551
1 file changed
+39
-14
packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+39
-14
@@ -420,7 +420,8 @@ describe('DOMPluginEventSystem', () => {
420
expect(log[9]).toEqual(['bubble', buttonElement]);
421
});
422
423
- it('handle propagation of click events between disjointed legacy comment roots', () => {
423
+ // @gate !disableCommentsAsDOMContainers
424
+ it('handle propagation of click events between disjointed comment roots', async () => {
425
const buttonRef = React.createRef();
426
const divRef = React.createRef();
427
const log = [];
@@ -454,19 +455,29 @@ describe('DOMPluginEventSystem', () => {
455
const disjointedNode = document.createComment(
456
' react-mount-point-unstable ',
457
);
457
- ReactDOM.render(<Parent />, container);
458
+ const root = ReactDOMClient.createRoot(container);
459
+ await act(() => {
460
+ root.render(<Parent />);
461
+ });
462
buttonRef.current.appendChild(disjointedNode);
459
- ReactDOM.render(<Child />, disjointedNode);
463
+ const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
464
+ await act(() => {
465
+ disjointedNodeRoot.render(<Child />);
466
+ });
467
468
const buttonElement = buttonRef.current;
462
- dispatchClickEvent(buttonElement);
469
+ await act(() => {
470
+ dispatchClickEvent(buttonElement);
471
+ });
472
expect(onClick).toHaveBeenCalledTimes(1);
473
expect(onClickCapture).toHaveBeenCalledTimes(1);
474
expect(log[0]).toEqual(['capture', buttonElement]);
475
expect(log[1]).toEqual(['bubble', buttonElement]);
476
477
const divElement = divRef.current;
469
- dispatchClickEvent(divElement);
478
+ await act(() => {
479
+ dispatchClickEvent(divElement);
480
+ });
481
expect(onClick).toHaveBeenCalledTimes(3);
482
expect(onClickCapture).toHaveBeenCalledTimes(3);
483
expect(log[2]).toEqual(['capture', buttonElement]);
@@ -475,7 +486,8 @@ describe('DOMPluginEventSystem', () => {
486
expect(log[5]).toEqual(['bubble', buttonElement]);
487
});
488
478
- it('handle propagation of click events between disjointed legacy comment roots #2', () => {
489
+ // @gate !disableCommentsAsDOMContainers
490
+ it('handle propagation of click events between disjointed comment roots #2', async () => {
491
const buttonRef = React.createRef();
492
const divRef = React.createRef();
493
const spanRef = React.createRef();
@@ -511,19 +523,29 @@ describe('DOMPluginEventSystem', () => {
523
const disjointedNode = document.createComment(
524
' react-mount-point-unstable ',
525
);
514
- ReactDOM.render(<Parent />, container);
526
+ const root = ReactDOMClient.createRoot(container);
527
+ await act(() => {
528
+ root.render(<Parent />);
529
+ });
530
spanRef.current.appendChild(disjointedNode);
516
- ReactDOM.render(<Child />, disjointedNode);
531
+ const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
532
+ await act(() => {
533
+ disjointedNodeRoot.render(<Child />);
534
+ });
535
536
const buttonElement = buttonRef.current;
519
- dispatchClickEvent(buttonElement);
537
+ await act(() => {
538
+ dispatchClickEvent(buttonElement);
539
+ });
540
expect(onClick).toHaveBeenCalledTimes(1);
541
expect(onClickCapture).toHaveBeenCalledTimes(1);
542
expect(log[0]).toEqual(['capture', buttonElement]);
543
expect(log[1]).toEqual(['bubble', buttonElement]);
544
545
const divElement = divRef.current;
526
- dispatchClickEvent(divElement);
546
+ await act(() => {
547
+ dispatchClickEvent(divElement);
548
+ });
549
expect(onClick).toHaveBeenCalledTimes(3);
550
expect(onClickCapture).toHaveBeenCalledTimes(3);
551
expect(log[2]).toEqual(['capture', buttonElement]);
@@ -2854,8 +2876,8 @@ describe('DOMPluginEventSystem', () => {
2876
document.body.removeChild(container2);
2877
});
2878
2857
- // @gate www
2858
- it('handle propagation of click events between disjointed legacy comment roots', async () => {
2879
+ // @gate !disableCommentsAsDOMContainers
2880
+ it('handle propagation of click events between disjointed comment roots', async () => {
2881
const buttonRef = React.createRef();
2882
const divRef = React.createRef();
2883
const log = [];
@@ -2902,12 +2924,15 @@ describe('DOMPluginEventSystem', () => {
2924
const disjointedNode = document.createComment(
2925
' react-mount-point-unstable ',
2926
);
2927
+ const root = ReactDOMClient.createRoot(container);
2928
await act(() => {
2906
- ReactDOM.render(<Parent />, container);
2929
+ root.render(<Parent />);
2930
});
2931
buttonRef.current.appendChild(disjointedNode);
2932
+ const disjointedNodeRoot =
2933
+ ReactDOMClient.createRoot(disjointedNode);
2934
await act(() => {
2910
- ReactDOM.render(<Child />, disjointedNode);
2935
+ disjointedNodeRoot.render(<Child />);
2936
});
2937
2938
const buttonElement = buttonRef.current;