OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Refactored DevTools test shell for e2e (#22968)

Browse Source 
Fixes a regression in the e2e target and makes things easier (hopefully) going forward when adding new e2e tests.
This commit is contained in:
Brian Vaughn 2021-12-15 11:42:59 -05:00 committed by GitHub
parent e59233aa85
commit aa8f2bdbce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 106 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
View File

@ -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]);
}

40
packages/react-devtools-shell/e2e.html Normal file
View File

@ -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>

5
packages/react-devtools-shell/app.html → packages/react-devtools-shell/index.html
View File

@ -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>

4
packages/react-devtools-shell/package.json
View File

@ -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",

20
packages/react-devtools-shell/src/e2e/app.js vendored Normal file
View File

@ -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));

34
packages/react-devtools-shell/src/e2e/devtools.js vendored Normal file
View File

@ -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');

2
packages/react-devtools-shell/webpack.config.js
View File

@ -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',