Skip to content

Commit

Permalink
Add test coverage for nested Suspense
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaearon
gaearon committed Apr 26, 2019
1 parent 2118b1f commit d81d74b
Show file tree
Hide file tree
Showing 2 changed files with 350 additions and 0 deletions.
174 changes: 174 additions & 0 deletions src/__tests__/__snapshots__/store-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,180 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper

exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;

exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
[root]
▾ <Root>
Expand Down
176 changes: 176 additions & 0 deletions src/__tests__/store-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,182 @@ describe('Store', () => {
expect(store).toMatchSnapshot('2: resolved');
});

it('should support nested Suspense nodes', () => {
const Component = () => null;
const Loading = () => <div>Loading...</div>;
const Never = () => {
throw new Promise(() => {});
};

const Wrapper = ({
suspendFirst = false,
suspendSecond = false,
suspendParent = false,
}) => (
<React.Fragment>
<Component key="Outside" />
<React.Suspense fallback={<Loading key="Parent Fallback" />}>
<Component key="Unrelated at Start" />
<React.Suspense fallback={<Loading key="Suspense 1 Fallback" />}>
{suspendFirst ? (
<Never />
) : (
<Component key="Suspense 1 Content" />
)}
</React.Suspense>
<React.Suspense fallback={<Loading key="Suspense 2 Fallback" />}>
{suspendSecond ? (
<Never />
) : (
<Component key="Suspense 2 Content" />
)}
</React.Suspense>
<React.Suspense fallback={<Loading key="Suspense 3 Fallback" />}>
<Never />
</React.Suspense>
{suspendParent && <Never />}
<Component key="Unrelated at End" />
</React.Suspense>
</React.Fragment>
);

const container = document.createElement('div');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('1: third child is suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('2: first and third child are suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={true}
/>,
container
)
);
expect(store).toMatchSnapshot('3: second and third child are suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('4: first and third child are suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={true}
suspendFirst={true}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('5: parent is suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={true}
/>,
container
)
);
expect(store).toMatchSnapshot('6: all children are suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('7: only third child is suspended');

// HACK There's only one renderer for this test
const rendererID = Object.keys(agent._rendererInterfaces)[0];
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(4),
rendererID,
forceFallback: true,
})
);
expect(store).toMatchSnapshot('8: first and third child are suspended');
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(2),
rendererID,
forceFallback: true,
})
);
expect(store).toMatchSnapshot('9: parent is suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={true}
suspendSecond={true}
/>,
container
)
);
expect(store).toMatchSnapshot('10: parent is suspended');
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(2),
rendererID,
forceFallback: false,
})
);
expect(store).toMatchSnapshot('11: all children are suspended');
act(() =>
agent.overrideSuspense({
id: store.getElementIDAtIndex(4),
rendererID,
forceFallback: false,
})
);
expect(store).toMatchSnapshot('12: all children are suspended');
act(() =>
ReactDOM.render(
<Wrapper
suspendParent={false}
suspendFirst={false}
suspendSecond={false}
/>,
container
)
);
expect(store).toMatchSnapshot('13: third child is suspended');
});

it('should support collapsing parts of the tree', () => {
const Grandparent = ({ count }) => (
<React.Fragment>
Expand Down

0 comments on commit d81d74b

Please sign in to comment.