/
ReactCompositeComponentNestedState-test.js
119 lines (105 loc) · 3.33 KB
/
ReactCompositeComponentNestedState-test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
let React;
let ReactDOM;
describe('ReactCompositeComponentNestedState-state', () => {
beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
});
it('should provide up to date values for props', () => {
class ParentComponent extends React.Component {
state = {color: 'blue'};
handleColor = color => {
this.props.logger('parent-handleColor', this.state.color);
this.setState({color: color}, function() {
this.props.logger('parent-after-setState', this.state.color);
});
};
render() {
this.props.logger('parent-render', this.state.color);
return (
<ChildComponent
logger={this.props.logger}
color={this.state.color}
onSelectColor={this.handleColor}
/>
);
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
props.logger('getInitialState', props.color);
this.state = {hue: 'dark ' + props.color};
}
handleHue = (shade, color) => {
this.props.logger('handleHue', this.state.hue, this.props.color);
this.props.onSelectColor(color);
this.setState(
function(state, props) {
this.props.logger(
'setState-this',
this.state.hue,
this.props.color,
);
this.props.logger('setState-args', state.hue, props.color);
return {hue: shade + ' ' + props.color};
},
function() {
this.props.logger(
'after-setState',
this.state.hue,
this.props.color,
);
},
);
};
render() {
this.props.logger('render', this.state.hue, this.props.color);
return (
<div>
<button onClick={this.handleHue.bind(this, 'dark', 'blue')}>
Dark Blue
</button>
<button onClick={this.handleHue.bind(this, 'light', 'blue')}>
Light Blue
</button>
<button onClick={this.handleHue.bind(this, 'dark', 'green')}>
Dark Green
</button>
<button onClick={this.handleHue.bind(this, 'light', 'green')}>
Light Green
</button>
</div>
);
}
}
const container = document.createElement('div');
document.body.appendChild(container);
const logger = jest.fn();
void ReactDOM.render(<ParentComponent logger={logger} />, container);
// click "light green"
container.childNodes[0].childNodes[3].click();
expect(logger.mock.calls).toEqual([
['parent-render', 'blue'],
['getInitialState', 'blue'],
['render', 'dark blue', 'blue'],
['handleHue', 'dark blue', 'blue'],
['parent-handleColor', 'blue'],
['parent-render', 'green'],
['setState-this', 'dark blue', 'blue'],
['setState-args', 'dark blue', 'green'],
['render', 'light green', 'green'],
['after-setState', 'light green', 'green'],
['parent-after-setState', 'green'],
]);
});
});