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.
Brian Vaughn committed
Dec 15, 2021 at 11:42 UTC
aa8f2bdbce0aa8d5128461190f7ea40f891cb78e
7 files changed
+106
-9
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
+6
-4
@@ -8,9 +8,11 @@ test.describe('Testing Todo-List App', () => {
8
let page, frameElementHandle, frame;
9
test.beforeAll(async ({browser}) => {
10
page = await browser.newPage();
11
- await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
12
- await page.waitForSelector('iframe#target');
13
- frameElementHandle = await page.$('#target');
11
+ await page.goto('http://localhost:8080/e2e.html', {
12
+ waitUntil: 'domcontentloaded',
13
+ });
14
+ await page.waitForSelector('iframe#iframe');
15
+ frameElementHandle = await page.$('#iframe');
16
frame = await frameElementHandle.contentFrame();
17
});
18
@@ -42,7 +44,7 @@ test.describe('Testing Todo-List App', () => {
44
for (let i = 1; i <= countOfItems; ++i) {
45
await page.click('[class^=ToggleContent]', {delay: 100});
46
await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
45
- await page.waitForSelector('span.Value___tNzum');
47
+ await page.waitForSelector('span[class^=Value]');
48
const text = await page.innerText('span[class^=Value]');
49
await expect(text).toEqual(listItemsProps[i]);
50
}
packages/react-devtools-shell/e2e.html
new
+40
@@ -0,0 +1,40 @@
1
+<!doctype html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf8">
5
+ <title>React DevTools</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ }
11
+ body {
12
+ margin: 0;
13
+ padding: 0;
14
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
15
+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
16
+ font-size: 12px;
17
+ line-height: 1.5;
18
+ }
19
+ #iframe {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100vw;
24
+ height: 50vh;
25
+ }
26
+ #devtools {
27
+ position: absolute;
28
+ bottom: 0;
29
+ left: 0;
30
+ width: 100vw;
31
+ height: 50vh;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <iframe id="iframe"></iframe>
37
+ <div id="devtools"></div>
38
+ <script src="dist/e2e-devtools.js"></script>
39
+ </body>
40
+</html>
\ No newline at end of file
packages/react-devtools-shell/index.html
renamed
+3
-2
@@ -48,8 +48,9 @@
48
<button id="mountButton">Unmount test app</button>
49
<div class="optionsRowSpacer"> </div>
50
<span>
51
- <a href="https://react-devtools-experimental-chrome.now.sh/">Chrome extension</a>
52
- <a href="https://react-devtools-experimental-firefox.now.sh/">Firefox extension</a>
51
+ <a href="/multi.html">multi DevTools</a>
52
+ |
53
+ <a href="/e2e.html">e2e tests</a>
54
</span>
55
</div>
56
packages/react-devtools-shell/package.json
+1
-3
@@ -3,9 +3,7 @@
3
"name": "react-devtools-shell",
4
"version": "0.0.0",
5
"scripts": {
6
- "start": "yarn start:app",
7
- "start:app": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page app.html",
8
- "start:multi": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page multi.html"
6
+ "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server"
7
},
8
"dependencies": {
9
"immutable": "^4.0.0-rc.12",
packages/react-devtools-shell/src/e2e/app.js
new
+20
@@ -0,0 +1,20 @@
1
+/** @flow */
2
+
3
+// This test harness mounts each test app as a separate root to test multi-root applications.
4
+
5
+import {createElement} from 'react';
6
+import {
7
+ // $FlowFixMe Flow does not yet know about createRoot()
8
+ createRoot,
9
+} from 'react-dom';
10
+import ToDoList from '../app/ToDoList';
11
+
12
+const container = document.createElement('div');
13
+
14
+((document.body: any): HTMLBodyElement).appendChild(container);
15
+
16
+// TODO We may want to parameterize this app
17
+// so that it can load things other than just ToDoList.
18
+
19
+const root = createRoot(container);
20
+root.render(createElement(ToDoList));
packages/react-devtools-shell/src/e2e/devtools.js
new
+34
@@ -0,0 +1,34 @@
1
+import * as React from 'react';
2
+import {createRoot} from 'react-dom';
3
+import {
4
+ activate as activateBackend,
5
+ initialize as initializeBackend,
6
+} from 'react-devtools-inline/backend';
7
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
8
+
9
+function inject(contentDocument, sourcePath, callback) {
10
+ const script = contentDocument.createElement('script');
11
+ script.onload = callback;
12
+ script.src = sourcePath;
13
+
14
+ ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
15
+}
16
+
17
+function init(appIframe, devtoolsContainer, appSource) {
18
+ const {contentDocument, contentWindow} = appIframe;
19
+
20
+ initializeBackend(contentWindow);
21
+
22
+ const DevTools = createDevTools(contentWindow);
23
+
24
+ inject(contentDocument, appSource, () => {
25
+ createRoot(devtoolsContainer).render(<DevTools />);
26
+ });
27
+
28
+ activateBackend(contentWindow);
29
+}
30
+
31
+const iframe = document.getElementById('iframe');
32
+const devtoolsContainer = document.getElementById('devtools');
33
+
34
+init(iframe, devtoolsContainer, 'dist/e2e-app.js');
packages/react-devtools-shell/webpack.config.js
+2
@@ -44,6 +44,8 @@ const config = {
44
entry: {
45
'app-index': './src/app/index.js',
46
'app-devtools': './src/app/devtools.js',
47
+ 'e2e-app': './src/e2e/app.js',
48
+ 'e2e-devtools': './src/e2e/devtools.js',
49
'multi-left': './src/multi/left.js',
50
'multi-devtools': './src/multi/devtools.js',
51
'multi-right': './src/multi/right.js',