test(tracing): Add FID tests. (#4415)

onurtemizkan · web-flow · commit 28b78da291b6 · 2022-01-18T17:53:33.000-05:00
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/template.hbs b/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/template.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <button id="fid-btn" onclick="console.log('foo')">BTN</button>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/test.ts b/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/test.ts
@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should capture a FID vital.', async ({ browserName, getLocalTestPath, page }) => {
+  // FID measurement is not generated on webkit
+  if (browserName === 'webkit') {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  page.goto(url);
+  // To trigger FID
+  page.click('#fid-btn');
+
+  const eventData = await getSentryTransactionRequest(page);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.fid?.value).toBeDefined();
+  expect(eventData.measurements?.['mark.fid']?.value).toBeDefined();
+
+  const fidSpan = eventData.spans?.filter(({ description }) => description === 'first input delay')[0];
+
+  expect(fidSpan).toBeDefined();
+  expect(fidSpan?.op).toBe('web.vitals');
+  expect(fidSpan?.parentSpanId).toBe(eventData.contexts?.trace_span_id);
+});
