mirror of
https://github.com/facebook/react.git
synced 2026-02-23 20:23:02 +00:00
1328ff70cd
This PR: * Increases test retry count to 2 so that flaky tests have more of a chance to pass * Ideally most e2e tests will run for all React versions (and ensure DevTools elegantly fails if React doesn't support its features). However, some features aren't supported in older React versions at all (ex. Profiling) Add runOnlyForReactRange function in these cases to skip tests that don't satisfy the correct React semver range * Fix should allow searching for component by name test, which was flaky because sometimes the Searchbox would be unfocused the second time we try to type in it * Edited test Should allow elements to be inspected to check that element inspect gracefully fails in older React versions * Updated config to add a config.use.url field and a config.use.react_version field, which change depending on the React Version (and whether it's specified)
107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
/** @flow */
|
|
|
|
'use strict';
|
|
|
|
const {runOnlyForReactRange} = require('./utils');
|
|
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(config.use.url, {
|
|
waitUntil: 'domcontentloaded',
|
|
});
|
|
|
|
await page.waitForSelector('#iframe');
|
|
|
|
await devToolsUtils.clickButton(page, 'TabBarButton-profiler');
|
|
});
|
|
|
|
test('should record renders and commits when active', async () => {
|
|
// Profiling is only available in 16.5 and over
|
|
runOnlyForReactRange('>=16.5');
|
|
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 clickButtonAndVerifySnapshotSelectorText(
|
|
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 clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-NextButton',
|
|
'2 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-NextButton',
|
|
'3 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-NextButton',
|
|
'1 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'3 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'2 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'1 / 3'
|
|
);
|
|
await clickButtonAndVerifySnapshotSelectorText(
|
|
'SnapshotSelector-PreviousButton',
|
|
'3 / 3'
|
|
);
|
|
});
|
|
});
|