Skip to content

Commit

Permalink
Codemod tests to waitFor pattern (8/?) (#26308)
Browse files Browse the repository at this point in the history 
This converts some of our test suite to use the `waitFor` test pattern,
instead of the `expect(Scheduler).toFlushAndYield` pattern. Most of
these changes are automated with jscodeshift, with some slight manual
cleanup in certain cases.

See #26285 for full context.
  • Loading branch information
@acdlite
acdlite committed Mar 4, 2023
1 parent 3cb5afb commit 64dde70
Show file tree
Hide file tree
Showing 17 changed files with 591 additions and 557 deletions.
65 changes: 30 additions & 35 deletions packages/react-devtools-shared/src/__tests__/preprocessData-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ describe('Timeline profiler', () => {
let ReactDOMClient;
let Scheduler;
let utils;
let assertLog;
let waitFor;

describe('User Timing API', () => {
let clearedMarks;
Expand Down Expand Up @@ -82,6 +84,10 @@ describe('Timeline profiler', () => {
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');

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

setPerformanceMock =
require('react-devtools-shared/src/backend/profilingHooks').setPerformanceMock_ONLY_FOR_TESTING;
setPerformanceMock(createUserTimingPolyfill());
Expand Down Expand Up @@ -1372,28 +1378,29 @@ describe('Timeline profiler', () => {
<Yield id="B" value={1} />
</>,
);
expect(Scheduler).toFlushAndYieldThrough(['A:1']);
});

testMarks.push(...createUserTimingData(clearedMarks));
clearPendingMarks();
await waitFor(['A:1']);

// Advance the clock some more to make the pending React update seem long.
startTime += 20000;
testMarks.push(...createUserTimingData(clearedMarks));
clearPendingMarks();

// Fake a long "click" event in the middle
// and schedule a sync update that will also flush the previous work.
testMarks.push(createNativeEventEntry('click', 25000));
ReactDOM.flushSync(() => {
root.render(
<>
<Yield id="A" value={2} />
<Yield id="B" value={2} />
</>,
);
});
// Advance the clock some more to make the pending React update seem long.
startTime += 20000;

// Fake a long "click" event in the middle
// and schedule a sync update that will also flush the previous work.
testMarks.push(createNativeEventEntry('click', 25000));
ReactDOM.flushSync(() => {
root.render(
<>
<Yield id="A" value={2} />
<Yield id="B" value={2} />
</>,
);
});

expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
assertLog(['A:2', 'B:2']);

testMarks.push(...createUserTimingData(clearedMarks));

Expand Down Expand Up @@ -1424,10 +1431,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
'Component mount',
'Component update',
]);
assertLog(['Component mount', 'Component update']);

const data = await preprocessData([
...createBoilerplateEntries(),
Expand Down Expand Up @@ -1463,10 +1467,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
'Component mount',
'Component update',
]);
assertLog(['Component mount', 'Component update']);

const data = await preprocessData([
...createBoilerplateEntries(),
Expand Down Expand Up @@ -1504,10 +1505,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
'Component mount',
'Component update',
]);
assertLog(['Component mount', 'Component update']);

const testMarks = [];
clearedMarks.forEach(markName => {
Expand Down Expand Up @@ -1567,10 +1565,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
'Component mount',
'Component update',
]);
assertLog(['Component mount', 'Component update']);

const testMarks = [];
clearedMarks.forEach(markName => {
Expand Down Expand Up @@ -1639,7 +1634,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
assertLog([
'Component rendered with value 0',
'Component rendered with value 0',
'Component rendered with value 1',
Expand Down Expand Up @@ -1708,7 +1703,7 @@ describe('Timeline profiler', () => {
root.render(<Component />);
});

expect(Scheduler).toHaveYielded([
assertLog([
'Component rendered with value 0 and deferredValue 0',
'Component rendered with value 1 and deferredValue 0',
'Component rendered with value 1 and deferredValue 1',
Expand Down
24 changes: 14 additions & 10 deletions packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ let buffer = '';
let hasErrored = false;
let fatalError = undefined;
let textCache;
let assertLog;

describe('ReactDOMFizzShellHydration', () => {
beforeEach(() => {
Expand All @@ -35,6 +36,9 @@ describe('ReactDOMFizzShellHydration', () => {
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');

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

startTransition = React.startTransition;

textCache = new Map();
Expand Down Expand Up @@ -180,7 +184,7 @@ describe('ReactDOMFizzShellHydration', () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
expect(Scheduler).toHaveYielded(['Shell']);
assertLog(['Shell']);
const dehydratedDiv = container.getElementsByTagName('div')[0];

// Clear the cache and start rendering on the client
Expand All @@ -190,15 +194,15 @@ describe('ReactDOMFizzShellHydration', () => {
await clientAct(async () => {
ReactDOMClient.hydrateRoot(container, <App />);
});
expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
assertLog(['Suspend! [Shell]']);
expect(div.current).toBe(null);
expect(container.textContent).toBe('Shell');

// The shell loads and hydration finishes
await clientAct(async () => {
await resolveText('Shell');
});
expect(Scheduler).toHaveYielded(['Shell']);
assertLog(['Shell']);
expect(div.current).toBe(dehydratedDiv);
expect(container.textContent).toBe('Shell');
});
Expand All @@ -213,12 +217,12 @@ describe('ReactDOMFizzShellHydration', () => {
await clientAct(async () => {
root.render(<App />);
});
expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
assertLog(['Suspend! [Shell]']);

await clientAct(async () => {
await resolveText('Shell');
});
expect(Scheduler).toHaveYielded(['Shell']);
assertLog(['Shell']);
expect(container.textContent).toBe('Shell');
});

Expand All @@ -236,7 +240,7 @@ describe('ReactDOMFizzShellHydration', () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
expect(Scheduler).toHaveYielded(['Initial']);
assertLog(['Initial']);

await clientAct(async () => {
const root = ReactDOMClient.hydrateRoot(container, <App />);
Expand All @@ -246,7 +250,7 @@ describe('ReactDOMFizzShellHydration', () => {
root.render(<Text text="Updated" />);
});
});
expect(Scheduler).toHaveYielded(['Initial', 'Updated']);
assertLog(['Initial', 'Updated']);
expect(container.textContent).toBe('Updated');
},
);
Expand All @@ -262,7 +266,7 @@ describe('ReactDOMFizzShellHydration', () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
expect(Scheduler).toHaveYielded(['Shell']);
assertLog(['Shell']);

// Clear the cache and start rendering on the client
resetTextCache();
Expand All @@ -275,13 +279,13 @@ describe('ReactDOMFizzShellHydration', () => {
},
});
});
expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
assertLog(['Suspend! [Shell]']);
expect(container.textContent).toBe('Shell');

await clientAct(async () => {
root.render(<Text text="New screen" />);
});
expect(Scheduler).toHaveYielded([
assertLog([
'New screen',
'This root received an early update, before anything was able ' +
'hydrate. Switched the entire root to client rendering.',
Expand Down
Loading

0 comments on commit 64dde70

Please sign in to comment.