Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/fiber/tests-passing.txt
Original file line number Diff line number Diff line change
Expand Up @@ -1294,6 +1294,7 @@ src/renderers/shared/shared/__tests__/ReactCompositeComponentDOMMinimalism-test.

src/renderers/shared/shared/__tests__/ReactCompositeComponentState-test.js
* should support setting state
* should call componentDidUpdate of children first
* should batch unmounts

src/renderers/shared/shared/__tests__/ReactEmptyComponent-test.js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

var React;
var ReactDOM;
var ReactDOMFeatureFlags;

var TestComponent;

Expand All @@ -22,6 +23,7 @@ describe('ReactCompositeComponent-state', () => {
React = require('React');

ReactDOM = require('ReactDOM');
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');

TestComponent = React.createClass({
peekAtState: function(from, state) {
Expand Down Expand Up @@ -227,6 +229,90 @@ describe('ReactCompositeComponent-state', () => {
expect(stateListener.mock.calls.join('\n')).toEqual(expected.join('\n'));
});


it('should call componentDidUpdate of children first', () => {
var container = document.createElement('div');

var ops = [];

var child = null;
var parent = null;

class Child extends React.Component {
state = {bar:false};
componentDidMount() {
child = this;
}
componentDidUpdate() {
ops.push('child did update');
}
render() {
return <div />;
}
}

var shouldUpdate = true;

class Intermediate extends React.Component {
shouldComponentUpdate() {
return shouldUpdate;
}
render() {
return <Child />;
}
}

class Parent extends React.Component {
state = {foo:false};
componentDidMount() {
parent = this;
}
componentDidUpdate() {
ops.push('parent did update');
}
render() {
return <Intermediate />;
}
}

ReactDOM.render(<Parent />, container);

ReactDOM.unstable_batchedUpdates(() => {
parent.setState({ foo: true });
child.setState({ bar: true });
});
// When we render changes top-down in a batch, children's componentDidUpdate
// happens before the parent.
expect(ops).toEqual([
'child did update',
'parent did update',
]);

shouldUpdate = false;

ops = [];

ReactDOM.unstable_batchedUpdates(() => {
parent.setState({ foo: false });
child.setState({ bar: false });
});
// We expect the same thing to happen if we bail out in the middle.
expect(ops).toEqual(
ReactDOMFeatureFlags.useFiber ?
[
Copy link
Collaborator

@sophiebits sophiebits Dec 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lint fails for indentation here. ¯\_(ツ)_/¯

// Fiber works as expected
'child did update',
'parent did update',
] : [
// Stack treats these as two separate updates and therefore the order
// is inverse.
'parent did update',
'child did update',
]
);

});

it('should batch unmounts', () => {
var outer;

Expand Down