ci: Add new metrics overhead app

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

@@ -2,7 +2,7 @@ import type { Metrics } from '../../src/collector.js';
 import { MetricsCollector } from '../../src/collector.js';
 import type { NumberProvider } from '../../src/results/metrics-stats.js';
 import { MetricsStats } from '../../src/results/metrics-stats.js';
-import { JankTestScenario } from '../../src/scenarios.js';
+import { BookingAppScenario } from '../../src/scenarios.js';
 import { printStats } from '../../src/util/console.js';
 import { latestResultFile } from './env.js';
 
@@ -26,9 +26,9 @@ const collector = new MetricsCollector({ headless: true, cpuThrottling: 2 });
 const result = await collector.execute({
   name: 'jank',
   scenarios: [
-    new JankTestScenario('index.html'),
-    new JankTestScenario('with-sentry.html'),
-    new JankTestScenario('with-replay.html'),
+    new BookingAppScenario('index.html', 100),
+    new BookingAppScenario('with-sentry.html', 100),
+    new BookingAppScenario('with-replay.html', 100),
   ],
   runs: 10,
   tries: 10,

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

@@ -1,17 +1,20 @@
 import type { Metrics } from '../../src/collector.js';
 import { MetricsCollector } from '../../src/collector.js';
 import { MetricsStats } from '../../src/results/metrics-stats.js';
-import { JankTestScenario } from '../../src/scenarios.js';
+import { BookingAppScenario } from '../../src/scenarios.js';
 import { printStats } from '../../src/util/console.js';
 import { latestResultFile } from './env.js';
 
 const collector = new MetricsCollector();
 const result = await collector.execute({
   name: 'dummy',
   scenarios: [
-    new JankTestScenario('index.html'),
-    new JankTestScenario('with-sentry.html'),
-    new JankTestScenario('with-replay.html'),
+    new BookingAppScenario('index.html', 50),
+    new BookingAppScenario('with-sentry.html', 50),
+    new BookingAppScenario('with-replay.html', 50),
+    new BookingAppScenario('index.html', 500),
+    new BookingAppScenario('with-sentry.html', 500),
+    new BookingAppScenario('with-replay.html', 500),
   ],
   runs: 1,
   tries: 1,

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

@@ -51,6 +51,10 @@ export class MetricsStats {
   private static _filteredValues(numbers: number[]): number[] {
     numbers.sort((a, b) => a - b);
 
+    if (numbers.length < 1) {
+      return [];
+    }
+
     const q1 = ss.quantileSorted(numbers, 0.25);
     const q3 = ss.quantileSorted(numbers, 0.75);
     const iqr = q3 - q1;

packages/overhead-metrics/src/scenarios.ts

@@ -53,3 +53,28 @@ export class JankTestScenario implements Scenario {
     await new Promise(resolve => setTimeout(resolve, 12000));
   }
 }
+
+export class BookingAppScenario implements Scenario {
+  public constructor(private _indexFile: string, private _count: number) {}
+
+  /**
+   *
+   */
+  public async run(_: playwright.Browser, page: playwright.Page): Promise<void> {
+    let url = path.resolve(`./test-apps/booking-app/${this._indexFile}`);
+    assert(fs.existsSync(url));
+    url = `file:///${url.replace(/\\/g, '/')}?count=${this._count}`;
+    console.log('Navigating to ', url);
+    await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+    // Click "Update"
+    await page.click('#search button');
+
+    for (let i = 1; i < 10; i++) {
+      await page.click(`.result:nth-child(${i}) [data-select]`);
+    }
+
+    // Wait for flushing, which we set to 2000ms
+    await new Promise(resolve => setTimeout(resolve, 2000));
+  }
+}

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

@@ -12,12 +12,10 @@ class CLS {
 
       const observer = new PerformanceObserver((list) => {
         for (const entry of list.getEntries()) {
-          if (!entry.hadRecentInput) {
-            if (window.cumulativeLayoutShiftScore === undefined) {
-              window.cumulativeLayoutShiftScore = entry.value;
-            } else {
-              window.cumulativeLayoutShiftScore += entry.value;
-            }
+          if (window.cumulativeLayoutShiftScore === undefined) {
+            window.cumulativeLayoutShiftScore = entry.value;
+          } else if (!entry.hadRecentInput) {
+            window.cumulativeLayoutShiftScore += entry.value;
           }
         }
       });

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

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <title>Demo Booking Engine</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="robots" content="noindex" />
+
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <div class="">
+      <div class="header">
+        <h1>This is a test app.</h1>
+
+        <div class="search-form">
+          <form name="search" id="search" data-form-state="0" action="" method="POST">
+            <div class="search-form-fields">
+              <div class="field">
+                <label for="check-in">Check-in</label>
+                <input name="check-in" type="date" class="input" />
+              </div>
+
+              <div class="field">
+                <label for="check-out">Check-out</label>
+                <input name="check-out" type="date" class="input" />
+              </div>
+
+              <div class="field">
+                <label for="adults">Number of persons</label>
+                <select name="adults">
+                  <option value="1">1</option>
+                  <option value="2" selected="">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                  <option value="7">7</option>
+                  <option value="8">8</option>
+                  <option value="9">9</option>
+                  <option value="10">10</option>
+                  <option value="11">11</option>
+                  <option value="12">12</option>
+                  <option value="13">13</option>
+                  <option value="14">14</option>
+                  <option value="15">15</option>
+                  <option value="16">16</option>
+                  <option value="17">17</option>
+                  <option value="18">18</option>
+                  <option value="19">19</option>
+                  <option value="20">20</option>
+                  <option value="21">21</option>
+                  <option value="22">22</option>
+                  <option value="23">23</option>
+                  <option value="24">24</option>
+                  <option value="25">25</option>
+                  <option value="26">26</option>
+                  <option value="27">27</option>
+                  <option value="28">28</option>
+                  <option value="29">29</option>
+                  <option value="30">30</option>
+                </select>
+              </div>
+
+              <div class="field">
+                <button type="submit">Update</button>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div>
+          <form name="book" id="book" method="post">
+            <div class="result-list"></div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <script src="./main.js"></script>
+  </body>
+</html>

packages/overhead-metrics/test-apps/booking-app/main.js

@@ -0,0 +1,177 @@
+(function () {
+  const searchForm = document.querySelector('#search');
+
+  searchForm.addEventListener('submit', event => {
+    event.preventDefault();
+
+    updateOffers();
+  });
+
+  const obs = new MutationObserver(function (mutations) {
+    console.log(mutations);
+  });
+
+  obs.observe(document.documentElement, {
+    attributes: true,
+    attributeOldValue: true,
+    characterData: true,
+    characterDataOldValue: true,
+    childList: true,
+    subtree: true,
+  });
+})();
+
+function updateOffers() {
+  const list = document.querySelector('.result-list');
+
+  // Clear out existing children
+  for (let el of list.children) {
+    list.removeChild(el);
+  }
+
+  // Add new children
+  // Allow to define children count via URL ?count=100
+  const url = new URL(window.location.href);
+  const count = parseInt(url.searchParams.get('count') || 50);
+  for (let i = 0; i < count; i++) {
+    const el = document.createElement('div');
+    el.classList.add('result');
+    el.innerHTML = generateResult();
+
+    const id = crypto.randomUUID();
+    el.setAttribute('id', id);
+
+    addListeners(id, el);
+
+    list.appendChild(el);
+  }
+}
+
+function addListeners(id, el) {
+  el.querySelector('[data-long-text-open]').addEventListener('click', event => {
+    const parent = event.target.closest('.long-text');
+    parent.setAttribute('data-show-long', '');
+  });
+  el.querySelector('[data-long-text-close]').addEventListener('click', event => {
+    const parent = event.target.closest('.long-text');
+    parent.removeAttribute('data-show-long');
+  });
+
+  // These are purposefully inefficient
+  el.querySelector('[data-select]').addEventListener('click', () => {
+    document.querySelectorAll('.result').forEach(result => {
+      if (result.getAttribute('id') === id) {
+        result.setAttribute('data-show-options', 'yes');
+      } else {
+        result.setAttribute('data-show-options', 'no');
+      }
+    });
+
+    // Do some more, extra expensive work
+    document.querySelectorAll('.select__price').forEach(el => {
+      el.setAttribute('js-is-checked', new Date().toISOString());
+      el.setAttribute('js-is-checked-2', new Date().toISOString());
+      el.setAttribute('js-is-checked-3', 'yes');
+      el.setAttribute('js-is-checked-4', 'yes');
+      el.setAttribute('js-is-checked-5', 'yes');
+      el.setAttribute('js-is-checked-6', 'yes');
+    });
+    document.querySelectorAll('.tag').forEach(el => el.setAttribute('js-is-checked', 'yes'));
+    document.querySelectorAll('h3').forEach(el => el.setAttribute('js-is-checked', 'yes'));
+  });
+}
+
+const baseTitles = ['Cottage house', 'Cabin', 'Villa', 'House', 'Appartment', 'Cosy appartment'];
+const baseBeds = ['2', '2+2', '4+2', '6+2', '6+4'];
+const baseDescription =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+function generateResult() {
+  const title = `${getRandomItem(baseTitles)} ${Math.ceil(Math.random() * 20)}`;
+  const beds = getRandomItem(baseBeds);
+  const description = baseDescription
+    .split(' ')
+    .slice(Math.ceil(Math.random() * 10))
+    .join(' ');
+  const price = 200 + Math.random() * 800;
+
+  // Make short version of description
+  const descriptionShort = description.slice(0, 200);
+  const priceStr = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price);
+
+  const placeholders = {
+    title,
+    beds,
+    description,
+    descriptionShort,
+    priceStr,
+  };
+
+  return replacePlaceholders(template, placeholders);
+}
+
+function getRandomItem(list) {
+  return list[Math.floor(Math.random() * list.length)];
+}
+
+function replacePlaceholders(str, placeholders) {
+  let replacedStr = str;
+  Object.keys(placeholders).forEach(placeholder => {
+    replacedStr = replacedStr.replaceAll(`{{${placeholder}}}`, placeholders[placeholder]);
+  });
+
+  return replacedStr;
+}
+
+const template = `<figure class="result-image">
+  <img src="https://api.lorem.space/image/house?w=350&h=250" alt="{{title}}" data-image />
+</figure>
+
+<div class="result-content">
+  <div>
+    <h3>{{title}}</h3>
+
+    <div class="tags">
+      <span class="tag">{{beds}}</span>
+    </div>
+  </div>
+
+  <div class="long-text">
+    <div class="long-text__short">
+      {{descriptionShort}}<button type="button" data-long-text-open>... Read more</button>
+    </div>
+
+    <div class="long-text__long">
+      {{description}}
+      <button type="button" data-long-text-close>Read less</button>
+    </div>
+  </div>
+
+  <div class="select">
+    <button type="button" data-select>
+      <div aria-hidden="true" class="icon">+</div>
+      <div>Select</div>
+
+      <div class="select__price">
+        <div class="price__amount">{{priceStr}}</div>
+        <div class="price__quantity-label">/night</div>
+      </div>
+    </button>
+  </div>
+
+  <div class="options">
+    <div class="field">
+      <select>
+        <option value="0">0 rooms</option>
+        <option value="1">1 room</option>
+      </select>
+    </div>
+
+    <div class="field">
+      <select>
+        <option value="1">1 guest</option>
+        <option value="2">2 guests</option>
+      </select>
+    </div>
+  </div>
+</div>`;