From 0a97b1cfb67385ac42fa22318b1ec0b5bd5aa404 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 27 Jan 2024 14:07:56 +0100
Subject: [PATCH 1/3] Convert useFocusWithin to createRoot

---
 .../__tests__/useFocusWithin-test.internal.js | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index 4d2cd4304151f..bd889113b55cd 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -13,7 +13,6 @@ import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
 
 let React;
 let ReactFeatureFlags;
-let ReactDOM;
 let ReactDOMClient;
 let useFocusWithin;
 let act;
@@ -25,7 +24,6 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableScopeAPI = true;
   ReactFeatureFlags.enableCreateEventHandleAPI = true;
   React = require('react');
-  ReactDOM = require('react-dom');
   ReactDOMClient = require('react-dom/client');
   act = require('internal-test-utils').act;
 
@@ -42,6 +40,7 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];
 describe.each(table)(`useFocus`, hasPointerEvents => {
   let container;
   let container2;
+  let root;
 
   beforeEach(() => {
     initializeModules(hasPointerEvents);
@@ -49,10 +48,14 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
     document.body.appendChild(container);
     container2 = document.createElement('div');
     document.body.appendChild(container2);
+    root = ReactDOMClient.createRoot(container);
   });
 
-  afterEach(() => {
-    ReactDOM.render(null, container);
+  afterEach(async () => {
+    await act(() => {
+      root.render(null);
+    });
+
     document.body.removeChild(container);
     document.body.removeChild(container2);
     container = null;
@@ -75,7 +78,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         return <div ref={focusWithinRef} />;
       };
       await act(() => {
-        ReactDOM.render(<Component />, container);
+        root.render(<Component />);
       });
     };
 
@@ -111,7 +114,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       innerRef = React.createRef();
       innerRef2 = React.createRef();
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
     };
 
@@ -188,7 +191,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       innerRef = React.createRef();
       innerRef2 = React.createRef();
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
     };
 
@@ -314,7 +317,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       );
     };
     await act(() => {
-      ReactDOM.render(<Component />, container);
+      root.render(<Component />);
     });
 
     const target = createEventTarget(inputRef.current);
@@ -354,7 +357,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       };
 
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
 
       const inner = innerRef.current;
@@ -363,7 +366,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       target.focus();
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
-      ReactDOM.render(<Component show={false} />, container);
+      await act(() => {
+        root.render(<Component show={false} />);
+      });
+
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledWith(
@@ -391,7 +397,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       };
 
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
 
       const inner = innerRef.current;
@@ -400,7 +406,11 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       target.focus();
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
-      ReactDOM.render(<Component show={false} />, container);
+
+      await act(() => {
+        root.render(<Component show={false} />);
+      });
+
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledWith(
@@ -433,13 +443,16 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       };
 
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
 
       inputRef.current.focus();
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
-      ReactDOM.render(<Component show={false} />, container);
+      await act(() => {
+        root.render(<Component show={false} />);
+      });
+
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
     });
@@ -469,7 +482,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       };
 
       await act(() => {
-        ReactDOM.render(<Component show={true} />, container);
+        root.render(<Component show={true} />);
       });
 
       const inner = innerRef.current;
@@ -477,7 +490,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       target.keydown({key: 'Tab'});
       target.focus();
       await act(() => {
-        ReactDOM.render(<Component show={false} />, container);
+        root.render(<Component show={false} />);
       });
       expect(targetNodes).toEqual([targetNode]);
     });
@@ -512,10 +525,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOMClient.createRoot(container2);
+      const root2 = ReactDOMClient.createRoot(container2);
 
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
       expect(container2.innerHTML).toBe('<div><input></div>');
 
@@ -528,7 +541,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
 
       suspend = true;
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
       expect(container2.innerHTML).toBe(
         '<div><input style="display: none;">Loading...</div>',
@@ -569,10 +582,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOMClient.createRoot(container2);
+      const root2 = ReactDOMClient.createRoot(container2);
 
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
 
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
@@ -580,13 +593,13 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
 
       suspend = true;
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
 
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
@@ -594,7 +607,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       buttonRef.current.focus();
       suspend = false;
       await act(() => {
-        root.render(<Component />);
+        root2.render(<Component />);
       });
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);

From eceadd91be54ed310c0c84fccae1164b766565b2 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 27 Jan 2024 14:59:05 +0100
Subject: [PATCH 2/3] Fix infinite suspense

---
 .../__tests__/useFocusWithin-test.internal.js          | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index bd889113b55cd..b410f1b8868ee 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -548,7 +548,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       );
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
-      resolve();
+      await act(() => {
+        suspend = false;
+        resolve();
+      });
     });
 
     // @gate www
@@ -612,7 +615,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
 
-      resolve();
+      await act(() => {
+        suspend = false;
+        resolve();
+      });
     });
   });
 });

From 4b3f5a9c77383e75c12169f6f8e372dbb859dc88 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 28 Jan 2024 10:47:09 +0100
Subject: [PATCH 3/3] Assert after flush

---
 .../__tests__/useFocusWithin-test.internal.js                   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index b410f1b8868ee..f77dd5b779355 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -552,6 +552,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         suspend = false;
         resolve();
       });
+      expect(container2.innerHTML).toBe('<div><input style=""></div>');
     });
 
     // @gate www
@@ -619,6 +620,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         suspend = false;
         resolve();
       });
+      expect(container2.innerHTML).toBe('<div><input style=""></div>');
     });
   });
 });