Fix test that was gated by a TODO

In facebook#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.
acdlite · Mar 26, 2023 · 683d2f3 · 683d2f3
1 parent ea26d2b
commit 683d2f3
Showing 1 changed file with 18 additions and 5 deletions.
diff --git 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(<App />);
  await waitForAll([]);
 
+ // Insert a stylesheet. This will suspend because it's a transition.
  React.startTransition(() => {
  root.render(
  <App>
@@ -2961,6 +2964,7 @@ body {
  );
  });
  await waitForAll([]);
+ // Although the commit suspended, a preload was inserted.
  expect(getMeaningfulChildren(document)).toEqual(
  <html>
  <head>
@@ -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
@@ -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>
@@ -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(
@@ -3005,6 +3016,7 @@ body {
  </html>,
  );
 
+ // Now insert "foo" again.
  React.startTransition(() => {
  root.render(
  <App>
@@ -3015,6 +3027,7 @@ body {
  );
  });
  await waitForAll([]);
+ // Commits without suspending because "foo" was preloaded.
  expect(getMeaningfulChildren(document)).toEqual(
  <html>
  <head>
@@ -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>,
  );