mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
fix[devtools/e2e]: fixed source inspection in e2e tests (#28518)
DevTools e2e tests started to fail after landing https://github.com/facebook/react/pull/28471: - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798270 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798275 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798271 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798274 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798269 There are 2 reasons for that: 1. Versions 16.0 and 16.5 use legacy renderer, which doesn't support source inspection by design:850fac4915/packages/react-devtools-shared/src/backend/legacy/renderer.js (L831)The corresponding e2e test is now gated for versions >=16.8 2. For other versions (>=16.8), the source is actually `e2e-app-regression.js`, because these regression tests open a different page (not the one we open for tests against React from source)850fac4915/packages/react-devtools-inline/playwright.config.js (L15-L17)
This commit is contained in:
@@ -59,7 +59,7 @@ test.describe('Components', () => {
|
||||
const isEditableValue = semver.gte(config.use.react_version, '16.8.0');
|
||||
|
||||
// Then read the inspected values.
|
||||
const [propName, propValue, sourceText] = await page.evaluate(
|
||||
const [propName, propValue] = await page.evaluate(
|
||||
isEditable => {
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
@@ -85,21 +85,41 @@ test.describe('Components', () => {
|
||||
createTestNameSelector('InspectedElementPropsTree'),
|
||||
createTestNameSelector(selectorValue),
|
||||
])[0];
|
||||
const source = findAllNodes(container, [
|
||||
createTestNameSelector('InspectedElementView-Source'),
|
||||
])[0];
|
||||
const value = isEditable.value
|
||||
? valueElement.value
|
||||
: valueElement.innerText;
|
||||
|
||||
return [name, value, source.innerText];
|
||||
return [name, value];
|
||||
},
|
||||
{name: isEditableName, value: isEditableValue}
|
||||
);
|
||||
|
||||
expect(propName).toBe('label');
|
||||
expect(propValue).toBe('"one"');
|
||||
expect(sourceText).toMatch(/e2e-app[a-zA-Z]*\.js/);
|
||||
});
|
||||
|
||||
test('Should allow inspecting source of the element', async () => {
|
||||
// Source inspection is available only in modern renderer.
|
||||
runOnlyForReactRange('>=16.8');
|
||||
|
||||
// Select the first list item in DevTools.
|
||||
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
|
||||
|
||||
// Then read the inspected values.
|
||||
const sourceText = await page.evaluate(() => {
|
||||
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const source = findAllNodes(container, [
|
||||
createTestNameSelector('InspectedElementView-Source'),
|
||||
])[0];
|
||||
|
||||
return source.innerText;
|
||||
});
|
||||
|
||||
// If React version is specified, the e2e-regression.html page will be used
|
||||
// If not, then e2e.html, see playwright.config.js, how url is constructed
|
||||
expect(sourceText).toMatch(/e2e-app[\-a-zA-Z]*\.js/);
|
||||
});
|
||||
|
||||
test('should allow props to be edited', async () => {
|
||||
|
||||
Reference in New Issue
Block a user