From 2477384650bd184d3ac4a881130118f2636f8551 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 30 Jan 2024 09:11:58 +0100
Subject: [PATCH] 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.
---
 .../DOMPluginEventSystem-test.internal.js     | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 89110b8b56765..5c9f8e7ce388d 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -420,7 +420,8 @@ describe('DOMPluginEventSystem', () => {
           expect(log[9]).toEqual(['bubble', buttonElement]);
         });
 
-        it('handle propagation of click events between disjointed legacy comment roots', () => {
+        // @gate !disableCommentsAsDOMContainers
+        it('handle propagation of click events between disjointed comment roots', async () => {
           const buttonRef = React.createRef();
           const divRef = React.createRef();
           const log = [];
@@ -454,19 +455,29 @@ describe('DOMPluginEventSystem', () => {
           const disjointedNode = document.createComment(
             ' react-mount-point-unstable ',
           );
-          ReactDOM.render(<Parent />, container);
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
           buttonRef.current.appendChild(disjointedNode);
-          ReactDOM.render(<Child />, disjointedNode);
+          const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
+          await act(() => {
+            disjointedNodeRoot.render(<Child />);
+          });
 
           const buttonElement = buttonRef.current;
-          dispatchClickEvent(buttonElement);
+          await act(() => {
+            dispatchClickEvent(buttonElement);
+          });
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
           const divElement = divRef.current;
-          dispatchClickEvent(divElement);
+          await act(() => {
+            dispatchClickEvent(divElement);
+          });
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
           expect(log[2]).toEqual(['capture', buttonElement]);
@@ -475,7 +486,8 @@ describe('DOMPluginEventSystem', () => {
           expect(log[5]).toEqual(['bubble', buttonElement]);
         });
 
-        it('handle propagation of click events between disjointed legacy comment roots #2', () => {
+        // @gate !disableCommentsAsDOMContainers
+        it('handle propagation of click events between disjointed comment roots #2', async () => {
           const buttonRef = React.createRef();
           const divRef = React.createRef();
           const spanRef = React.createRef();
@@ -511,19 +523,29 @@ describe('DOMPluginEventSystem', () => {
           const disjointedNode = document.createComment(
             ' react-mount-point-unstable ',
           );
-          ReactDOM.render(<Parent />, container);
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
           spanRef.current.appendChild(disjointedNode);
-          ReactDOM.render(<Child />, disjointedNode);
+          const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
+          await act(() => {
+            disjointedNodeRoot.render(<Child />);
+          });
 
           const buttonElement = buttonRef.current;
-          dispatchClickEvent(buttonElement);
+          await act(() => {
+            dispatchClickEvent(buttonElement);
+          });
           expect(onClick).toHaveBeenCalledTimes(1);
           expect(onClickCapture).toHaveBeenCalledTimes(1);
           expect(log[0]).toEqual(['capture', buttonElement]);
           expect(log[1]).toEqual(['bubble', buttonElement]);
 
           const divElement = divRef.current;
-          dispatchClickEvent(divElement);
+          await act(() => {
+            dispatchClickEvent(divElement);
+          });
           expect(onClick).toHaveBeenCalledTimes(3);
           expect(onClickCapture).toHaveBeenCalledTimes(3);
           expect(log[2]).toEqual(['capture', buttonElement]);
@@ -2854,8 +2876,8 @@ describe('DOMPluginEventSystem', () => {
             document.body.removeChild(container2);
           });
 
-          // @gate www
-          it('handle propagation of click events between disjointed legacy comment roots', async () => {
+          // @gate !disableCommentsAsDOMContainers
+          it('handle propagation of click events between disjointed comment roots', async () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
             const log = [];
@@ -2902,12 +2924,15 @@ describe('DOMPluginEventSystem', () => {
             const disjointedNode = document.createComment(
               ' react-mount-point-unstable ',
             );
+            const root = ReactDOMClient.createRoot(container);
             await act(() => {
-              ReactDOM.render(<Parent />, container);
+              root.render(<Parent />);
             });
             buttonRef.current.appendChild(disjointedNode);
+            const disjointedNodeRoot =
+              ReactDOMClient.createRoot(disjointedNode);
             await act(() => {
-              ReactDOM.render(<Child />, disjointedNode);
+              disjointedNodeRoot.render(<Child />);
             });
 
             const buttonElement = buttonRef.current;