From 683d2f3618dfa67efac379a18537a4f89b2e1747 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Sun, 26 Mar 2023 18:00:00 -0400 Subject: [PATCH] Fix test that was gated by a TODO In #26450, @gnoff wrote a test for a suspensey stylesheet update that gets interrupted. It was broken because of behavior that wasn't implemented yet, but has now been fixed by my previous commits. I re-enabled the test and added some comments. There was one assertion that was slightly wrong and I fixed that too. --- .../src/__tests__/ReactDOMFloat-test.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 7c9e3e75dc533..5bdca5d43f1f8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -2939,7 +2939,6 @@ body { ); }); - // @gate TODO it('can interrupt a suspended commit with a new update', async () => { function App({children}) { return ( @@ -2949,9 +2948,13 @@ body { ); } const root = ReactDOMClient.createRoot(document); + + // Do an initial render. This means subsequent insertions will suspend, + // unless they are wrapped inside a fresh Suspense boundary. root.render(); await waitForAll([]); + // Insert a stylesheet. This will suspend because it's a transition. React.startTransition(() => { root.render( @@ -2961,6 +2964,7 @@ body { ); }); await waitForAll([]); + // Although the commit suspended, a preload was inserted. expect(getMeaningfulChildren(document)).toEqual( @@ -2970,6 +2974,9 @@ body { , ); + // Before the stylesheet has loaded, do an urgent update. This will insert a + // different stylesheet, and cancel the first one. This stylesheet will not + // suspend, even though it hasn't loaded, because it's an urgent update. root.render( hello2 @@ -2978,6 +2985,9 @@ body { , ); await waitForAll([]); + + // The bar stylesheet was inserted. There's still a "foo" preload, even + // though that update was superseded. expect(getMeaningfulChildren(document)).toEqual( @@ -2989,9 +2999,10 @@ body { , ); - // Even though foo was preloaded we don't see the stylesheet insert because the commit was cancelled. - // If we do a followup render that tries to recommit that resource it will insert right away because - // the preload is already loaded + // When "foo" finishes loading, nothing happens, because "foo" was not + // included in the last root update. However, if we insert "foo" again + // later, it should immediately commit without suspending, because it's + // been preloaded. loadPreloads(['foo']); assertLog(['load preload: foo']); expect(getMeaningfulChildren(document)).toEqual( @@ -3005,6 +3016,7 @@ body { , ); + // Now insert "foo" again. React.startTransition(() => { root.render( @@ -3015,6 +3027,7 @@ body { ); }); await waitForAll([]); + // Commits without suspending because "foo" was preloaded. expect(getMeaningfulChildren(document)).toEqual( @@ -3023,7 +3036,7 @@ body { - hello2 + hello3 , );