mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
77ec61885f
There are not so many changes, most of them are changing imports,
because I've moved types for UI in a single file.
In https://github.com/facebook/react/pull/27357 I've added support for
pausing polling events: when user inspects an element, we start polling
React DevTools backend for updates in props / state. If user switches
tabs, extension's service worker can be killed by browser and this
polling will start spamming errors.
What I've missed is that we also have a separate call for this API, but
which is executed only once when user selects an element. We don't
handle promise rejection here and this can lead to some errors when user
selects an element and switches tabs right after it.
The only change here is that this API now has
`shouldListenToPauseEvents` param, which is `true` for polling, so we
will pause polling once user switches tabs. It is `false` by default, so
we won't pause initial call by accident.
af8beeebf6/packages/react-devtools-shared/src/backendAPI.js (L96)
252 lines
7.9 KiB
JavaScript
252 lines
7.9 KiB
JavaScript
/**
|
|
* 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());
|
|
});
|
|
});
|