test(tracing): Add tests for pageload spans. (#4387)

onurtemizkan · web-flow · commit a338b1b0f823 · 2022-01-13T11:25:20.000-05:00
diff --git a/packages/integration-tests/suites/tracing/metrics/init.js b/packages/integration-tests/suites/tracing/metrics/init.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 1,
+});
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-browser-spans/test.ts b/packages/integration-tests/suites/tracing/metrics/pageload-browser-spans/test.ts
@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should add browser-related spans to pageload transaction', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getSentryTransactionRequest(page, url);
+  const browserSpans = eventData.spans?.filter(({ op }) => op === 'browser');
+
+  // Spans `connect`, `cache` and `DNS` are not always inside `pageload` transaction.
+  expect(browserSpans?.length).toBeGreaterThanOrEqual(4);
+
+  ['domContentLoadedEvent', 'loadEvent', 'request', 'response'].forEach(eventDesc =>
+    expect(browserSpans).toContainEqual(
+      expect.objectContaining({
+        description: eventDesc,
+        parent_span_id: eventData.contexts?.trace.span_id,
+      }),
+    ),
+  );
+});
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/image.svg b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/image.svg
@@ -0,0 +1 @@
+<svg></svg>
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/script.js b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/script.js
@@ -0,0 +1 @@
+(() => {})();
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/style.css b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/assets/style.css
@@ -0,0 +1,4 @@
+p {
+  color: red;
+  text-align: center;
+}
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/template.hbs b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/template.hbs
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <img src="https://example.com/path/to/image.svg">
+    <script src="https://example.com/path/to/script.js"></script>
+    <link href="https://example.com/path/to/style.css" type="text/css" rel="stylesheet">
+    <span>Rendered</span>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/test.ts b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/test.ts
@@ -0,0 +1,27 @@
+import { expect, Route } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should add resource spans to pageload transaction', async ({ getLocalTestPath, page }) => {
+  // Intercepting asset requests to avoid network-related flakiness and random retries (on Firefox).
+  await page.route('**/path/to/image.svg', (route: Route) => route.fulfill({ path: `${__dirname}/assets/image.svg` }));
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+  await page.route('**/path/to/style.css', (route: Route) => route.fulfill({ path: `${__dirname}/assets/style.css` }));
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getSentryTransactionRequest(page, url);
+  const resourceSpans = eventData.spans?.filter(({ op }) => op?.startsWith('resource'));
+
+  expect(resourceSpans?.length).toBe(3);
+
+  ['resource.img', 'resource.script', 'resource.link'].forEach(op =>
+    expect(resourceSpans).toContainEqual(
+      expect.objectContaining({
+        op: op,
+        parent_span_id: eventData.contexts?.trace.span_id,
+      }),
+    ),
+  );
+});
diff --git a/packages/integration-tests/suites/tracing/metrics/template.hbs b/packages/integration-tests/suites/tracing/metrics/template.hbs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <script src="{{htmlWebpackPlugin.options.subject}}"></script>
+    <span>Rendered</span>
+  </body>
+</html>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +p {
 +  color: red;
 +  text-align: center;
 +}