{"files":[{"path":"src\/__tests__\/__snapshots__\/store-test.js.snap","status":"M"},{"path":"src\/__tests__\/setupTests.js","status":"M"},{"path":"src\/__tests__\/store-test.js","status":"M"}],"commit":{"shortRevision":"20193f03c0","authoredAt":"2019-04-16T07:49:11-07:00","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","revision":"20193f03c04971a14ee8a0b6755bdfee08b94ba3","subject":"Merge pull request #162 from gaearon\/suspense-test"},"parents":["8c974ae4329b0060c4238489966f64567b73c931","d89f79d6e6ce7b8eaada9d8596e594250651cb2f"],"body":"Add Suspense stress test","patch":"diff --git a\/src\/__tests__\/__snapshots__\/store-test.js.snap b\/src\/__tests__\/__snapshots__\/store-test.js.snap\nindex cd0df483e4..cf299a8c5e 100644\n--- a\/src\/__tests__\/__snapshots__\/store-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/store-test.js.snap\n@@ -25,6 +25,121 @@ exports[`Store should filter DOM nodes from the store tree: 1: mount 1`] = `\n \n `;\n \n+exports[`Store should handle a stress test for Suspense 1`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 2`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 3`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 4`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 5`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 6`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 7`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 8`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 9`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 10`] = `\n+[root]\n+ ▾ \n+ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 11`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`Store should handle a stress test for Suspense 12`] = `\n+[root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n exports[`Store should handle a stress test with different tree operations: 1: abcde 1`] = `\n [root]\n ▾ \ndiff --git a\/src\/__tests__\/setupTests.js b\/src\/__tests__\/setupTests.js\nindex c7cdaa0b8e..fefe83b258 100644\n--- a\/src\/__tests__\/setupTests.js\n+++ b\/src\/__tests__\/setupTests.js\n@@ -33,6 +33,7 @@ env.beforeEach(() => {\n \n initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);\n \n+ global.bridge = bridge;\n global.store = new Store(bridge);\n });\n env.afterEach(() => {\ndiff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nindex 3480b06622..9c64c93adb 100644\n--- a\/src\/__tests__\/store-test.js\n+++ b\/src\/__tests__\/store-test.js\n@@ -4,6 +4,7 @@ describe('Store', () => {\n let React;\n let ReactDOM;\n let TestUtils;\n+ \/\/ let bridge;\n let store;\n let print;\n \n@@ -15,6 +16,7 @@ describe('Store', () => {\n };\n \n beforeEach(() => {\n+ \/\/ bridge = global.bridge;\n store = global.store;\n \n React = require('react');\n@@ -336,4 +338,342 @@ describe('Store', () => {\n act(() => root.unmount());\n expect(print(store)).toBe('');\n });\n+\n+ it('should handle a stress test for Suspense', async () => {\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 x = ;\n+ \/\/ const y = ;\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 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+ {steps[i]}<\/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+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\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+ {steps[i]}<\/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+ {steps[j]}<\/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+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ TODO: fix the bugs\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(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ \/\/ Re-render with steps[j].\n+ \/\/ act(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ \/\/ Verify the successful transition to steps[j].\n+ \/\/ expect(print(store)).toEqual(snapshots[j]);\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+ {steps[i]}<\/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+ \n+ \n+ \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+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ TODO: fix the bugs\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(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ \/\/ Re-render with steps[j].\n+ \/\/ act(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ {steps[j]}\n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ \/\/ Verify the successful transition to steps[j].\n+ \/\/ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ \/\/ Clean up after every iteration.\n+ \/\/ act(() => ReactDOM.unmountComponentAtNode(container));\n+ \/\/ expect(print(store)).toBe('');\n+ \/\/ }\n+ \/\/ }\n+\n+ \/\/ TODO: fix the bugs\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(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ {steps[i]}\n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\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(snapshots[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(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ expect(print(store)).toEqual(snapshots[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(snapshots[j]);\n+\n+ \/\/ \/\/ Switch to primary mode.\n+ \/\/ act(() => ReactDOM.render(\n+ \/\/ \n+ \/\/ \n+ \/\/ \n+ \/\/ {steps[i]}\n+ \/\/ <\/React.Suspense>\n+ \/\/ \n+ \/\/ <\/Root>,\n+ \/\/ container\n+ \/\/ ));\n+ \/\/ \/\/ Fallback is still forced though.\n+ \/\/ expect(print(store)).toEqual(snapshots[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+ \/\/ TODO:\n+ \/\/ Test Concurrent Mode\n+ });\n });\n"}

dillon1000/react

Files changed