Skip to content

Commit

Permalink
Fix test that was gated by a TODO
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
acdlite committed Mar 26, 2023
1 parent ea26d2b commit 683d2f3
Showing 1 changed file with 18 additions and 5 deletions.
23 changes: 18 additions & 5 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2939,7 +2939,6 @@ body {
);
});

// @gate TODO
it('can interrupt a suspended commit with a new update', async () => {
function App({children}) {
return (
Expand All @@ -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(<App />);
await waitForAll([]);

// Insert a stylesheet. This will suspend because it's a transition.
React.startTransition(() => {
root.render(
<App>
Expand All @@ -2961,6 +2964,7 @@ body {
);
});
await waitForAll([]);
// Although the commit suspended, a preload was inserted.
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
Expand All @@ -2970,6 +2974,9 @@ body {
</html>,
);

// 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(
<App>
hello2
Expand All @@ -2978,6 +2985,9 @@ body {
</App>,
);
await waitForAll([]);

// The bar stylesheet was inserted. There's still a "foo" preload, even
// though that update was superseded.
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
Expand All @@ -2989,9 +2999,10 @@ body {
</html>,
);

// 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(
Expand All @@ -3005,6 +3016,7 @@ body {
</html>,
);

// Now insert "foo" again.
React.startTransition(() => {
root.render(
<App>
Expand All @@ -3015,6 +3027,7 @@ body {
);
});
await waitForAll([]);
// Commits without suspending because "foo" was preloaded.
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
Expand All @@ -3023,7 +3036,7 @@ body {
<link rel="preload" href="foo" as="style" />
<link rel="preload" href="bar" as="style" />
</head>
<body>hello2</body>
<body>hello3</body>
</html>,
);

Expand Down

0 comments on commit 683d2f3

Please sign in to comment.