mirror of
https://github.com/facebook/react.git
synced 2026-02-23 12:13:04 +00:00
aa4eae6b99
There is a weird behaviour in all shells of RDT: when user opens
`Components` tab and scrolls down a tree (without any prior click or
focus event), and then clicks on some element, the `click` event will
not be fired. Because `click` event hasn't been fired, the `focus` event
is fired for the whole list and we pre-select the first (root) element
in the tree:
034130c02f/packages/react-devtools-shared/src/devtools/views/Components/Tree.js (L217-L226)
Check the demo (before) what is happening. I don't know exactly why
`click` event is not fired there, but it only happens:
1. For elements, which were not previously rendered (for virtualization
purposes).
2. When HTML-element (div), which represents the container for the tree
was not focused previously.
Unlike the `click` event, the `mousedown` event is fired consistently.
### Before
https://github.com/facebook/react/assets/28902667/9f3ad75d-55d0-4c99-b2d0-ead63a120ea0
### After
https://github.com/facebook/react/assets/28902667/e34816be-644c-444c-8e32-562a79494e44
Tested that it works in all shells, including the select / deselect
features (with `metaKey` param in event).
79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
'use strict';
|
|
|
|
/** @flow */
|
|
|
|
async function clickButton(page, buttonTestName) {
|
|
await page.evaluate(testName => {
|
|
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
|
|
const button = findAllNodes(container, [
|
|
createTestNameSelector(testName),
|
|
])[0];
|
|
button.click();
|
|
}, buttonTestName);
|
|
}
|
|
|
|
async function getElementCount(page, displayName) {
|
|
return await page.evaluate(listItemText => {
|
|
const {createTestNameSelector, createTextSelector, findAllNodes} =
|
|
window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
const rows = findAllNodes(container, [
|
|
createTestNameSelector('ComponentTreeListItem'),
|
|
createTextSelector(listItemText),
|
|
]);
|
|
return rows.length;
|
|
}, displayName);
|
|
}
|
|
|
|
async function selectElement(page, displayName, waitForOwnersText) {
|
|
await page.evaluate(listItemText => {
|
|
const {createTestNameSelector, createTextSelector, findAllNodes} =
|
|
window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
|
|
const listItem = findAllNodes(container, [
|
|
createTestNameSelector('ComponentTreeListItem'),
|
|
createTextSelector(listItemText),
|
|
])[0];
|
|
|
|
listItem.dispatchEvent(
|
|
new MouseEvent('mousedown', {bubbles: true, cancelable: true})
|
|
);
|
|
}, displayName);
|
|
|
|
if (waitForOwnersText) {
|
|
// Wait for selected element's props to load.
|
|
await page.waitForFunction(
|
|
({titleText, ownersListText}) => {
|
|
const {createTestNameSelector, findAllNodes} =
|
|
window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
|
|
const title = findAllNodes(container, [
|
|
createTestNameSelector('InspectedElement-Title'),
|
|
])[0];
|
|
|
|
const ownersList = findAllNodes(container, [
|
|
createTestNameSelector('InspectedElementView-Owners'),
|
|
])[0];
|
|
|
|
return (
|
|
title &&
|
|
title.innerText.includes(titleText) &&
|
|
ownersList &&
|
|
ownersList.innerText.includes(ownersListText)
|
|
);
|
|
},
|
|
{titleText: displayName, ownersListText: waitForOwnersText}
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
clickButton,
|
|
getElementCount,
|
|
selectElement,
|
|
};
|