Scribd
Upload
14 views5 pages

Profilerstore Test

The document describes tests for the ProfilerStore component in React. It tests that profiling data is not removed when roots are unmounted, that new profiling data cannot be set while profiling is in progress, and that empty commits are properly filtered.

Uploaded by

mahoraga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views5 pages

Profilerstore Test

The document describes tests for the ProfilerStore component in React. It tests that profiling data is not removed when roots are unmounted, that new profiling data cannot be set while profiling is in progress, and that empty commits are properly filtered.

Uploaded by

mahoraga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

/**

* Copyright (c) Meta Platforms, Inc. and affiliates.


*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import type Store from 'react-devtools-shared/src/devtools/store';

describe('ProfilerStore', () => {
let React;
let ReactDOM;
let legacyRender;
let store: Store;
let utils;

beforeEach(() => {
utils = require('./utils');
utils.beforeEachProfiling();

legacyRender = utils.legacyRender;

store = global.store;
store.collapseNodesByDefault = false;
store.recordChangeDescriptions = true;

React = require('react');
ReactDOM = require('react-dom');
});

// @reactVersion >= 16.9


it('should not remove profiling data when roots are unmounted', async () => {
const Parent = ({count}) =>
new Array(count)
.fill(true)
.map((_, index) => <Child key={index} duration={index} />);
const Child = () => <div>Hi!</div>;

const containerA = document.createElement('div');


const containerB = document.createElement('div');

utils.act(() => {
legacyRender(<Parent key="A" count={3} />, containerA);
legacyRender(<Parent key="B" count={2} />, containerB);
});

utils.act(() => store.profilerStore.startProfiling());

utils.act(() => {
legacyRender(<Parent key="A" count={4} />, containerA);
legacyRender(<Parent key="B" count={1} />, containerB);
});

utils.act(() => store.profilerStore.stopProfiling());

const rootA = store.roots[0];


const rootB = store.roots[1];
utils.act(() => ReactDOM.unmountComponentAtNode(containerB));

expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();

utils.act(() => ReactDOM.unmountComponentAtNode(containerA));

expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
});

// @reactVersion >= 16.9


it('should not allow new/saved profiling data to be set while profiling is in
progress', () => {
utils.act(() => store.profilerStore.startProfiling());
const fauxProfilingData = {
dataForRoots: new Map(),
};
jest.spyOn(console, 'warn').mockImplementation(() => {});
store.profilerStore.profilingData = fauxProfilingData;
expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);
expect(console.warn).toHaveBeenCalledTimes(1);
expect(console.warn).toHaveBeenCalledWith(
'Profiling data cannot be updated while profiling is in progress.',
);
utils.act(() => store.profilerStore.stopProfiling());
store.profilerStore.profilingData = fauxProfilingData;
expect(store.profilerStore.profilingData).toBe(fauxProfilingData);
});

// @reactVersion >= 16.9


// This test covers current broken behavior (arguably) with the synthetic event
system.
it('should filter empty commits', () => {
const inputRef = React.createRef();
const ControlledInput = () => {
const [name, setName] = React.useState('foo');
const handleChange = event => setName(event.target.value);
return <input ref={inputRef} value={name} onChange={handleChange} />;
};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.


// The root API does not trigger this particular failing case.
legacyRender(<ControlledInput />, container);

utils.act(() => store.profilerStore.startProfiling());

// Sets a value in a way that React doesn't see,


// so that a subsequent "change" event will trigger the event handler.
const setUntrackedValue = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
'value',
).set;

const target = inputRef.current;


setUntrackedValue.call(target, 'bar');
target.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
expect(target.value).toBe('bar');

utils.act(() => store.profilerStore.stopProfiling());

// Only one commit should have been recorded (in response to the "change"
event).
const root = store.roots[0];
const data = store.profilerStore.getDataForRoot(root);
expect(data.commitData).toHaveLength(1);
expect(data.operations).toHaveLength(1);
});

// @reactVersion >= 16.9


it('should filter empty commits alt', () => {
let commitCount = 0;

const inputRef = React.createRef();


const Example = () => {
const [, setTouched] = React.useState(false);

const handleBlur = () => {


setTouched(true);
};

require('scheduler').unstable_advanceTime(1);

React.useLayoutEffect(() => {
commitCount++;
});

return <input ref={inputRef} onBlur={handleBlur} />;


};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.


// The root API does not trigger this particular failing case.
legacyRender(<Example />, container);

expect(commitCount).toBe(1);
commitCount = 0;

utils.act(() => store.profilerStore.startProfiling());

// Focus and blur.


const target = inputRef.current;
target.focus();
target.blur();
target.focus();
target.blur();
expect(commitCount).toBe(1);

utils.act(() => store.profilerStore.stopProfiling());


// Only one commit should have been recorded (in response to the "change"
event).
const root = store.roots[0];
const data = store.profilerStore.getDataForRoot(root);
expect(data.commitData).toHaveLength(1);
expect(data.operations).toHaveLength(1);
});

// @reactVersion >= 16.9


it('should throw if component filters are modified while profiling', () => {
utils.act(() => store.profilerStore.startProfiling());

expect(() => {
utils.act(() => {
const {
ElementTypeHostComponent,
} = require('react-devtools-shared/src/frontend/types');
store.componentFilters = [
utils.createElementTypeFilter(ElementTypeHostComponent),
];
});
}).toThrow('Cannot modify filter preferences while profiling');
});

// @reactVersion >= 16.9


it('should not throw if state contains a property hasOwnProperty ', () => {
let setStateCallback;
const ControlledInput = () => {
const [state, setState] = React.useState({hasOwnProperty: true});
setStateCallback = setState;
return state.hasOwnProperty;
};

const container = document.createElement('div');

// This element has to be in the <body> for the event system to work.
document.body.appendChild(container);

// It's important that this test uses legacy sync mode.


// The root API does not trigger this particular failing case.
legacyRender(<ControlledInput />, container);

utils.act(() => store.profilerStore.startProfiling());


utils.act(() =>
setStateCallback({
hasOwnProperty: false,
}),
);
utils.act(() => store.profilerStore.stopProfiling());

// Only one commit should have been recorded (in response to the "change"
event).
const root = store.roots[0];
const data = store.profilerStore.getDataForRoot(root);
expect(data.commitData).toHaveLength(1);
expect(data.operations).toHaveLength(1);
});

// @reactVersion >= 18.0


it('should not throw while initializing context values for Fibers within a not-
yet-mounted subtree', () => {
const promise = new Promise(resolve => {});
const SuspendingView = () => {
throw promise;
};

const App = () => {


return (
<React.Suspense fallback="Fallback">
<SuspendingView />
</React.Suspense>
);
};

const container = document.createElement('div');

utils.act(() => legacyRender(<App />, container));


utils.act(() => store.profilerStore.startProfiling());
});
});

You might also like