Skip to content

Commit 70abc37

Browse files
mydeamydea
authored
ci: Add new metrics overhead app (#7300)
1 parent dbd7a81 commit 70abc37

File tree

10 files changed

+904
-14
lines changed

10 files changed

+904
-14
lines changed

‎packages/overhead-metrics/configs/ci/collect.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Metrics } from '../../src/collector.js';
22
import { MetricsCollector } from '../../src/collector.js';
33
import type { NumberProvider } from '../../src/results/metrics-stats.js';
44
import { MetricsStats } from '../../src/results/metrics-stats.js';
5-
import { JankTestScenario } from '../../src/scenarios.js';
5+
import { BookingAppScenario } from '../../src/scenarios.js';
66
import { printStats } from '../../src/util/console.js';
77
import { latestResultFile } from './env.js';
88

@@ -26,9 +26,9 @@ const collector = new MetricsCollector({ headless: true, cpuThrottling: 2 });
2626
const result = await collector.execute({
2727
name: 'jank',
2828
scenarios: [
29-
new JankTestScenario('index.html'),
30-
new JankTestScenario('with-sentry.html'),
31-
new JankTestScenario('with-replay.html'),
29+
new BookingAppScenario('index.html', 100),
30+
new BookingAppScenario('with-sentry.html', 100),
31+
new BookingAppScenario('with-replay.html', 100),
3232
],
3333
runs: 10,
3434
tries: 10,

‎packages/overhead-metrics/configs/dev/collect.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import type { Metrics } from '../../src/collector.js';
22
import { MetricsCollector } from '../../src/collector.js';
33
import { MetricsStats } from '../../src/results/metrics-stats.js';
4-
import { JankTestScenario } from '../../src/scenarios.js';
4+
import { BookingAppScenario } from '../../src/scenarios.js';
55
import { printStats } from '../../src/util/console.js';
66
import { latestResultFile } from './env.js';
77

88
const collector = new MetricsCollector();
99
const result = await collector.execute({
1010
name: 'dummy',
1111
scenarios: [
12-
new JankTestScenario('index.html'),
13-
new JankTestScenario('with-sentry.html'),
14-
new JankTestScenario('with-replay.html'),
12+
new BookingAppScenario('index.html', 50),
13+
new BookingAppScenario('with-sentry.html', 50),
14+
new BookingAppScenario('with-replay.html', 50),
15+
new BookingAppScenario('index.html', 500),
16+
new BookingAppScenario('with-sentry.html', 500),
17+
new BookingAppScenario('with-replay.html', 500),
1518
],
1619
runs: 1,
1720
tries: 1,

‎packages/overhead-metrics/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"build": "tsc",
1111
"dev:collect": "ts-node-esm ./configs/dev/collect.ts",
1212
"dev:process": "ts-node-esm ./configs/dev/process.ts",
13+
"dev:run:replay": "npx chrome ./test-apps/booking-app/with-replay.html",
1314
"ci:collect": "ts-node-esm ./configs/ci/collect.ts",
1415
"ci:process": "ts-node-esm ./configs/ci/process.ts",
1516
"fix": "run-s fix:eslint fix:prettier",

‎packages/overhead-metrics/src/results/metrics-stats.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ export class MetricsStats {
5151
private static _filteredValues(numbers: number[]): number[] {
5252
numbers.sort((a, b) => a - b);
5353

54+
if (numbers.length < 1) {
55+
return [];
56+
}
57+
5458
const q1 = ss.quantileSorted(numbers, 0.25);
5559
const q3 = ss.quantileSorted(numbers, 0.75);
5660
const iqr = q3 - q1;

‎packages/overhead-metrics/src/scenarios.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,28 @@ export class JankTestScenario implements Scenario {
5353
await new Promise(resolve => setTimeout(resolve, 12000));
5454
}
5555
}
56+
57+
export class BookingAppScenario implements Scenario {
58+
public constructor(private _indexFile: string, private _count: number) {}
59+
60+
/**
61+
*
62+
*/
63+
public async run(_: playwright.Browser, page: playwright.Page): Promise<void> {
64+
let url = path.resolve(`./test-apps/booking-app/${this._indexFile}`);
65+
assert(fs.existsSync(url));
66+
url = `file:///${url.replace(/\\/g, '/')}?count=${this._count}`;
67+
console.log('Navigating to ', url);
68+
await page.goto(url, { waitUntil: 'load', timeout: 60000 });
69+
70+
// Click "Update"
71+
await page.click('#search button');
72+
73+
for (let i = 1; i < 10; i++) {
74+
await page.click(`.result:nth-child(${i}) [data-select]`);
75+
}
76+
77+
// Wait for flushing, which we set to 2000ms - to be safe, we add 1s on top
78+
await new Promise(resolve => setTimeout(resolve, 3000));
79+
}
80+
}

‎packages/overhead-metrics/src/vitals/cls.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@ class CLS {
1212
1313
const observer = new PerformanceObserver((list) => {
1414
for (const entry of list.getEntries()) {
15-
if (!entry.hadRecentInput) {
16-
if (window.cumulativeLayoutShiftScore === undefined) {
17-
window.cumulativeLayoutShiftScore = entry.value;
18-
} else {
19-
window.cumulativeLayoutShiftScore += entry.value;
20-
}
15+
if (window.cumulativeLayoutShiftScore === undefined) {
16+
window.cumulativeLayoutShiftScore = entry.value;
17+
} else if (!entry.hadRecentInput) {
18+
window.cumulativeLayoutShiftScore += entry.value;
2119
}
2220
}
2321
});

‎packages/overhead-metrics/test-apps/booking-app/index.html

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<title>Demo Booking Engine</title>
5+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
7+
<meta name="robots" content="noindex" />
8+
9+
<style>
10+
html,
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
body {
17+
color: #4a4a4a;
18+
font-size: 1em;
19+
font-weight: 400;
20+
line-height: 1.5;
21+
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
22+
box-sizing: border-box;
23+
}
24+
25+
*,
26+
*:before,
27+
*:after {
28+
font-family: inherit;
29+
box-sizing: inherit;
30+
}
31+
32+
.header {
33+
margin-bottom: 1.5rem;
34+
padding: 3rem;
35+
}
36+
37+
.header h1 {
38+
margin: 0 0 1em 0;
39+
}
40+
41+
.search-form {
42+
margin-bottom: 1.5rem;
43+
}
44+
45+
.search-form-fields {
46+
display: flex;
47+
flex-basis: 0;
48+
flex-grow: 5;
49+
flex-shrink: 1;
50+
}
51+
52+
.result {
53+
margin-bottom: 1em;
54+
padding-bottom: 1em;
55+
border-bottom: 1px solid #dbdbdb;
56+
display: flex;
57+
}
58+
59+
.result-image {
60+
width: 350px;
61+
margin: 0 1.5em 0 0;
62+
padding: 0;
63+
}
64+
65+
.result-image img {
66+
display: block;
67+
}
68+
69+
.result-content h3 {
70+
margin-top: 0;
71+
margin-bottom: 0.5em;
72+
}
73+
74+
.tags {
75+
display: flex;
76+
gap: 0.5em;
77+
flex-wrap: wrap;
78+
margin-bottom: 1.5rem;
79+
}
80+
81+
.tag {
82+
background-color: #f5f5f5;
83+
border-radius: 4px;
84+
color: #4a4a4a;
85+
display: inline-flex;
86+
font-size: 0.75rem;
87+
line-height: 2;
88+
justify-content: center;
89+
padding-left: 0.75em;
90+
padding-right: 0.75em;
91+
white-space: nowrap;
92+
}
93+
94+
.long-text {
95+
margin-bottom: 1.5rem;
96+
}
97+
98+
[data-long-text-open],
99+
[data-long-text-close] {
100+
all: unset;
101+
font-weight: bold;
102+
cursor: pointer;
103+
}
104+
105+
:not([data-show-long]) > .long-text__long {
106+
display: none;
107+
}
108+
109+
[data-show-long] > .long-text__short {
110+
display: none;
111+
}
112+
113+
.select {
114+
}
115+
116+
.select button {
117+
font-size: 1.25em;
118+
padding: 0.25em;
119+
display: flex;
120+
width: 100%;
121+
gap: 0.25em;
122+
}
123+
124+
.select__price {
125+
margin-left: auto;
126+
display: flex;
127+
}
128+
129+
.price__amount {
130+
font-weight: bold;
131+
}
132+
133+
.options {
134+
display: flex;
135+
gap: 0.5em;
136+
}
137+
138+
.result:not([data-show-options='yes']) .options {
139+
display: none;
140+
}
141+
142+
.result[data-show-options='yes'] .select {
143+
display: none;
144+
}
145+
</style>
146+
</head>
147+
148+
<body>
149+
<div class="">
150+
<div class="header">
151+
<h1>This is a test app.</h1>
152+
153+
<div class="search-form">
154+
<form name="search" id="search" data-form-state="0" action="" method="POST">
155+
<div class="search-form-fields">
156+
<div class="field">
157+
<label for="check-in">Check-in</label>
158+
<input name="check-in" type="date" class="input" />
159+
</div>
160+
161+
<div class="field">
162+
<label for="check-out">Check-out</label>
163+
<input name="check-out" type="date" class="input" />
164+
</div>
165+
166+
<div class="field">
167+
<label for="adults">Number of persons</label>
168+
<select name="adults">
169+
<option value="1">1</option>
170+
<option value="2" selected="">2</option>
171+
<option value="3">3</option>
172+
<option value="4">4</option>
173+
<option value="5">5</option>
174+
<option value="6">6</option>
175+
<option value="7">7</option>
176+
<option value="8">8</option>
177+
<option value="9">9</option>
178+
<option value="10">10</option>
179+
<option value="11">11</option>
180+
<option value="12">12</option>
181+
<option value="13">13</option>
182+
<option value="14">14</option>
183+
<option value="15">15</option>
184+
<option value="16">16</option>
185+
<option value="17">17</option>
186+
<option value="18">18</option>
187+
<option value="19">19</option>
188+
<option value="20">20</option>
189+
<option value="21">21</option>
190+
<option value="22">22</option>
191+
<option value="23">23</option>
192+
<option value="24">24</option>
193+
<option value="25">25</option>
194+
<option value="26">26</option>
195+
<option value="27">27</option>
196+
<option value="28">28</option>
197+
<option value="29">29</option>
198+
<option value="30">30</option>
199+
</select>
200+
</div>
201+
202+
<div class="field">
203+
<button type="submit">Update</button>
204+
</div>
205+
</div>
206+
</form>
207+
</div>
208+
209+
<div>
210+
<form name="book" id="book" method="post">
211+
<div class="result-list"></div>
212+
</form>
213+
</div>
214+
</div>
215+
</div>
216+
217+
<script src="./main.js"></script>
218+
</body>
219+
</html>

0 commit comments

Comments
 (0)