{"body":"","parents":["d44bf272ad1ffb9adfd21de760645840ffdaec86"],"commit":{"revision":"346b628b43f24e08ee7c0f09492a292436f13324","shortRevision":"346b628b43","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2019-04-18T19:58:36+01:00","subject":"Add failing tests for Suspense with same type"},"patch":"diff --git a\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\nindex d4a4f7e466..801ad148a0 100644\n--- a\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\n@@ -115,6 +115,260 @@ exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync\n \n `;\n \n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 1`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 2`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 3`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 4`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 5`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 6`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 7`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 8`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 9`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 10`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 11`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 12`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 13`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 14`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 15`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 16`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 17`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 18`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 19`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 20`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 21`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 22`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 23`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 24`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 1: abcde 1`] = `\n [root]\n ▾ \ndiff --git a\/src\/__tests__\/storeStressSync-test.js b\/src\/__tests__\/storeStressSync-test.js\nindex 30f48d9a26..54d60ef13e 100644\n--- a\/src\/__tests__\/storeStressSync-test.js\n+++ b\/src\/__tests__\/storeStressSync-test.js\n@@ -663,4 +663,440 @@ describe('StoreStress (Sync Mode)', () => {\n }\n }\n });\n+\n+ it('should handle a stress test for Suspense without type change (Sync Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = ;\n+ const b = ;\n+ const c = ;\n+ const z = ;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ {c}{a}<\/React.Fragment>,\n+
{c}{a}<\/div>,\n+
{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const MaybeSuspend = ({ children, suspend }) => {\n+ if (suspend) {\n+ return (\n+
\n+ {children}\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+ return (\n+
\n+ {children}\n+ \n+ <\/div>\n+ );\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ \/\/ We don't actually assert here because the tree includes \n+ \/\/ which is different from the snapshots above. So we take more snapshots.\n+ let fallbackSnapshots = [];\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ fallbackSnapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/MaybeSuspend>\n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/MaybeSuspend>\n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/MaybeSuspend>\n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ {steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n });\n","files":[{"path":"src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap","status":"M"},{"path":"src\/__tests__\/storeStressSync-test.js","status":"M"}]}

dillon1000/react

Files changed