Add explicit tests for intermediate components
Dan Abramov committed
Nov 15, 2016 at 16:08 UTC
1e42c1833cf50f2450be35758470f8b84d7a60a2
1 file changed
+56
-14
src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
+56
-14
@@ -1797,23 +1797,41 @@ describe('ReactIncremental', () => {
1797
state = {x: 0};
1798
render() {
1799
statefulInst = this;
1800
- return [
1801
- <ShowLocaleClass />,
1802
- <ShowLocaleFn />,
1803
- ];
1800
+ return this.props.children;
1801
+ }
1802
+ }
1803
+
1804
+ function IndirectionFn(props, context) {
1805
+ ops.push('IndirectionFn ' + JSON.stringify(context));
1806
+ return props.children;
1807
+ }
1808
+
1809
+ class IndirectionClass extends React.Component {
1810
+ render() {
1811
+ ops.push('IndirectionClass ' + JSON.stringify(this.context));
1812
+ return this.props.children;
1813
}
1814
}
1815
1816
ops.length = 0;
1817
ReactNoop.render(
1818
<Intl locale="fr">
1810
- <Stateful />
1819
+ <IndirectionFn>
1820
+ <IndirectionClass>
1821
+ <Stateful>
1822
+ <ShowLocaleClass />
1823
+ <ShowLocaleFn />
1824
+ </Stateful>
1825
+ </IndirectionClass>
1826
+ </IndirectionFn>
1827
</Intl>
1828
);
1829
ReactNoop.flush();
1830
expect(ops).toEqual([
1831
'Intl:read null',
1832
'Intl:provide {"locale":"fr"}',
1833
+ 'IndirectionFn null',
1834
+ 'IndirectionClass null',
1835
'ShowLocaleClass:read {"locale":"fr"}',
1836
'ShowLocaleFn:read {"locale":"fr"}',
1837
]);
@@ -1821,12 +1839,9 @@ describe('ReactIncremental', () => {
1839
ops.length = 0;
1840
statefulInst.setState({x: 1});
1841
ReactNoop.flush();
1824
- expect(ops).toEqual([
1825
- // Intl was memoized so we did not need to
1826
- // either render it or recompute its context.
1827
- 'ShowLocaleClass:read {"locale":"fr"}',
1828
- 'ShowLocaleFn:read {"locale":"fr"}',
1829
- ]);
1842
+ // All work has been memoized because setState()
1843
+ // happened below the context and could not have affected it.
1844
+ expect(ops).toEqual([]);
1845
});
1846
1847
it('reads context when setState is above the provider', () => {
@@ -1868,25 +1883,47 @@ describe('ReactIncremental', () => {
1883
locale: React.PropTypes.string,
1884
};
1885
1886
+ function IndirectionFn(props, context) {
1887
+ ops.push('IndirectionFn ' + JSON.stringify(context));
1888
+ return props.children;
1889
+ }
1890
+
1891
+ class IndirectionClass extends React.Component {
1892
+ render() {
1893
+ ops.push('IndirectionClass ' + JSON.stringify(this.context));
1894
+ return this.props.children;
1895
+ }
1896
+ }
1897
+
1898
class Stateful extends React.Component {
1899
state = {locale: 'fr'};
1900
render() {
1901
statefulInst = this;
1902
return (
1903
<Intl locale={this.state.locale}>
1877
- <ShowLocaleClass />
1878
- <ShowLocaleFn />
1904
+ {this.props.children}
1905
</Intl>
1906
);
1907
}
1908
}
1909
1910
ops.length = 0;
1885
- ReactNoop.render(<Stateful />);
1911
+ ReactNoop.render(
1912
+ <Stateful>
1913
+ <IndirectionFn>
1914
+ <IndirectionClass>
1915
+ <ShowLocaleClass />
1916
+ <ShowLocaleFn />
1917
+ </IndirectionClass>
1918
+ </IndirectionFn>
1919
+ </Stateful>
1920
+ );
1921
ReactNoop.flush();
1922
expect(ops).toEqual([
1923
'Intl:read null',
1924
'Intl:provide {"locale":"fr"}',
1925
+ 'IndirectionFn null',
1926
+ 'IndirectionClass null',
1927
'ShowLocaleClass:read {"locale":"fr"}',
1928
'ShowLocaleFn:read {"locale":"fr"}',
1929
]);
@@ -1900,6 +1937,11 @@ describe('ReactIncremental', () => {
1937
// its child context.
1938
'Intl:read null',
1939
'Intl:provide {"locale":"gr"}',
1940
+ // TODO: it's unfortunate that we can't reuse work on
1941
+ // these components even though they don't depend on context.
1942
+ 'IndirectionFn null',
1943
+ 'IndirectionClass null',
1944
+ // These components depend on context:
1945
'ShowLocaleClass:read {"locale":"gr"}',
1946
'ShowLocaleFn:read {"locale":"gr"}',
1947
]);