add siblings Timeout components test case (#12862)
Chang Yan committed
May 22, 2018 at 15:39 UTC
c601f7a64640290af85c9f0e33c78480656b46bc
1 file changed
+47
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+47
@@ -139,6 +139,53 @@ describe('ReactSuspense', () => {
139
expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
140
});
141
142
+ it('suspends siblings and later recovers each independently', async () => {
143
+ // Render two sibling Timeout components
144
+ ReactNoop.render(
145
+ <Fragment>
146
+ <Fallback timeout={1000} placeholder={<Text text="Loading A..." />}>
147
+ <AsyncText text="A" ms={5000} />
148
+ </Fallback>
149
+ <Fallback timeout={3000} placeholder={<Text text="Loading B..." />}>
150
+ <AsyncText text="B" ms={6000} />
151
+ </Fallback>
152
+ </Fragment>,
153
+ );
154
+ expect(ReactNoop.flush()).toEqual(['Suspend! [A]', 'Suspend! [B]']);
155
+ expect(ReactNoop.getChildren()).toEqual([]);
156
+
157
+ // Advance time by enough to timeout both components and commit their placeholders
158
+ ReactNoop.expire(4000);
159
+ await advanceTimers(4000);
160
+
161
+ expect(ReactNoop.flush()).toEqual([
162
+ 'Suspend! [A]',
163
+ 'Loading A...',
164
+ 'Suspend! [B]',
165
+ 'Loading B...',
166
+ ]);
167
+ expect(ReactNoop.getChildren()).toEqual([
168
+ span('Loading A...'),
169
+ span('Loading B...'),
170
+ ]);
171
+
172
+ // Advance time by enough that the first Timeout's promise resolves
173
+ // and switches back to the normal view. The second Timeout should still show the placeholder
174
+ ReactNoop.expire(1000);
175
+ await advanceTimers(1000);
176
+
177
+ expect(ReactNoop.flush()).toEqual(['Promise resolved [A]', 'A']);
178
+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
179
+
180
+ // Advance time by enough that the second Timeout's promise resolves
181
+ // and switches back to the normal view
182
+ ReactNoop.expire(1000);
183
+ await advanceTimers(1000);
184
+
185
+ expect(ReactNoop.flush()).toEqual(['Promise resolved [B]', 'B']);
186
+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
187
+ });
188
+
189
it('continues rendering siblings after suspending', async () => {
190
ReactNoop.render(
191
<Fallback>