Skip to content

Commit

Permalink
Add test for hiding children after layout destroy (#24483)
Browse files Browse the repository at this point in the history
  • Loading branch information
rickhanlonii authored May 3, 2022
1 parent b4eb0ad commit a10a9a6
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 1 deletion.
41 changes: 41 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,47 @@ describe('ReactOffscreen', () => {
expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
});

// @gate experimental || www
// @gate enableSuspenseLayoutEffectSemantics
// @gate enableFlipOffscreenUnhideOrder
it('hides children of offscreen after layout effects are destroyed', async () => {
const root = ReactNoop.createRoot();
function Child({text}) {
useLayoutEffect(() => {
Scheduler.unstable_yieldValue('Mount layout');
return () => {
// The child should not be hidden yet.
expect(root).toMatchRenderedOutput(<span prop="Child" />);
Scheduler.unstable_yieldValue('Unmount layout');
};
}, []);
return <Text text="Child" />;
}

await act(async () => {
root.render(
<Offscreen mode="visible">
<Child />
</Offscreen>,
);
});
expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
expect(root).toMatchRenderedOutput(<span prop="Child" />);

// Hide the tree. The layout effect is unmounted.
await act(async () => {
root.render(
<Offscreen mode="hidden">
<Child />
</Offscreen>,
);
});
expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);

// After the layout effect is unmounted, the child is hidden.
expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
});

// @gate www
it('does not toggle effects for LegacyHidden component', async () => {
// LegacyHidden is meant to be the same as offscreen except it doesn't
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/ReactFeatureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const skipUnmountedBoundaries = true;
//
// TODO: Finish rolling out in www
export const enableSuspenseLayoutEffectSemantics = true;
export const enableFlipOffscreenUnhideOrder = false;
export const enableFlipOffscreenUnhideOrder = true;

// TODO: Finish rolling out in www
export const enableClientRenderFallbackOnTextMismatch = true;
Expand Down

0 comments on commit a10a9a6

Please sign in to comment.