@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 204 lines 6.81 KB
Raw
1 /** @flow */
2
3 'use strict';
4
5 const {runOnlyForReactRange} = require('./utils');
6 const listAppUtils = require('./list-app-utils');
7 const devToolsUtils = require('./devtools-utils');
8 const {test, expect} = require('@playwright/test');
9 const config = require('../../playwright.config');
10 test.use(config);
11 test.describe('Profiler', () => {
12 let page;
13
14 test.beforeEach(async ({browser}) => {
15 page = await browser.newPage();
16 await page.goto(config.use.url, {
17 waitUntil: 'domcontentloaded',
18 });
19
20 await page.waitForSelector('#iframe');
21
22 await devToolsUtils.clickButton(page, 'TabBarButton-profiler');
23 });
24
25 test('should record renders and commits when active', async () => {
26 // Profiling is only available in 16.5 and over
27 runOnlyForReactRange('>=16.5');
28 async function getSnapshotSelectorText() {
29 return await page.evaluate(() => {
30 const {createTestNameSelector, findAllNodes} =
31 window.REACT_DOM_DEVTOOLS;
32 const container = document.getElementById('devtools');
33
34 const input = findAllNodes(container, [
35 createTestNameSelector('SnapshotSelector-Input'),
36 ])[0];
37 const label = findAllNodes(container, [
38 createTestNameSelector('SnapshotSelector-Label'),
39 ])[0];
40 return `${input.value}${label.innerText}`;
41 });
42 }
43
44 async function clickButtonAndVerifySnapshotSelectorText(
45 buttonTagName,
46 expectedText
47 ) {
48 await devToolsUtils.clickButton(page, buttonTagName);
49 const text = await getSnapshotSelectorText();
50 expect(text).toBe(expectedText);
51 }
52
53 await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
54
55 await listAppUtils.addItem(page, 'four');
56 await listAppUtils.addItem(page, 'five');
57 await listAppUtils.addItem(page, 'six');
58
59 await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
60
61 await page.waitForFunction(() => {
62 const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
63 const container = document.getElementById('devtools');
64
65 const input = findAllNodes(container, [
66 createTestNameSelector('SnapshotSelector-Input'),
67 ]);
68
69 return input.length === 1;
70 });
71
72 const text = await getSnapshotSelectorText();
73 expect(text).toBe('1 / 3');
74
75 await clickButtonAndVerifySnapshotSelectorText(
76 'SnapshotSelector-NextButton',
77 '2 / 3'
78 );
79 await clickButtonAndVerifySnapshotSelectorText(
80 'SnapshotSelector-NextButton',
81 '3 / 3'
82 );
83 await clickButtonAndVerifySnapshotSelectorText(
84 'SnapshotSelector-NextButton',
85 '1 / 3'
86 );
87 await clickButtonAndVerifySnapshotSelectorText(
88 'SnapshotSelector-PreviousButton',
89 '3 / 3'
90 );
91 await clickButtonAndVerifySnapshotSelectorText(
92 'SnapshotSelector-PreviousButton',
93 '2 / 3'
94 );
95 await clickButtonAndVerifySnapshotSelectorText(
96 'SnapshotSelector-PreviousButton',
97 '1 / 3'
98 );
99 await clickButtonAndVerifySnapshotSelectorText(
100 'SnapshotSelector-PreviousButton',
101 '3 / 3'
102 );
103 });
104
105 test('should allow searching for a component within the selected commit', async () => {
106 runOnlyForReactRange('>=16.5');
107
108 async function waitForSearchResultsCount(expectedText) {
109 return await page.waitForFunction(expected => {
110 const {createTestNameSelector, findAllNodes} =
111 window.REACT_DOM_DEVTOOLS;
112 const container = document.getElementById('devtools');
113
114 const indexInput = findAllNodes(container, [
115 createTestNameSelector('ProfilerSearchInput-ResultIndexInput'),
116 ])[0];
117 const resultsCount = findAllNodes(container, [
118 createTestNameSelector('ProfilerSearchInput-ResultsCount'),
119 ])[0];
120 if (indexInput === undefined || resultsCount === undefined) {
121 return false;
122 }
123 const totalCount = resultsCount.innerText.replace(/[^0-9]/g, '');
124 return `${indexInput.value} | ${totalCount}` === expected;
125 }, expectedText);
126 }
127
128 async function focusProfilerSearch() {
129 await page.evaluate(() => {
130 const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
131 const container = document.getElementById('devtools');
132
133 focusWithin(container, [
134 createTestNameSelector('ProfilerSearchInput-Input'),
135 ]);
136 });
137 }
138
139 await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
140 await listAppUtils.addItem(page, 'four');
141 await listAppUtils.addItem(page, 'five');
142 await listAppUtils.addItem(page, 'six');
143 await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
144
145 await page.waitForFunction(() => {
146 const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
147 const container = document.getElementById('devtools');
148 return (
149 findAllNodes(container, [
150 createTestNameSelector('SnapshotSelector-Input'),
151 ]).length === 1
152 );
153 });
154
155 await devToolsUtils.clickButton(page, 'ProfilerSearchButton');
156 await page.waitForFunction(() => {
157 const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
158 const container = document.getElementById('devtools');
159 return (
160 findAllNodes(container, [
161 createTestNameSelector('ProfilerSearchInput-Input'),
162 ]).length === 1
163 );
164 });
165
166 await focusProfilerSearch();
167 await page.keyboard.insertText('ListItem');
168 await waitForSearchResultsCount('1 | 4');
169
170 await devToolsUtils.clickButton(page, 'SnapshotSelector-NextButton');
171 await waitForSearchResultsCount('1 | 5');
172 await devToolsUtils.clickButton(page, 'SnapshotSelector-NextButton');
173 await waitForSearchResultsCount('1 | 6');
174 await devToolsUtils.clickButton(page, 'SnapshotSelector-PreviousButton');
175 await waitForSearchResultsCount('1 | 5');
176 await devToolsUtils.clickButton(page, 'SnapshotSelector-PreviousButton');
177 await waitForSearchResultsCount('1 | 4');
178
179 await page.keyboard.press('Enter');
180 await waitForSearchResultsCount('2 | 4');
181 await page.keyboard.press('Enter');
182 await waitForSearchResultsCount('3 | 4');
183 await page.keyboard.press('Enter');
184 await waitForSearchResultsCount('4 | 4');
185 await page.keyboard.press('Enter');
186 await waitForSearchResultsCount('1 | 4');
187 await page.keyboard.press('Shift+Enter');
188 await waitForSearchResultsCount('4 | 4');
189
190 await page.keyboard.insertText('zzz');
191 await waitForSearchResultsCount('0 | 0');
192
193 await devToolsUtils.clickButton(page, 'ProfilerSearchInput-CloseButton');
194 await page.waitForFunction(() => {
195 const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
196 const container = document.getElementById('devtools');
197 return (
198 findAllNodes(container, [
199 createTestNameSelector('ProfilerSearchInput-Input'),
200 ]).length === 0
201 );
202 });
203 });
204 });