test(loader): Add tests for new loader integration handling (#7790)

Author: mydea

packages/browser-integration-tests/fixtures/loader.js

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+Sentry.onLoad(function () {
+  Sentry.init({
+    integrations: [
+      // Without this syntax, this will be re-written by the test framework
+      new window['Sentry'].BrowserTracing({
+        tracePropagationTargets: ['http://localhost:1234'],
+      }),
+    ],
+  });
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customBrowserTracing/init.js

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should handle custom added BrowserTracing integration', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const req = waitForTransactionRequest(page);
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  const eventData = envelopeRequestParser(await req);
+  const timeOrigin = await page.evaluate<number>('window._testBaseTimestamp');
+
+  const { start_timestamp: startTimestamp } = eventData;
+
+  expect(startTimestamp).toBeCloseTo(timeOrigin, 1);
+
+  expect(eventData.contexts?.trace?.op).toBe('pageload');
+  expect(eventData.spans?.length).toBeGreaterThan(0);
+  expect(eventData.transaction_info?.source).toEqual('url');
+
+  const tracePropagationTargets = await page.evaluate(() => {
+    const browserTracing = (window as any).Sentry.getCurrentHub().getClient().getIntegrationById('BrowserTracing');
+    return browserTracing.options.tracePropagationTargets;
+  });
+
+  expect(tracePropagationTargets).toEqual(['http://localhost:1234']);
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customBrowserTracing/test.ts

@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+class CustomIntegration {
+  constructor() {
+    this.name = 'CustomIntegration';
+  }
+
+  setupOnce() {}
+}
+
+Sentry.onLoad(function () {
+  Sentry.init({
+    integrations: [new CustomIntegration()],
+  });
+
+  window.__sentryLoaded = true;
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrations/init.js

@@ -0,0 +1 @@
+Sentry.forceLoad();

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrations/subject.js

@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+import { shouldSkipReplayTest } from '../../../../utils/replayHelpers';
+
+sentryTest('should handle custom added integrations & default integrations', async ({ getLocalTestUrl, page }) => {
+  const shouldHaveReplay = !shouldSkipReplayTest();
+  const shouldHaveBrowserTracing = !shouldSkipTracingTest();
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  await page.waitForFunction(() => {
+    return (window as any).__sentryLoaded;
+  });
+
+  const hasCustomIntegration = await page.evaluate(() => {
+    return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('CustomIntegration');
+  });
+
+  const hasReplay = await page.evaluate(() => {
+    return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('Replay');
+  });
+  const hasBrowserTracing = await page.evaluate(() => {
+    return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('BrowserTracing');
+  });
+
+  expect(hasCustomIntegration).toEqual(true);
+  expect(hasReplay).toEqual(shouldHaveReplay);
+  expect(hasBrowserTracing).toEqual(shouldHaveBrowserTracing);
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrations/test.ts

@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+class CustomIntegration {
+  constructor() {
+    this.name = 'CustomIntegration';
+  }
+
+  setupOnce() {}
+}
+
+Sentry.onLoad(function () {
+  Sentry.init({
+    integrations: integrations => [new CustomIntegration()].concat(integrations),
+  });
+
+  window.__sentryLoaded = true;
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrationsFunction/init.js

@@ -0,0 +1 @@
+Sentry.forceLoad();

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrationsFunction/subject.js

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+
+sentryTest(
+  'should not add default integrations if integrations function is provided',
+  async ({ getLocalTestUrl, page }) => {
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    await page.goto(url);
+
+    await page.waitForFunction(() => {
+      return (window as any).__sentryLoaded;
+    });
+
+    const hasCustomIntegration = await page.evaluate(() => {
+      return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('CustomIntegration');
+    });
+
+    const hasReplay = await page.evaluate(() => {
+      return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('Replay');
+    });
+    const hasBrowserTracing = await page.evaluate(() => {
+      return !!(window as any).Sentry.getCurrentHub().getClient().getIntegrationById('BrowserTracing');
+    });
+
+    expect(hasCustomIntegration).toEqual(true);
+    expect(hasReplay).toEqual(false);
+    expect(hasBrowserTracing).toEqual(false);
+  },
+);

packages/browser-integration-tests/loader-suites/loader/onLoad/customIntegrationsFunction/test.ts

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.onLoad(function () {
+  Sentry.init({
+    integrations: [
+      // Without this syntax, this will be re-written by the test framework
+      new window['Sentry'].Replay({
+        useCompression: false,
+      }),
+    ],
+  });
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customReplay/init.js

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('should handle custom added Replay integration', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const req = waitForReplayRequest(page);
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  const eventData = getReplayEvent(await req);
+
+  expect(eventData).toBeDefined();
+  expect(eventData.segment_id).toBe(0);
+
+  const useCompression = await page.evaluate(() => {
+    const replay = (window as any).Sentry.getCurrentHub().getClient().getIntegrationById('Replay');
+    return replay._replay.getOptions().useCompression;
+  });
+
+  expect(useCompression).toEqual(false);
+});

packages/browser-integration-tests/loader-suites/loader/onLoad/customReplay/test.ts

@@ -41,7 +41,8 @@
     "test:loader:full": "PW_BUNDLE=loader_tracing_replay yarn test:loader",
     "test:ci": "playwright test ./suites --browser='all' --reporter='line'",
     "test:update-snapshots": "yarn test --update-snapshots --browser='all' && yarn test --update-snapshots",
-    "test:detect-flaky": "ts-node scripts/detectFlakyTests.ts"
+    "test:detect-flaky": "ts-node scripts/detectFlakyTests.ts",
+    "validate:es5": "es-check es5 'fixtures/loader.js'"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",

packages/browser-integration-tests/package.json

@@ -44,6 +44,7 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
+    "validate:es5": "es-check es5 'build/bundles/*.es5*.js'",
     "test": "jest",
     "test:watch": "jest --watch",
     "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push"