@samitouri / QOS-React-2 / commits / 447fc27e36

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: https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/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) https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-inline/playwright.config.js#L15-L17

Ruslan Lesiutin committed Mar 7, 2024 at 17:59 UTC 447fc27e3613d9fd026fbf48aa8a5e5a3f5167d4
1 file changed +26 -6
packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+26 -6
@@ -59,7 +59,7 @@ test.describe('Components', () => {
59 const isEditableValue = semver.gte(config.use.react_version, '16.8.0');
60
61 // Then read the inspected values.
62 - const [propName, propValue, sourceText] = await page.evaluate(
62 + const [propName, propValue] = await page.evaluate(
63 isEditable => {
64 const {createTestNameSelector, findAllNodes} =
65 window.REACT_DOM_DEVTOOLS;
@@ -85,21 +85,41 @@ test.describe('Components', () => {
85 createTestNameSelector('InspectedElementPropsTree'),
86 createTestNameSelector(selectorValue),
87 ])[0];
88 - const source = findAllNodes(container, [
89 - createTestNameSelector('InspectedElementView-Source'),
90 - ])[0];
88 const value = isEditable.value
89 ? valueElement.value
90 : valueElement.innerText;
91
95 - return [name, value, source.innerText];
92 + return [name, value];
93 },
94 {name: isEditableName, value: isEditableValue}
95 );
96
97 expect(propName).toBe('label');
98 expect(propValue).toBe('"one"');
102 - expect(sourceText).toMatch(/e2e-app[a-zA-Z]*\.js/);
99 + });
100 +
101 + test('Should allow inspecting source of the element', async () => {
102 + // Source inspection is available only in modern renderer.
103 + runOnlyForReactRange('>=16.8');
104 +
105 + // Select the first list item in DevTools.
106 + await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
107 +
108 + // Then read the inspected values.
109 + const sourceText = await page.evaluate(() => {
110 + const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
111 + const container = document.getElementById('devtools');
112 +
113 + const source = findAllNodes(container, [
114 + createTestNameSelector('InspectedElementView-Source'),
115 + ])[0];
116 +
117 + return source.innerText;
118 + });
119 +
120 + // If React version is specified, the e2e-regression.html page will be used
121 + // If not, then e2e.html, see playwright.config.js, how url is constructed
122 + expect(sourceText).toMatch(/e2e-app[\-a-zA-Z]*\.js/);
123 });
124
125 test('should allow props to be edited', async () => {