test(tracing): Add CLS tests (#4410)

onurtemizkan · web-flow · commit 4fec3b3a4287 · 2022-01-19T08:54:18.000-05:00
diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json
@@ -19,6 +19,7 @@
     "test": "playwright test ./suites"
   },
   "dependencies": {
+    "@babel/preset-typescript": "^7.16.7",
     "@playwright/test": "^1.17.0",
     "babel-loader": "^8.2.2",
     "handlebars-loader": "^1.7.1",
diff --git a/packages/integration-tests/suites/tracing/metrics/init.js b/packages/integration-tests/suites/tracing/metrics/init.js
@@ -5,6 +5,10 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [
+    new Integrations.BrowserTracing({
+      idleTimeout: 9000,
+    }),
+  ],
   tracesSampleRate: 1,
 });
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/subject.js b/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/subject.js
@@ -0,0 +1,9 @@
+import { simulateCLS } from '../../../../utils/web-vitals/cls.ts';
+
+// Getting expected CLS parameter from URL hash
+const expectedCLS = Number(location.hash.slice(1));
+
+simulateCLS(expectedCLS).then(
+  // Triggering reload to make sure getCLS has its closure before we send the transaction
+  () => location.reload(),
+);
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/template.hbs b/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/template.hbs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="{{htmlWebpackPlugin.options.subject}}"></script>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/test.ts b/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/test.ts
@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest.beforeEach(async ({ browserName, page }) => {
+  if (browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  await page.setViewportSize({ width: 800, height: 1200 });
+});
+
+sentryTest('should capture a "GOOD" CLS vital with its source(s).', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const eventData = await getSentryTransactionRequest(page, `${url}#0.05`);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeCloseTo(0.05);
+  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p#partial');
+});
+
+sentryTest('should capture a "MEH" CLS vital with its source(s).', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const eventData = await getSentryTransactionRequest(page, `${url}#0.21`);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeCloseTo(0.21);
+  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p');
+});
+
+sentryTest('should capture a "POOR" CLS vital with its source(s).', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const eventData = await getSentryTransactionRequest(page, `${url}#0.35`);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeDefined();
+  expect(eventData.measurements?.cls?.value).toBeCloseTo(0.35);
+  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p');
+});
diff --git a/packages/integration-tests/utils/web-vitals/cls.ts b/packages/integration-tests/utils/web-vitals/cls.ts
@@ -0,0 +1,74 @@
+const MOVE_ITERATIONS = 20;
+const MOVE_DELAY = 50;
+
+function createContentfulBlock(): void {
+  const intViewportHeight = document.documentElement.clientHeight;
+  const intViewportWidth = document.documentElement.clientWidth;
+
+  const p = document.createElement('p');
+  p.textContent = 'a contentful block';
+  p.style.height = `${intViewportHeight / 20}px`;
+  p.style.width = `${intViewportWidth}px`;
+  p.style.overflow = 'hidden';
+  p.style.position = 'absolute';
+  p.style.backgroundColor = '#aaa';
+  document.getElementById('content')?.appendChild(p);
+}
+
+function addPercent(percent: number, prop: string): string {
+  const n = Number(prop.replace('px', ''));
+  const pixels = (document.documentElement.clientHeight * percent) / 100;
+  return `${n + pixels}px`;
+}
+
+async function moveBy(elem: HTMLParagraphElement, percent: number): Promise<void> {
+  if (elem.getAttribute('id') === 'partial') {
+    const max = Number(elem.getAttribute('max-steps'));
+    let current = Number(elem.getAttribute('steps'));
+    current += 1;
+    if (current > max) {
+      return;
+    }
+    elem.setAttribute('steps', `${current}`);
+  }
+
+  return new Promise(resolve => {
+    setTimeout(() => {
+      elem.style.top = addPercent(percent, elem.style.top);
+      resolve();
+    }, MOVE_DELAY);
+  });
+}
+
+async function moveAll(elems: HTMLParagraphElement[], times: number): Promise<void> {
+  for (let i = 0; i < times; i++)
+    for (const el of elems) {
+      await moveBy(el, 5);
+    }
+}
+
+function howMany(desiredCls: number): { extraSteps: number; createParagraphs: number } {
+  const fullRuns = Math.floor(desiredCls / 0.095);
+  const extraSteps = Math.round((desiredCls - fullRuns * 0.095) / 0.005);
+  let create = fullRuns;
+  if (extraSteps > 0) {
+    create += 1;
+  }
+
+  return { extraSteps: extraSteps, createParagraphs: create };
+}
+
+export async function simulateCLS(desiredCLS: number): Promise<void> {
+  const { extraSteps, createParagraphs } = howMany(desiredCLS);
+
+  for (let i = 0; i < createParagraphs; i++) {
+    createContentfulBlock();
+  }
+
+  const elems = Array.from(document.getElementsByTagName('p'));
+  elems[0]?.setAttribute('id', 'partial');
+  elems[0]?.setAttribute('max-steps', `${extraSteps}`);
+  elems[0]?.setAttribute('steps', '0');
+
+  return moveAll(elems, MOVE_ITERATIONS);
+}
diff --git a/packages/integration-tests/webpack.config.ts b/packages/integration-tests/webpack.config.ts
@@ -7,9 +7,10 @@ const config = function(userConfig: Record<string, unknown>): Configuration {
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(js|ts)$/,
           exclude: /node_modules/,
           loader: 'babel-loader',
+          options: { presets: [['@babel/preset-typescript', { allowNamespaces: true }]] },
         },
         {
           test: /\.hbs$/,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -7,9 +7,10 @@ const config = function(userConfig: Record<string, unknown>): Configuration {`
`7`	`7`	`module: {`
`8`	`8`	`rules: [`
`9`	`9`	`{`
`10`		`- test: /\.js$/,`
	`10`	`+ test: /\.(js\|ts)$/,`
`11`	`11`	`exclude: /node_modules/,`
`12`	`12`	`loader: 'babel-loader',`
	`13`	`+ options: { presets: [['@babel/preset-typescript', { allowNamespaces: true }]] },`
`13`	`14`	`},`
`14`	`15`	`{`
`15`	`16`	`test: /\.hbs$/,`