{"files":[{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js","status":"M"}],"parents":["c862ba719e26764473eb9edd798429600ca746ab"],"body":"This tests the life-cycles when work gets aborted.","patch":"diff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex f15e12da28..467965a8e9 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -839,8 +839,14 @@ describe('ReactIncremental', () => {\n it('can call sCU while resuming a partly mounted component', () => {\n var ops = [];\n \n+ var instances = new Set();\n+\n class Bar extends React.Component {\n state = { y: 'A' };\n+ constructor() {\n+ super();\n+ instances.add(this);\n+ }\n shouldComponentUpdate(newProps, newState) {\n return this.props.x !== newProps.x ||\n this.state.y !== newState.y;\n@@ -855,20 +861,29 @@ describe('ReactIncremental', () => {\n ops.push('Foo');\n return [\n ,\n- ,\n+ ,\n ,\n+ ,\n ];\n }\n \n- ReactNoop.render();\n- ReactNoop.flushDeferredPri(30);\n- expect(ops).toEqual(['Foo', 'Bar:A', 'Bar:B']);\n+ ReactNoop.render();\n+ ReactNoop.flushDeferredPri(40);\n+ expect(ops).toEqual(['Foo', 'Bar:A', 'Bar:B', 'Bar:C']);\n+\n+ expect(instances.size).toBe(3);\n \n ops = [];\n \n- ReactNoop.render();\n- ReactNoop.flushDeferredPri(40);\n- expect(ops).toEqual(['Foo', 'Bar:B', 'Bar:C']);\n+ ReactNoop.render();\n+ ReactNoop.flushDeferredPri(50);\n+ \/\/ A completed and was reused. B completed but couldn't be reused because\n+ \/\/ props differences. C didn't complete and therefore couldn't be reused.\n+ \/\/ D never even started so it needed a new instance.\n+ expect(ops).toEqual(['Foo', 'Bar:B2', 'Bar:C', 'Bar:D']);\n+\n+ \/\/ We expect each rerender to correspond to a new instance.\n+ expect(instances.size).toBe(6);\n });\n \n it('gets new props when setting state on a partly updated component', () => {\n@@ -927,4 +942,296 @@ describe('ReactIncremental', () => {\n expect(ops).toEqual(['Bar:A-1', 'Baz', 'Baz']);\n });\n \n+ it('calls componentWillMount twice if the initial render is aborted', () => {\n+ var ops = [];\n+\n+ class LifeCycle extends React.Component {\n+ state = { x: this.props.x };\n+ componentWillMount() {\n+ ops.push('componentWillMount:' + this.state.x + '-' + this.props.x);\n+ }\n+ componentDidMount() {\n+ ops.push('componentDidMount:' + this.state.x + '-' + this.props.x);\n+ }\n+ render() {\n+ return ;\n+ }\n+ }\n+\n+ function Trail() {\n+ ops.push('Trail');\n+ }\n+\n+ function App(props) {\n+ ops.push('App');\n+ return (\n+

\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flushDeferredPri(30);\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'componentWillMount:0-0',\n+ ]);\n+\n+ ops = [];\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'componentWillMount:1-1',\n+ 'Trail',\n+ 'componentDidMount:1-1',\n+ ]);\n+ });\n+\n+ it('calls componentWill* twice if an update render is aborted', () => {\n+ var ops = [];\n+\n+ class LifeCycle extends React.Component {\n+ componentWillMount() {\n+ ops.push('componentWillMount:' + this.props.x);\n+ }\n+ componentDidMount() {\n+ ops.push('componentDidMount:' + this.props.x);\n+ }\n+ componentWillReceiveProps(nextProps) {\n+ ops.push('componentWillReceiveProps:' + this.props.x + '-' + nextProps.x);\n+ }\n+ shouldComponentUpdate(nextProps) {\n+ ops.push('shouldComponentUpdate:' + this.props.x + '-' + nextProps.x);\n+ return true;\n+ }\n+ componentWillUpdate(nextProps) {\n+ ops.push('componentWillUpdate:' + this.props.x + '-' + nextProps.x);\n+ }\n+ componentDidUpdate(prevProps) {\n+ ops.push('componentDidUpdate:' + this.props.x + '-' + prevProps.x);\n+ }\n+ render() {\n+ ops.push('render:' + this.props.x);\n+ return ;\n+ }\n+ }\n+\n+ function Sibling() {\n+ \/\/ The sibling is used to confirm that we've completed the first child,\n+ \/\/ but not yet flushed.\n+ ops.push('Sibling');\n+ return ;\n+ }\n+\n+ function App(props) {\n+ ops.push('App');\n+\n+ return [\n+ ,\n+ ,\n+ ];\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'componentWillMount:0',\n+ 'render:0',\n+ 'Sibling',\n+ 'componentDidMount:0',\n+ ]);\n+\n+ ops = [];\n+\n+ ReactNoop.render();\n+ ReactNoop.flushDeferredPri(30);\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'componentWillReceiveProps:0-1',\n+ 'shouldComponentUpdate:0-1',\n+ 'componentWillUpdate:0-1',\n+ 'render:1',\n+ 'Sibling',\n+ \/\/ no componentDidUpdate\n+ ]);\n+\n+ ops = [];\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'componentWillReceiveProps:1-2',\n+ 'shouldComponentUpdate:1-2',\n+ 'componentWillUpdate:1-2',\n+ 'render:2',\n+ 'Sibling',\n+ \/\/ When componentDidUpdate finally gets called, it covers both updates.\n+ 'componentDidUpdate:2-0',\n+ ]);\n+ });\n+\n+ it('does not call componentWillReceiveProps for state-only updates', () => {\n+ var ops = [];\n+\n+ var instances = [];\n+\n+ class LifeCycle extends React.Component {\n+ state = { x: 0 };\n+ tick() {\n+ this.setState({\n+ x: this.state.x + 1,\n+ });\n+ }\n+ componentWillMount() {\n+ instances.push(this);\n+ ops.push('componentWillMount:' + this.state.x);\n+ }\n+ componentDidMount() {\n+ ops.push('componentDidMount:' + this.state.x);\n+ }\n+ componentWillReceiveProps(nextProps) {\n+ ops.push('componentWillReceiveProps');\n+ }\n+ shouldComponentUpdate(nextProps, nextState) {\n+ ops.push('shouldComponentUpdate:' + this.state.x + '-' + nextState.x);\n+ return true;\n+ }\n+ componentWillUpdate(nextProps, nextState) {\n+ ops.push('componentWillUpdate:' + this.state.x + '-' + nextState.x);\n+ }\n+ componentDidUpdate(prevProps, prevState) {\n+ ops.push('componentDidUpdate:' + this.state.x + '-' + prevState.x);\n+ }\n+ render() {\n+ ops.push('render:' + this.state.x);\n+ return ;\n+ }\n+ }\n+\n+ \/\/ This wrap is a bit contrived because we can't pause a completed root and\n+ \/\/ there is currently an issue where a component can't reuse its render\n+ \/\/ output unless it fully completed.\n+ class Wrap extends React.Component {\n+ state = { y: 0 };\n+ componentWillMount() {\n+ instances.push(this);\n+ }\n+ tick() {\n+ this.setState({\n+ y: this.state.y + 1,\n+ });\n+ }\n+ render() {\n+ ops.push('Wrap');\n+ return ;\n+ }\n+ }\n+\n+ function Sibling() {\n+ \/\/ The sibling is used to confirm that we've completed the first child,\n+ \/\/ but not yet flushed.\n+ ops.push('Sibling');\n+ return ;\n+ }\n+\n+ function App(props) {\n+ ops.push('App');\n+ return [\n+ ,\n+ ,\n+ ];\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ 'App',\n+ 'Wrap',\n+ 'componentWillMount:0',\n+ 'render:0',\n+ 'Sibling',\n+ 'componentDidMount:0',\n+ ]);\n+\n+ ops = [];\n+\n+ \/\/ LifeCycle\n+ instances[1].tick();\n+\n+ ReactNoop.flushDeferredPri(25);\n+\n+ expect(ops).toEqual([\n+ \/\/ no componentWillReceiveProps\n+ 'shouldComponentUpdate:0-1',\n+ 'componentWillUpdate:0-1',\n+ 'render:1',\n+ \/\/ no componentDidUpdate\n+ ]);\n+\n+ ops = [];\n+\n+ \/\/ LifeCycle\n+ instances[1].tick();\n+\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ \/\/ no componentWillReceiveProps\n+ 'shouldComponentUpdate:1-2',\n+ 'componentWillUpdate:1-2',\n+ 'render:2',\n+ \/\/ When componentDidUpdate finally gets called, it covers both updates.\n+ 'componentDidUpdate:2-0',\n+ ]);\n+\n+ ops = [];\n+\n+ \/\/ Next we will update props of LifeCycle by updating its parent.\n+\n+ instances[0].tick();\n+\n+ ReactNoop.flushDeferredPri(30);\n+\n+ expect(ops).toEqual([\n+ 'Wrap',\n+ 'componentWillReceiveProps',\n+ 'shouldComponentUpdate:2-2',\n+ 'componentWillUpdate:2-2',\n+ 'render:2',\n+ \/\/ no componentDidUpdate\n+ ]);\n+\n+ ops = [];\n+\n+ \/\/ Next we will update LifeCycle directly but not with new props.\n+ instances[1].tick();\n+\n+ ReactNoop.flush();\n+\n+ expect(ops).toEqual([\n+ \/\/ This should not trigger another componentWillReceiveProps because\n+ \/\/ we never got new props.\n+ 'shouldComponentUpdate:2-3',\n+ 'componentWillUpdate:2-3',\n+ 'render:3',\n+ 'componentDidUpdate:3-2',\n+ ]);\n+\n+ \/\/ TODO: Test that we get the expected values for the same scenario with\n+ \/\/ incomplete parents.\n+\n+ });\n+\n });\n","commit":{"authorName":"Sebastian Markbage","subject":"Add unit tests for aborted life-cycles","authorEmail":"sema@fb.com","authoredAt":"2016-10-20T18:09:30-07:00","shortRevision":"37ca3874af","revision":"37ca3874af3e94f6d108d31779adaee742cb4684"}}

dillon1000/react

Files changed