From d81d74b2361248471ccca6f08595000a83a8a622 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 26 Apr 2019 20:04:28 +0100
Subject: [PATCH] Add test coverage for nested Suspense

---
 .../__snapshots__/store-test.js.snap          | 174 +++++++++++++++++
 src/__tests__/store-test.js                   | 176 ++++++++++++++++++
 2 files changed, 350 insertions(+)

diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap
index 1a620db0c4..39bddd9b58 100644
--- a/src/__tests__/__snapshots__/store-test.js.snap
+++ b/src/__tests__/__snapshots__/store-test.js.snap
@@ -138,6 +138,180 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper
 
 exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
 
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Loading key="Parent Fallback">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Loading key="Suspense 1 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 2 Fallback">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component key="Outside">
+    ▾ <Suspense>
+        <Component key="Unrelated at Start">
+      ▾ <Suspense>
+          <Component key="Suspense 1 Content">
+      ▾ <Suspense>
+          <Component key="Suspense 2 Content">
+      ▾ <Suspense>
+          <Loading key="Suspense 3 Fallback">
+        <Component key="Unrelated at End">
+`;
+
 exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
 [root]
   ▾ <Root>
diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js
index 55b20b4cdc..067448426c 100644
--- a/src/__tests__/store-test.js
+++ b/src/__tests__/store-test.js
@@ -163,6 +163,182 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('2: resolved');
     });
 
+    it('should support nested Suspense nodes', () => {
+      const Component = () => null;
+      const Loading = () => <div>Loading...</div>;
+      const Never = () => {
+        throw new Promise(() => {});
+      };
+
+      const Wrapper = ({
+        suspendFirst = false,
+        suspendSecond = false,
+        suspendParent = false,
+      }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense fallback={<Loading key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense fallback={<Loading key="Suspense 1 Fallback" />}>
+              {suspendFirst ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 1 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 2 Fallback" />}>
+              {suspendSecond ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 2 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense fallback={<Loading key="Suspense 3 Fallback" />}>
+              <Never />
+            </React.Suspense>
+            {suspendParent && <Never />}
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('1: third child is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('2: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('3: second and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('4: first and third child are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={true}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('5: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('6: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('7: only third child is suspended');
+
+      // HACK There's only one renderer for this test
+      const rendererID = Object.keys(agent._rendererInterfaces)[0];
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: true,
+        })
+      );
+      expect(store).toMatchSnapshot('8: first and third child are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: true,
+        })
+      );
+      expect(store).toMatchSnapshot('9: parent is suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('10: parent is suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: false,
+        })
+      );
+      expect(store).toMatchSnapshot('11: all children are suspended');
+      act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: false,
+        })
+      );
+      expect(store).toMatchSnapshot('12: all children are suspended');
+      act(() =>
+        ReactDOM.render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('13: third child is suspended');
+    });
+
     it('should support collapsing parts of the tree', () => {
       const Grandparent = ({ count }) => (
         <React.Fragment>