105 lines
3.0 KiB
JavaScript
105 lines
3.0 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'
|
|
);
|
|
});
|
|
});
|