Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Codemod tests to waitFor pattern (7/?) #26307

Merged
merged 1 commit into from
Mar 4, 2023
Merged

Codemod tests to waitFor pattern (7/?) #26307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ let ReactDOMClient;
let Scheduler;
let act;
let container;
let waitForAll;
let assertLog;

describe('ReactSuspenseEffectsSemanticsDOM', () => {
beforeEach(() => {
Expand All @@ -26,6 +28,10 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
Scheduler = require('scheduler');
act = require('jest-react').act;

const InternalTestUtils = require('internal-test-utils');
waitForAll = InternalTestUtils.waitForAll;
assertLog = InternalTestUtils.assertLog;

container = document.createElement('div');
document.body.appendChild(container);
});
Expand Down Expand Up @@ -139,23 +145,23 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
await waitForAll(['A', 'Ref mount: A']);
expect(container.innerHTML).toBe('<span>A</span>');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
assertLog(['Loading...', 'Ref unmount: A']);
expect(container.innerHTML).toBe(
'<span style="display: none;">A</span>Loading...',
);

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Ref mount: B']);
await waitForAll(['B', 'Ref mount: B']);
expect(container.innerHTML).toBe('<span>B</span>');
});

Expand Down Expand Up @@ -199,21 +205,21 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
await waitForAll(['B', 'Did mount: B']);
expect(container.innerHTML).toBe('B');
});

Expand Down Expand Up @@ -251,24 +257,24 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

// Destroy the whole tree, including the hidden A
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -318,17 +324,17 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
await waitForAll(['A', 'Ref mount: A']);
expect(container.innerHTML).toBe('<span>A</span>');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
assertLog(['Loading...', 'Ref unmount: A']);
expect(container.innerHTML).toBe(
'<span style="display: none;">A</span>Loading...',
);
Expand All @@ -337,7 +343,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -381,24 +387,24 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

// Destroy the whole tree, including the hidden A
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -432,12 +438,12 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {

// Initial render
ReactDOM.render(<App showMore={false} />, container);
expect(Scheduler).toHaveYielded(['Child', 'Mount']);
assertLog(['Child', 'Mount']);

// Update that suspends, causing the existing tree to switches it to
// a fallback.
ReactDOM.render(<App showMore={true} />, container);
expect(Scheduler).toHaveYielded([
assertLog([
'Child',
'Loading...',

Expand All @@ -448,6 +454,6 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {

// Delete the tree and unmount the effect
ReactDOM.render(null, container);
expect(Scheduler).toHaveYielded(['Unmount']);
assertLog(['Unmount']);
});
});
28 changes: 16 additions & 12 deletions packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ let Suspense;
let getCacheForType;
let caches;
let seededCache;
let waitForAll;

describe('ReactSuspenseFallback', () => {
beforeEach(() => {
Expand All @@ -25,6 +26,9 @@ describe('ReactSuspenseFallback', () => {
getCacheForType = React.unstable_getCacheForType;
caches = [];
seededCache = null;

const InternalTestUtils = require('internal-test-utils');
waitForAll = InternalTestUtils.waitForAll;
});

function createTextCache() {
Expand Down Expand Up @@ -128,49 +132,49 @@ describe('ReactSuspenseFallback', () => {
}

// @gate enableLegacyCache
it('suspends and shows fallback', () => {
it('suspends and shows fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
await waitForAll(['Suspend! [A]', 'Loading...']);
expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
});

// @gate enableLegacyCache
it('suspends and shows null fallback', () => {
it('suspends and shows null fallback', async () => {
ReactNoop.render(
<Suspense fallback={null}>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows undefined fallback', () => {
it('suspends and shows undefined fallback', async () => {
ReactNoop.render(
<Suspense>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows inner fallback', () => {
it('suspends and shows inner fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense fallback={<Text text="Loading..." />}>
Expand All @@ -179,12 +183,12 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
await waitForAll(['Suspend! [A]', 'Loading...']);
expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
});

// @gate enableLegacyCache
it('suspends and shows inner undefined fallback', () => {
it('suspends and shows inner undefined fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense>
Expand All @@ -193,15 +197,15 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows inner null fallback', () => {
it('suspends and shows inner null fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense fallback={null}>
Expand All @@ -210,7 +214,7 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
Expand Down
Loading