mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Brian Vaughn
a4ead704ba
Builds on top of the existing Playwright tests to plug in the test selector API: https://gist.github.com/bvaughn/d3c8b8842faf2ac2439bb11773a19cec 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 cases– like named hooks, editable props, component search, and profiling- just to play around more with the Playwright API. Relates to issue #22646
105 lines
2.9 KiB
JavaScript
105 lines
2.9 KiB
JavaScript
/** @flow */
|
|
|
|
'use strict';
|
|
|
|
const listAppUtils = require('./list-app-utils');
|
|
const devToolsUtils = require('./devtools-utils');
|
|
const {test, expect} = require('@playwright/test');
|
|
const config = require('../../playwright.config');
|
|
test.use(config);
|
|
test.describe('Profiler', () => {
|
|
let page;
|
|
|
|
test.beforeEach(async ({browser}) => {
|
|
page = await browser.newPage();
|
|
|
|
await page.goto('http://localhost:8080/e2e.html', {
|
|
waitUntil: 'domcontentloaded',
|
|
});
|
|
|
|
await page.waitForSelector('#iframe');
|
|
|
|
await devToolsUtils.clickButton(page, 'TabBarButton-profiler');
|
|
});
|
|
|
|
test('should record renders and commits when active', async () => {
|
|
async function getSnapshotSelectorText() {
|
|
return await page.evaluate(() => {
|
|
const {
|
|
createTestNameSelector,
|
|
findAllNodes,
|
|
} = window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
|
|
const input = findAllNodes(container, [
|
|
createTestNameSelector('SnapshotSelector-Input'),
|
|
])[0];
|
|
const label = findAllNodes(container, [
|
|
createTestNameSelector('SnapshotSelector-Label'),
|
|
])[0];
|
|
return `${input.value}${label.innerText}`;
|
|
});
|
|
}
|
|
|
|
async function clickButtonAndVerifySnapshotSelecetorText(
|
|
buttonTagName,
|
|
expectedText
|
|
) {
|
|
await devToolsUtils.clickButton(page, buttonTagName);
|
|
const text = await getSnapshotSelectorText();
|
|
expect(text).toBe(expectedText);
|
|
}
|
|
|
|
await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
|
|
|
|
await listAppUtils.addItem(page, 'four');
|
|
await listAppUtils.addItem(page, 'five');
|
|
await listAppUtils.addItem(page, 'six');
|
|
|
|
await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
|
|
|
|
await page.waitForFunction(() => {
|
|
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
|
|
const container = document.getElementById('devtools');
|
|
|
|
const input = findAllNodes(container, [
|
|
createTestNameSelector('SnapshotSelector-Input'),
|
|
]);
|
|
|
|
return input.length === 1;
|
|
});
|
|
|
|
const text = await getSnapshotSelectorText();
|
|
expect(text).toBe('1 / 3');
|
|
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-NextButton',
|
|
'2 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-NextButton',
|
|
'3 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-NextButton',
|
|
'1 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'3 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'2 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'1 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelecetorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'3 / 3'
|
|
);
|
|
});
|
|
});
|