Refactored DevTools test shell for e2e (#22968)

Fixes a regression in the e2e target and makes things easier (hopefully) going forward when adding new e2e tests.
facebook · Dec 15, 2021 · aa8f2bd · aa8f2bd
1 parent e59233a
commit aa8f2bd
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 9 deletions.
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
@@ -8,9 +8,11 @@ test.describe('Testing Todo-List App', () => {
   let page, frameElementHandle, frame;
   test.beforeAll(async ({browser}) => {
     page = await browser.newPage();
-    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
-    await page.waitForSelector('iframe#target');
-    frameElementHandle = await page.$('#target');
+    await page.goto('http://localhost:8080/e2e.html', {
+      waitUntil: 'domcontentloaded',
+    });
+    await page.waitForSelector('iframe#iframe');
+    frameElementHandle = await page.$('#iframe');
     frame = await frameElementHandle.contentFrame();
   });
 
@@ -42,7 +44,7 @@ test.describe('Testing Todo-List App', () => {
     for (let i = 1; i <= countOfItems; ++i) {
       await page.click('[class^=ToggleContent]', {delay: 100});
       await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
-      await page.waitForSelector('span.Value___tNzum');
+      await page.waitForSelector('span[class^=Value]');
       const text = await page.innerText('span[class^=Value]');
       await expect(text).toEqual(listItemsProps[i]);
     }

diff --git a/packages/react-devtools-shell/e2e.html b/packages/react-devtools-shell/e2e.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+          sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      #iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+      #devtools {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="iframe"></iframe>
+    <div id="devtools"></div>
+    <script src="dist/e2e-devtools.js"></script>
+  </body>
+</html>
diff --git a/packages/react-devtools-shell/app.html → packages/react-devtools-shell/index.html b/packages/react-devtools-shell/app.html → packages/react-devtools-shell/index.html
@@ -48,8 +48,9 @@
       <button id="mountButton">Unmount test app</button>
       <div class="optionsRowSpacer">&nbsp;</div>
       <span>
-        <a href="https://react-devtools-experimental-chrome.now.sh/">Chrome extension</a>
-        <a href="https://react-devtools-experimental-firefox.now.sh/">Firefox extension</a>
+        <a href="/multi.html">multi DevTools</a>
+        |
+        <a href="/e2e.html">e2e tests</a>
       </span>
     </div>
 

diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
@@ -3,9 +3,7 @@
   "name": "react-devtools-shell",
   "version": "0.0.0",
   "scripts": {
-    "start": "yarn start:app",
-    "start:app": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page app.html",
-    "start:multi": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page multi.html"
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server"
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",

diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
@@ -0,0 +1,20 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import {createElement} from 'react';
+import {
+  // $FlowFixMe Flow does not yet know about createRoot()
+  createRoot,
+} from 'react-dom';
+import ToDoList from '../app/ToDoList';
+
+const container = document.createElement('div');
+
+((document.body: any): HTMLBodyElement).appendChild(container);
+
+// TODO We may want to parameterize this app
+// so that it can load things other than just ToDoList.
+
+const root = createRoot(container);
+root.render(createElement(ToDoList));
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
+
+function inject(contentDocument, sourcePath, callback) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
+
+function init(appIframe, devtoolsContainer, appSource) {
+  const {contentDocument, contentWindow} = appIframe;
+
+  initializeBackend(contentWindow);
+
+  const DevTools = createDevTools(contentWindow);
+
+  inject(contentDocument, appSource, () => {
+    createRoot(devtoolsContainer).render(<DevTools />);
+  });
+
+  activateBackend(contentWindow);
+}
+
+const iframe = document.getElementById('iframe');
+const devtoolsContainer = document.getElementById('devtools');
+
+init(iframe, devtoolsContainer, 'dist/e2e-app.js');
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
@@ -44,6 +44,8 @@ const config = {
   entry: {
     'app-index': './src/app/index.js',
     'app-devtools': './src/app/devtools.js',
+    'e2e-app': './src/e2e/app.js',
+    'e2e-devtools': './src/e2e/devtools.js',
     'multi-left': './src/multi/left.js',
     'multi-devtools': './src/multi/devtools.js',
     'multi-right': './src/multi/right.js',