From 447fc27e3613d9fd026fbf48aa8a5e5a3f5167d4 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Thu, 7 Mar 2024 17:59:37 +0000
Subject: [PATCH] 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
---
 .../__tests__/__e2e__/components.test.js      | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
index 03de73decb8c5..bc174beaaed33 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
@@ -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 () => {