Add Tests to Callbacks of the Life Cycles
This adds some much needed tests of the callbacks to setState, setProps and render.
Sebastian Markbage committed
Jan 26, 2015 at 23:26 UTC
fd077d7492ae9398d596ba34352f79114e73fa87
1 file changed
+44
-9
src/core/__tests__/ReactCompositeComponentState-test.js
+44
-9
@@ -44,8 +44,15 @@ describe('ReactCompositeComponent-state', function() {
44
}
45
},
46
47
+ peekAtCallback: function(from) {
48
+ return () => this.peekAtState(from);
49
+ },
50
+
51
setFavoriteColor: function(nextColor) {
48
- this.setState({color: nextColor});
52
+ this.setState(
53
+ {color: nextColor},
54
+ this.peekAtCallback('setFavoriteColor')
55
+ );
56
},
57
58
getInitialState: function() {
@@ -60,22 +67,34 @@ describe('ReactCompositeComponent-state', function() {
67
68
componentWillMount: function() {
69
this.peekAtState('componentWillMount-start');
63
- this.setState({color: 'sunrise'});
70
+ this.setState(
71
+ {color: 'sunrise'},
72
+ this.peekAtCallback('setState-sunrise')
73
+ );
74
this.peekAtState('componentWillMount-after-sunrise');
65
- this.setState({color: 'orange'});
75
+ this.setState(
76
+ {color: 'orange'},
77
+ this.peekAtCallback('setState-orange')
78
+ );
79
this.peekAtState('componentWillMount-end');
80
},
81
82
componentDidMount: function() {
83
this.peekAtState('componentDidMount-start');
71
- this.setState({color: 'yellow'});
84
+ this.setState(
85
+ {color: 'yellow'},
86
+ this.peekAtCallback('setState-yellow')
87
+ );
88
this.peekAtState('componentDidMount-end');
89
},
90
91
componentWillReceiveProps: function(newProps) {
92
this.peekAtState('componentWillReceiveProps-start');
93
if (newProps.nextColor) {
78
- this.setState({color: newProps.nextColor});
94
+ this.setState(
95
+ {color: newProps.nextColor},
96
+ this.peekAtCallback('setState-receiveProps')
97
+ );
98
}
99
this.peekAtState('componentWillReceiveProps-end');
100
},
@@ -108,11 +127,19 @@ describe('ReactCompositeComponent-state', function() {
127
document.documentElement.appendChild(container);
128
129
var stateListener = mocks.getMockFunction();
111
- var instance = <TestComponent stateListener={stateListener} />;
112
- instance = React.render(instance, container);
113
- instance.setProps({nextColor: 'green'});
130
+ var instance = React.render(
131
+ <TestComponent stateListener={stateListener} />,
132
+ container,
133
+ function peekAtInitialCallback() {
134
+ this.peekAtState('initial-callback');
135
+ }
136
+ );
137
+ instance.setProps(
138
+ {nextColor: 'green'},
139
+ instance.peekAtCallback('setProps')
140
+ );
141
instance.setFavoriteColor('blue');
115
- instance.forceUpdate();
142
+ instance.forceUpdate(instance.peekAtCallback('forceUpdate'));
143
144
React.unmountComponentAtNode(container);
145
@@ -126,6 +153,8 @@ describe('ReactCompositeComponent-state', function() {
153
// pending state has been applied
154
[ 'render', 'orange', null ],
155
[ 'componentDidMount-start', 'orange', null ],
156
+ // setState-sunrise and setState-orange should be called here,
157
+ // after the bug in #
158
// componentDidMount() called setState({color:'yellow'}), currently this
159
// occurs inline.
160
// In a future where setState() is async, this test result will change.
@@ -136,8 +165,10 @@ describe('ReactCompositeComponent-state', function() {
165
[ 'render', 'yellow', null ],
166
[ 'componentDidUpdate-currentState', 'yellow', null ],
167
[ 'componentDidUpdate-prevState', 'orange' ],
168
+ [ 'setState-yellow', 'yellow', null ],
169
// componentDidMount() finally closes.
170
[ 'componentDidMount-end', 'yellow', null ],
171
+ [ 'initial-callback', 'yellow', null ],
172
[ 'componentWillReceiveProps-start', 'yellow', null ],
173
// setState({color:'green'}) only enqueues a pending state.
174
[ 'componentWillReceiveProps-end', 'yellow', 'green' ],
@@ -148,6 +179,8 @@ describe('ReactCompositeComponent-state', function() {
179
[ 'render', 'green', null ],
180
[ 'componentDidUpdate-currentState', 'green', null ],
181
[ 'componentDidUpdate-prevState', 'yellow' ],
182
+ [ 'setState-receiveProps', 'green', null ],
183
+ [ 'setProps', 'green', null ],
184
// setFavoriteColor('blue')
185
[ 'shouldComponentUpdate-currentState', 'green', null ],
186
[ 'shouldComponentUpdate-nextState', 'blue' ],
@@ -156,12 +189,14 @@ describe('ReactCompositeComponent-state', function() {
189
[ 'render', 'blue', null ],
190
[ 'componentDidUpdate-currentState', 'blue', null ],
191
[ 'componentDidUpdate-prevState', 'green' ],
192
+ [ 'setFavoriteColor', 'blue', null ],
193
// forceUpdate()
194
[ 'componentWillUpdate-currentState', 'blue', null ],
195
[ 'componentWillUpdate-nextState', 'blue' ],
196
[ 'render', 'blue', null ],
197
[ 'componentDidUpdate-currentState', 'blue', null ],
198
[ 'componentDidUpdate-prevState', 'blue' ],
199
+ [ 'forceUpdate', 'blue', null ],
200
// unmountComponent()
201
// state is available within `componentWillUnmount()`
202
[ 'componentWillUnmount', 'blue', null ]