Add server integration tests for new context (#12654)
* Add server integration tests for new context * Pretty please * Remove unused
Dan Abramov committed
Apr 21, 2018 at 21:21 UTC
c040bcbea8e4393fbab549cc195162ac183625ed
2 files changed
+196
-1
packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
renamed
+1
-1
@@ -42,7 +42,7 @@ describe('ReactDOMServerIntegration', () => {
42
resetModules();
43
});
44
45
- describe('context', function() {
45
+ describe('legacy context', function() {
46
let PurpleContext, RedContext;
47
beforeEach(() => {
48
class Parent extends React.Component {
packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
new
+195
@@ -0,0 +1,195 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13
+
14
+let React;
15
+let ReactDOM;
16
+let ReactDOMServer;
17
+
18
+function initModules() {
19
+ // Reset warning cache.
20
+ jest.resetModuleRegistry();
21
+ React = require('react');
22
+ ReactDOM = require('react-dom');
23
+ ReactDOMServer = require('react-dom/server');
24
+
25
+ // Make them available to the helpers.
26
+ return {
27
+ ReactDOM,
28
+ ReactDOMServer,
29
+ };
30
+}
31
+
32
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
33
+
34
+describe('ReactDOMServerIntegration', () => {
35
+ beforeEach(() => {
36
+ resetModules();
37
+ });
38
+
39
+ describe('context', function() {
40
+ let PurpleContext, RedContext, Consumer;
41
+ beforeEach(() => {
42
+ let Context = React.createContext('none');
43
+
44
+ class Parent extends React.Component {
45
+ render() {
46
+ return (
47
+ <Context.Provider value={this.props.text}>
48
+ {this.props.children}
49
+ </Context.Provider>
50
+ );
51
+ }
52
+ }
53
+ Consumer = Context.Consumer;
54
+ PurpleContext = props => <Parent text="purple">{props.children}</Parent>;
55
+ RedContext = props => <Parent text="red">{props.children}</Parent>;
56
+ });
57
+
58
+ itRenders('class child with context', async render => {
59
+ class ClassChildWithContext extends React.Component {
60
+ render() {
61
+ return (
62
+ <div>
63
+ <Consumer>{text => text}</Consumer>
64
+ </div>
65
+ );
66
+ }
67
+ }
68
+
69
+ const e = await render(
70
+ <PurpleContext>
71
+ <ClassChildWithContext />
72
+ </PurpleContext>,
73
+ );
74
+ expect(e.textContent).toBe('purple');
75
+ });
76
+
77
+ itRenders('stateless child with context', async render => {
78
+ function StatelessChildWithContext(props) {
79
+ return <Consumer>{text => text}</Consumer>;
80
+ }
81
+
82
+ const e = await render(
83
+ <PurpleContext>
84
+ <StatelessChildWithContext />
85
+ </PurpleContext>,
86
+ );
87
+ expect(e.textContent).toBe('purple');
88
+ });
89
+
90
+ itRenders('class child with default context', async render => {
91
+ class ClassChildWithWrongContext extends React.Component {
92
+ render() {
93
+ return (
94
+ <div id="classWrongChild">
95
+ <Consumer>{text => text}</Consumer>
96
+ </div>
97
+ );
98
+ }
99
+ }
100
+
101
+ const e = await render(<ClassChildWithWrongContext />);
102
+ expect(e.textContent).toBe('none');
103
+ });
104
+
105
+ itRenders('stateless child with wrong context', async render => {
106
+ function StatelessChildWithWrongContext(props) {
107
+ return (
108
+ <div id="statelessWrongChild">
109
+ <Consumer>{text => text}</Consumer>
110
+ </div>
111
+ );
112
+ }
113
+
114
+ const e = await render(<StatelessChildWithWrongContext />);
115
+ expect(e.textContent).toBe('none');
116
+ });
117
+
118
+ itRenders('with context passed through to a grandchild', async render => {
119
+ function Grandchild(props) {
120
+ return (
121
+ <div>
122
+ <Consumer>{text => text}</Consumer>
123
+ </div>
124
+ );
125
+ }
126
+
127
+ const Child = props => <Grandchild />;
128
+
129
+ const e = await render(
130
+ <PurpleContext>
131
+ <Child />
132
+ </PurpleContext>,
133
+ );
134
+ expect(e.textContent).toBe('purple');
135
+ });
136
+
137
+ itRenders('a child context overriding a parent context', async render => {
138
+ const Grandchild = props => {
139
+ return (
140
+ <div>
141
+ <Consumer>{text => text}</Consumer>
142
+ </div>
143
+ );
144
+ };
145
+
146
+ const e = await render(
147
+ <PurpleContext>
148
+ <RedContext>
149
+ <Grandchild />
150
+ </RedContext>
151
+ </PurpleContext>,
152
+ );
153
+ expect(e.textContent).toBe('red');
154
+ });
155
+
156
+ itRenders('multiple contexts', async render => {
157
+ const Theme = React.createContext('dark');
158
+ const Language = React.createContext('french');
159
+ class Parent extends React.Component {
160
+ render() {
161
+ return (
162
+ <Theme.Provider value="light">
163
+ <Child />
164
+ </Theme.Provider>
165
+ );
166
+ }
167
+ }
168
+
169
+ function Child() {
170
+ return (
171
+ <Language.Provider value="english">
172
+ <Grandchild />
173
+ </Language.Provider>
174
+ );
175
+ }
176
+
177
+ const Grandchild = props => {
178
+ return (
179
+ <div>
180
+ <Theme.Consumer>
181
+ {theme => <div id="theme">{theme}</div>}
182
+ </Theme.Consumer>
183
+ <Language.Consumer>
184
+ {language => <div id="language">{language}</div>}
185
+ </Language.Consumer>
186
+ </div>
187
+ );
188
+ };
189
+
190
+ const e = await render(<Parent />);
191
+ expect(e.querySelector('#theme').textContent).toBe('light');
192
+ expect(e.querySelector('#language').textContent).toBe('english');
193
+ });
194
+ });
195
+});