Skip to content

Commit 809aeba

Browse files
author
Brian Vaughn
committed
Use ReactDOM Test Selector API in DevTools e2e tests
Builds on top of the existing Playwright tests to plug in the test selector API. My goals in doing this are to... 1. Experiment with the new API to see what works and what doesn't. 2. Add some test selector attributes (and remove DOM-structure based selectors). 3. Focus the tests on DevTools itself (rather than the test app). I also took this opportunity to add a few new test types like named hooks, component search, and profiler– just to play around with the Playwright API.
1 parent ceee524 commit 809aeba

24 files changed

Lines changed: 549 additions & 74 deletions

‎packages/react-devtools-inline/__tests__/__e2e__/components.test.js‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/** @flow */
2+
3+
'use strict';
4+
5+
const listAppUtils = require('./list-app-utils');
6+
const devToolsUtils = require('./devtools-utils');
7+
const {test, expect} = require('@playwright/test');
8+
const config = require('../../playwright.config');
9+
test.use(config);
10+
test.describe('Components', () => {
11+
let page;
12+
13+
test.beforeEach(async ({browser}) => {
14+
page = await browser.newPage();
15+
16+
await page.goto('http://localhost:8080/e2e.html', {
17+
waitUntil: 'domcontentloaded',
18+
});
19+
20+
await page.waitForSelector('#iframe');
21+
22+
await devToolsUtils.clickButton(page, 'TabBarButton-components');
23+
});
24+
25+
test('Should display initial React components', async () => {
26+
const appRowCount = await page.evaluate(() => {
27+
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
28+
const container = document.getElementById('iframe').contentDocument;
29+
const rows = findAllNodes(container, [
30+
createTestNameSelector('ListItem'),
31+
]);
32+
return rows.length;
33+
});
34+
expect(appRowCount).toBe(3);
35+
36+
const devToolsRowCount = await devToolsUtils.getElementCount(
37+
page,
38+
'ListItem'
39+
);
40+
expect(devToolsRowCount).toBe(3);
41+
});
42+
43+
test('Should display newly added React components', async () => {
44+
await listAppUtils.addItem(page, 'four');
45+
46+
const count = await devToolsUtils.getElementCount(page, 'ListItem');
47+
expect(count).toBe(4);
48+
});
49+
50+
test('Should allow elements to be inspected', async () => {
51+
// Select the first list item in DevTools.
52+
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
53+
54+
// Then read the inspected values.
55+
const [propName, propValue, sourceText] = await page.evaluate(() => {
56+
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
57+
const container = document.getElementById('devtools');
58+
59+
const editableName = findAllNodes(container, [
60+
createTestNameSelector('InspectedElementPropsTree'),
61+
createTestNameSelector('EditableName'),
62+
])[0];
63+
const editableValue = findAllNodes(container, [
64+
createTestNameSelector('InspectedElementPropsTree'),
65+
createTestNameSelector('EditableValue'),
66+
])[0];
67+
const source = findAllNodes(container, [
68+
createTestNameSelector('InspectedElementView-Source'),
69+
])[0];
70+
71+
return [editableName.value, editableValue.value, source.innerText];
72+
});
73+
74+
expect(propName).toBe('label');
75+
expect(propValue).toBe('"one"');
76+
expect(sourceText).toContain('ListApp.js');
77+
});
78+
79+
test('should allow props to be edited', async () => {
80+
// Select the first list item in DevTools.
81+
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
82+
83+
// Then edit the label prop.
84+
await page.evaluate(() => {
85+
const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
86+
const container = document.getElementById('devtools');
87+
88+
focusWithin(container, [
89+
createTestNameSelector('InspectedElementPropsTree'),
90+
createTestNameSelector('EditableValue'),
91+
]);
92+
});
93+
94+
page.keyboard.press('Backspace'); // "
95+
page.keyboard.press('Backspace'); // e
96+
page.keyboard.press('Backspace'); // n
97+
page.keyboard.press('Backspace'); // o
98+
page.keyboard.insertText('new"');
99+
page.keyboard.press('Enter');
100+
101+
await page.waitForFunction(() => {
102+
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
103+
const container = document.getElementById('iframe').contentDocument;
104+
const rows = findAllNodes(container, [
105+
createTestNameSelector('ListItem'),
106+
])[0];
107+
return rows.innerText === 'new';
108+
});
109+
});
110+
111+
test('should load and parse hook names for the inspected element', async () => {
112+
// Select the List component DevTools.
113+
await devToolsUtils.selectElement(page, 'List', 'App');
114+
115+
// Then click to load and parse hook names.
116+
await devToolsUtils.clickButton(page, 'LoadHookNamesButton');
117+
118+
// Make sure the expected hook names are parsed and displayed eventually.
119+
await page.waitForFunction(
120+
hookNames => {
121+
const {
122+
createTestNameSelector,
123+
findAllNodes,
124+
} = window.REACT_DOM_DEVTOOLS;
125+
const container = document.getElementById('devtools');
126+
127+
const hooksTree = findAllNodes(container, [
128+
createTestNameSelector('InspectedElementHooksTree'),
129+
])[0];
130+
131+
if (!hooksTree) {
132+
return false;
133+
}
134+
135+
const hooksTreeText = hooksTree.innerText;
136+
137+
for (let i = 0; i < hookNames.length; i++) {
138+
if (!hooksTreeText.includes(hookNames[i])) {
139+
return false;
140+
}
141+
}
142+
143+
return true;
144+
},
145+
['State(items)', 'Ref(inputRef)']
146+
);
147+
});
148+
149+
test('should allow searching for component by name', async () => {
150+
async function getComponentSearchResultsCount() {
151+
return await page.evaluate(() => {
152+
const {
153+
createTestNameSelector,
154+
findAllNodes,
155+
} = window.REACT_DOM_DEVTOOLS;
156+
const container = document.getElementById('devtools');
157+
158+
const element = findAllNodes(container, [
159+
createTestNameSelector('ComponentSearchInput-ResultsCount'),
160+
])[0];
161+
return element.innerText;
162+
});
163+
}
164+
165+
await page.evaluate(() => {
166+
const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
167+
const container = document.getElementById('devtools');
168+
169+
focusWithin(container, [
170+
createTestNameSelector('ComponentSearchInput-Input'),
171+
]);
172+
});
173+
174+
page.keyboard.insertText('List');
175+
let count = await getComponentSearchResultsCount();
176+
expect(count).toBe('1 | 4');
177+
178+
page.keyboard.insertText('Item');
179+
count = await getComponentSearchResultsCount();
180+
expect(count).toBe('1 | 3');
181+
182+
page.keyboard.press('Enter');
183+
count = await getComponentSearchResultsCount();
184+
expect(count).toBe('2 | 3');
185+
186+
page.keyboard.press('Enter');
187+
count = await getComponentSearchResultsCount();
188+
expect(count).toBe('3 | 3');
189+
190+
page.keyboard.press('Enter');
191+
count = await getComponentSearchResultsCount();
192+
expect(count).toBe('1 | 3');
193+
194+
page.keyboard.press('Shift+Enter');
195+
count = await getComponentSearchResultsCount();
196+
expect(count).toBe('3 | 3');
197+
198+
page.keyboard.press('Shift+Enter');
199+
count = await getComponentSearchResultsCount();
200+
expect(count).toBe('2 | 3');
201+
202+
page.keyboard.press('Shift+Enter');
203+
count = await getComponentSearchResultsCount();
204+
expect(count).toBe('1 | 3');
205+
});
206+
});

‎packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use strict';
2+
3+
/** @flow */
4+
5+
async function clickButton(page, buttonTestName) {
6+
await page.evaluate(testName => {
7+
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
8+
const container = document.getElementById('devtools');
9+
10+
const button = findAllNodes(container, [
11+
createTestNameSelector(testName),
12+
])[0];
13+
button.click();
14+
}, buttonTestName);
15+
}
16+
17+
async function getElementCount(page, displayName) {
18+
return await page.evaluate(listItemText => {
19+
const {
20+
createTestNameSelector,
21+
createTextSelector,
22+
findAllNodes,
23+
} = window.REACT_DOM_DEVTOOLS;
24+
const container = document.getElementById('devtools');
25+
const rows = findAllNodes(container, [
26+
createTestNameSelector('ComponentTreeListItem'),
27+
createTextSelector(listItemText),
28+
]);
29+
return rows.length;
30+
}, displayName);
31+
}
32+
33+
async function selectElement(page, displayName, waitForOwnersText) {
34+
await page.evaluate(listItemText => {
35+
const {
36+
createTestNameSelector,
37+
createTextSelector,
38+
findAllNodes,
39+
} = window.REACT_DOM_DEVTOOLS;
40+
const container = document.getElementById('devtools');
41+
42+
const listItem = findAllNodes(container, [
43+
createTestNameSelector('ComponentTreeListItem'),
44+
createTextSelector(listItemText),
45+
])[0];
46+
listItem.click();
47+
}, displayName);
48+
49+
if (waitForOwnersText) {
50+
// Wait for selected element's props to load.
51+
await page.waitForFunction(
52+
({titleText, ownersListText}) => {
53+
const {
54+
createTestNameSelector,
55+
findAllNodes,
56+
} = window.REACT_DOM_DEVTOOLS;
57+
const container = document.getElementById('devtools');
58+
59+
const title = findAllNodes(container, [
60+
createTestNameSelector('InspectedElement-Title'),
61+
])[0];
62+
63+
const ownersList = findAllNodes(container, [
64+
createTestNameSelector('InspectedElementView-Owners'),
65+
])[0];
66+
67+
return (
68+
title &&
69+
title.innerText.includes(titleText) &&
70+
ownersList &&
71+
ownersList.innerText.includes(ownersListText)
72+
);
73+
},
74+
{titleText: displayName, ownersListText: waitForOwnersText}
75+
);
76+
}
77+
}
78+
79+
module.exports = {
80+
clickButton,
81+
getElementCount,
82+
selectElement,
83+
};

‎packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
/** @flow */
4+
5+
async function addItem(page, newItemText) {
6+
await page.evaluate(text => {
7+
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
8+
const container = document.getElementById('iframe').contentDocument;
9+
10+
const input = findAllNodes(container, [
11+
createTestNameSelector('AddItemInput'),
12+
])[0];
13+
input.value = text;
14+
15+
const button = findAllNodes(container, [
16+
createTestNameSelector('AddItemButton'),
17+
])[0];
18+
19+
button.click();
20+
}, newItemText);
21+
}
22+
23+
module.exports = {
24+
addItem,
25+
};

0 commit comments

Comments
 (0)