From ae27d3a61336027e24c862596614a332804ec0b3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 26 Mar 2020 11:17:00 -0700
Subject: [PATCH] Add a test for updating the fallback

---
 ...tSuspenseWithNoopRenderer-test.internal.js | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
index 1fd71e3cfc5e..55793fb6c3b3 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
@@ -3108,6 +3108,81 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  it(
+    'fallback component can update itself even after a high pri update to ' +
+      'the primary tree suspends',
+    async () => {
+      const {useState} = React;
+      const root = ReactNoop.createRoot();
+
+      let setAppText;
+      function App() {
+        const [text, _setText] = useState('A');
+        setAppText = _setText;
+        return (
+          <>
+            <Suspense fallback={<Fallback />}>
+              <AsyncText text={text} />
+            </Suspense>
+          </>
+        );
+      }
+
+      let setFallbackText;
+      function Fallback() {
+        const [text, _setText] = useState('Loading...');
+        setFallbackText = _setText;
+        return <Text text={text} />;
+      }
+
+      // Resolve the initial tree
+      await resolveText('A');
+      await ReactNoop.act(async () => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['A']);
+      expect(root).toMatchRenderedOutput(<span prop="A" />);
+
+      // Schedule an update inside the Suspense boundary that suspends.
+      await ReactNoop.act(async () => {
+        setAppText('B');
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...']);
+      // Commit the placeholder
+      await advanceTimers(250);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      // Schedule a high pri update on the boundary, and a lower pri update
+      // on the fallback. We're testing to make sure the fallback can still
+      // update even though the primary tree is suspended.
+      await ReactNoop.act(async () => {
+        ReactNoop.discreteUpdates(() => {
+          setAppText('C');
+        });
+        setFallbackText('Still loading...');
+      });
+
+      expect(Scheduler).toHaveYielded([
+        // First try to update the suspended tree. It's still suspended.
+        'Suspend! [C]',
+        'Loading...',
+        // Then complete the update to the fallback.
+        'Still loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Still loading..." />
+        </>,
+      );
+    },
+  );
+
   it(
     'regression: primary fragment fiber is not always part of setState ' +
       'return path',