test(nextjs): Migrate Next SDK's client side tests to Playwright.

Author: onurtemizkan

packages/integration-tests/utils/helpers.ts

@@ -1,5 +1,5 @@
 import { Page, Request } from '@playwright/test';
-import { Event, EventEnvelopeHeaders } from '@sentry/types';
+import { EnvelopeItemType, Event, EventEnvelopeHeaders } from '@sentry/types';
 
 const envelopeUrlRegex = /\.sentry\.io\/api\/\d+\/envelope\//;
 
@@ -19,6 +19,58 @@ export const envelopeHeaderRequestParser = (request: Request | null): EventEnvel
   return envelope.split('\n').map(line => JSON.parse(line))[0];
 };
 
+export const getEnvelopeType = (request: Request | null): EnvelopeItemType => {
+  const envelope = request?.postData() || '';
+
+  return (envelope.split('\n').map(line => JSON.parse(line))[1] as Record<string, unknown>).type as EnvelopeItemType;
+};
+
+export const countEnvelopes = async (
+  page: Page,
+  options?: {
+    url?: string;
+    timeout?: number;
+    envelopeType: EnvelopeItemType | EnvelopeItemType[];
+  },
+): Promise<number> => {
+  const countPromise = new Promise<number>((resolve, reject) => {
+    let reqCount = 0;
+
+    const requestHandler = (request: Request): void => {
+      if (envelopeUrlRegex.test(request.url())) {
+        try {
+          if (options?.envelopeType) {
+            const envelopeTypeArray = options
+              ? typeof options.envelopeType === 'string'
+                ? [options.envelopeType]
+                : options.envelopeType || (['event'] as EnvelopeItemType[])
+              : (['event'] as EnvelopeItemType[]);
+
+            if (envelopeTypeArray.includes(getEnvelopeType(request))) {
+              reqCount++;
+            }
+          }
+        } catch (e) {
+          reject(e);
+        }
+      }
+    };
+
+    page.on('request', requestHandler);
+
+    setTimeout(() => {
+      page.off('request', requestHandler);
+      resolve(reqCount);
+    }, options?.timeout || 200);
+  });
+
+  if (options?.url) {
+    await page.goto(options.url);
+  }
+
+  return countPromise;
+};
+
 /**
  * Run script at the given path inside the test environment.
  *
@@ -51,24 +103,37 @@ async function getSentryEvents(page: Page, url?: string): Promise<Array<Event>>
  * If the timout option is configured, this function will abort waiting, even if it hasn't reveived the configured
  * amount of requests, and returns all the events recieved up to that point in time.
  */
-async function getMultipleRequests(
+async function getMultipleRequests<T>(
   page: Page,
   count: number,
   urlRgx: RegExp,
-  requestParser: (req: Request) => Event,
+  requestParser: (req: Request) => T,
   options?: {
     url?: string;
     timeout?: number;
+    envelopeType?: EnvelopeItemType | EnvelopeItemType[];
   },
-): Promise<Event[]> {
-  const requests: Promise<Event[]> = new Promise((resolve, reject) => {
+): Promise<T[]> {
+  const requests: Promise<T[]> = new Promise((resolve, reject) => {
     let reqCount = count;
-    const requestData: Event[] = [];
+    const requestData: T[] = [];
     let timeoutId: NodeJS.Timeout | undefined = undefined;
 
     function requestHandler(request: Request): void {
       if (urlRgx.test(request.url())) {
         try {
+          if (options?.envelopeType) {
+            const envelopeTypeArray = options
+              ? typeof options.envelopeType === 'string'
+                ? [options.envelopeType]
+                : options.envelopeType || (['event'] as EnvelopeItemType[])
+              : (['event'] as EnvelopeItemType[]);
+
+            if (!envelopeTypeArray.includes(getEnvelopeType(request))) {
+              return;
+            }
+          }
+
           reqCount--;
           requestData.push(requestParser(request));
 
@@ -110,11 +175,10 @@ async function getMultipleSentryEnvelopeRequests<T>(
   options?: {
     url?: string;
     timeout?: number;
+    envelopeType?: EnvelopeItemType | EnvelopeItemType[];
   },
   requestParser: (req: Request) => T = envelopeRequestParser as (req: Request) => T,
 ): Promise<T[]> {
-  // TODO: This is not currently checking the type of envelope, just casting for now.
-  // We can update this to include optional type-guarding when we have types for Envelope.
   return getMultipleRequests(page, count, envelopeUrlRegex, requestParser, options) as Promise<T[]>;
 }
 

packages/nextjs/package.json

@@ -68,6 +68,12 @@
     "test:build": "yarn ts-node test/buildProcess/runTest.ts",
     "test:unit": "jest",
     "test:integration": "test/run-integration-tests.sh && yarn test:types",
+    "test:integration:ci": "run-s test:integration:clean test:integration:prepare test:integration:client:ci test:integration:server",
+    "test:integration:prepare": "(cd test/integration && yarn && yarn build && yarn start)",
+    "test:integration:clean": "(cd test/integration && rimraf .cache node_modules build)",
+    "test:integration:client": "yarn playwright install-deps && yarn playwright test test/integration/test/client/",
+    "test:integration:client:ci": "yarn test:integration:client --browser='all' --reporter='line'",
+    "test:integration:server": "export NODE_OPTIONS='--stack-trace-limit=25' && jest --config=test/integration/jest.config.js test/integration/test/server/",
     "test:types": "cd test/types && yarn test",
     "test:watch": "jest --watch",
     "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",

packages/nextjs/playwright.config.ts

@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  retries: 2,
+  timeout: 12000,
+  use: {
+    baseURL: 'http://localhost:3000',
+  },
+  workers: 3,
+  webServer: {
+    command: 'yarn test:integration:prepare',
+    port: 3000,
+  },
+};
+
+export default config;

packages/nextjs/test/integration/package.json

@@ -5,11 +5,13 @@
     "dev": "next",
     "build": "next build",
     "predebug": "source ../integration_test_utils.sh && link_monorepo_packages '../../..' && yarn build",
-    "start": "next start"
+    "start": "next start",
+    "pretest": "run-s build",
+    "test": "playwright test"
   },
   "dependencies": {
     "@sentry/nextjs": "file:../../",
-    "next": "latest",
+    "next": "10.x",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

packages/nextjs/test/integration/test/client.js

@@ -0,0 +1,17 @@
+import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+test('should capture error triggered on click', async ({ page }) => {
+  await page.goto('/errorClick');
+
+  const [_, events] = await Promise.all([
+    page.click('button'),
+    getMultipleSentryEnvelopeRequests<Event>(page, 1, { envelopeType: 'event' }),
+  ]);
+
+  expect(events[0].exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Sentry Frontend Error',
+  });
+});

packages/nextjs/test/integration/test/client/errorClick.js

@@ -0,0 +1,12 @@
+import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+test('should capture a globally triggered event', async ({ page }) => {
+  const event = await getMultipleSentryEnvelopeRequests<Event>(page, 1, { url: '/crashed', envelopeType: 'event' });
+
+  expect(event[0].exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Crashed',
+  });
+});