maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add siblings Timeout components test case (#12862)

This commit is contained in:
Chang Yan 2018-05-22 15:39:40 -07:00 committed by GitHub
parent 7350358374
commit c601f7a646
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
View File

@ -139,6 +139,53 @@ describe('ReactSuspense', () => {
expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
});
it('suspends siblings and later recovers each independently', async () => {
// Render two sibling Timeout components
ReactNoop.render(
<Fragment>
<Fallback timeout={1000} placeholder={<Text text="Loading A..." />}>
<AsyncText text="A" ms={5000} />
</Fallback>
<Fallback timeout={3000} placeholder={<Text text="Loading B..." />}>
<AsyncText text="B" ms={6000} />
</Fallback>
</Fragment>,
);
expect(ReactNoop.flush()).toEqual(['Suspend! [A]', 'Suspend! [B]']);
expect(ReactNoop.getChildren()).toEqual([]);
// Advance time by enough to timeout both components and commit their placeholders
ReactNoop.expire(4000);
await advanceTimers(4000);
expect(ReactNoop.flush()).toEqual([
'Suspend! [A]',
'Loading A...',
'Suspend! [B]',
'Loading B...',
]);
expect(ReactNoop.getChildren()).toEqual([
span('Loading A...'),
span('Loading B...'),
]);
// Advance time by enough that the first Timeout's promise resolves
// and switches back to the normal view. The second Timeout should still show the placeholder
ReactNoop.expire(1000);
await advanceTimers(1000);
expect(ReactNoop.flush()).toEqual(['Promise resolved [A]', 'A']);
expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
// Advance time by enough that the second Timeout's promise resolves
// and switches back to the normal view
ReactNoop.expire(1000);
await advanceTimers(1000);
expect(ReactNoop.flush()).toEqual(['Promise resolved [B]', 'B']);
expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
});
it('continues rendering siblings after suspending', async () => {
ReactNoop.render(
<Fallback>