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

Jump to bottom

Codemod tests to waitFor pattern (8/?) #26308

Merged
merged 1 commit into from
Mar 4, 2023
Merged

Codemod tests to waitFor pattern (8/?) #26308

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
65 changes: 30 additions & 35 deletions packages/react-devtools-shared/src/__tests__/preprocessData-test.js
View file
Open in desktop
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
Open in desktop
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