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

Debug tracing tests for CPU bound suspense #19943

Merged
merged 2 commits into from Oct 1, 2020
Merged

Debug tracing tests for CPU bound suspense #19943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83199cb
Enabled DebugTracing flag for variant tests
Oct 1, 2020
efe5a9c
Added DebugTracing tests for CPU bound suspense
Oct 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
132 changes: 120 additions & 12 deletions packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
View file
Open in desktop
Expand Up @@ -96,6 +96,45 @@ describe('DebugTracing', () => {
expect(logs).toEqual(['log: ⚛️ Example resolved']);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log sync render with CPU suspense', () => {
function Example() {
console.log('<Example/>');
return null;
}

function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}

ReactTestRenderer.create(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
);

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000000000000001)',
'log: <Wrapper/>',
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000010000000000000000000000000)',
'log: <Example/>',
'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
]);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log concurrent render with suspense', async () => {
const fakeSuspensePromise = Promise.resolve(true);
Expand Down Expand Up @@ -130,6 +169,52 @@ describe('DebugTracing', () => {
expect(logs).toEqual(['log: ⚛️ Example resolved']);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log concurrent render with CPU suspense', () => {
function Example() {
console.log('<Example/>');
return null;
}

function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}

ReactTestRenderer.create(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
{unstable_isConcurrent: true},
);

expect(logs).toEqual([]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: <Wrapper/>',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);

logs.splice(0);

expect(Scheduler).toFlushUntilNextPaint([]);

expect(logs).toEqual([
'group: ⚛️ render (0b0000010000000000000000000000000)',
'log: <Example/>',
'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
]);
});

// @gate experimental && build === 'development' && enableDebugTracing
it('should log cascading class component updates', () => {
class Example extends React.Component {
Expand Down Expand Up @@ -191,12 +276,23 @@ describe('DebugTracing', () => {
expect(Scheduler).toFlushUntilNextPaint([]);
}).toErrorDev('Cannot update during an existing state transition');

expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
gate(flags => {
if (flags.new) {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
} else {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
}
});
});

// @gate experimental && build === 'development' && enableDebugTracing
Expand Down Expand Up @@ -274,12 +370,24 @@ describe('DebugTracing', () => {
{unstable_isConcurrent: true},
);
});
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);

gate(flags => {
if (flags.new) {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
} else {
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000001000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
]);
}
});
});

// @gate experimental && build === 'development' && enableDebugTracing
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/forks/ReactFeatureFlags.www-dynamic.js
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@ export const enableEagerRootListeners = !__VARIANT__;
// It logs information to the console about React scheduling, rendering, and commit phases.
//
// NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
export const enableDebugTracing = false;
export const enableDebugTracing = __EXPERIMENTAL__;

// This only has an effect in the new reconciler. But also, the new reconciler
// is only enabled when __VARIANT__ is true. So this is set to the opposite of
Expand Down