From c68f1add9f68cc7c253201e30f9027b231371d25 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 31 May 2024 14:17:10 +0200 Subject: [PATCH] test: Refactor webpack E2E tests to avoid sending to Sentry (#12312) Part of https://github.com/getsentry/sentry-javascript/issues/11910 --- .../test-applications/webpack-4/entry.js | 6 +- .../test-applications/webpack-4/package.json | 1 + .../webpack-4/playwright.config.mjs | 7 ++ .../webpack-4/playwright.config.ts | 70 ------------------- .../webpack-4/start-event-proxy.mjs | 6 ++ .../webpack-4/tests/behaviour-test.spec.ts | 31 -------- .../webpack-4/tests/errors.test.ts | 14 ++++ .../test-applications/webpack-5/entry.js | 6 +- .../test-applications/webpack-5/package.json | 1 + .../webpack-5/playwright.config.mjs | 7 ++ .../webpack-5/playwright.config.ts | 70 ------------------- .../webpack-5/start-event-proxy.mjs | 6 ++ .../webpack-5/tests/behaviour-test.spec.ts | 31 -------- .../webpack-5/tests/errors.test.ts | 14 ++++ 14 files changed, 62 insertions(+), 208 deletions(-) create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.mjs delete mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/start-event-proxy.mjs delete mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-4/tests/errors.test.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.mjs delete mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/start-event-proxy.mjs delete mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts create mode 100644 dev-packages/e2e-tests/test-applications/webpack-5/tests/errors.test.ts diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/entry.js b/dev-packages/e2e-tests/test-applications/webpack-4/entry.js index 4fd9cd67e7e3..69877184b91a 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-4/entry.js +++ b/dev-packages/e2e-tests/test-applications/webpack-4/entry.js @@ -1,11 +1,11 @@ -import { browserTracingIntegration, captureException, init } from '@sentry/browser'; +import { browserTracingIntegration, init } from '@sentry/browser'; init({ dsn: process.env.E2E_TEST_DSN, integrations: [browserTracingIntegration()], + tunnel: 'http://localhost:3031', }); setTimeout(() => { - const eventId = captureException(new Error('I am an error!')); - window.capturedExceptionId = eventId; + throw new Error('I am an error!'); }, 2000); diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/package.json b/dev-packages/e2e-tests/test-applications/webpack-4/package.json index 8787fccf253c..311c2dcc468c 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-4/package.json +++ b/dev-packages/e2e-tests/test-applications/webpack-4/package.json @@ -9,6 +9,7 @@ }, "devDependencies": { "@playwright/test": "^1.44.1", + "@sentry-internal/test-utils": "link:../../../test-utils", "@sentry/browser": "latest || *", "webpack": "^4.47.0", "terser-webpack-plugin": "^4.2.3", diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.mjs new file mode 100644 index 000000000000..4248d8d94297 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.mjs @@ -0,0 +1,7 @@ +import { getPlaywrightConfig } from '@sentry-internal/test-utils'; + +const config = getPlaywrightConfig({ + startCommand: 'pnpm start', +}); + +export default config; diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts b/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts deleted file mode 100644 index 5f93f826ebf0..000000000000 --- a/dev-packages/e2e-tests/test-applications/webpack-4/playwright.config.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; -import { devices } from '@playwright/test'; - -/** - * See https://playwright.dev/docs/test-configuration. - */ -const config: PlaywrightTestConfig = { - testDir: './tests', - /* Maximum time one test can run for. */ - timeout: 150_000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000, - }, - /* Run tests in files in parallel */ - fullyParallel: true, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: 0, - /* Opt out of parallel tests on CI. */ - workers: 1, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'list', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, - - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - ...devices['Desktop Chrome'], - }, - }, - // For now we only test Chrome! - // { - // name: 'firefox', - // use: { - // ...devices['Desktop Firefox'], - // }, - // }, - // { - // name: 'webkit', - // use: { - // ...devices['Desktop Safari'], - // }, - // }, - ], - - /* Run your local dev server before starting the tests */ - webServer: { - command: 'pnpm start', - port: 3030, - env: { - PORT: '3030', - }, - }, -}; - -export default config; diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/webpack-4/start-event-proxy.mjs new file mode 100644 index 000000000000..5805ae9bca52 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/start-event-proxy.mjs @@ -0,0 +1,6 @@ +import { startEventProxyServer } from '@sentry-internal/test-utils'; + +startEventProxyServer({ + port: 3031, + proxyServerName: 'webpack-4', +}); diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts b/dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts deleted file mode 100644 index 7b824ef26579..000000000000 --- a/dev-packages/e2e-tests/test-applications/webpack-4/tests/behaviour-test.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { expect, test } from '@playwright/test'; - -const EVENT_POLLING_TIMEOUT = 90_000; - -const authToken = process.env.E2E_TEST_AUTH_TOKEN; -const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG; -const sentryTestProject = process.env.E2E_TEST_SENTRY_PROJECT; - -test('Sends an exception to Sentry', async ({ page }) => { - await page.goto('/'); - - const exceptionIdHandle = await page.waitForFunction(() => window.capturedExceptionId); - const exceptionEventId = await exceptionIdHandle.jsonValue(); - - console.log(`Polling for error eventId: ${exceptionEventId}`); - - await expect - .poll( - async () => { - const response = await fetch( - `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${exceptionEventId}/`, - { headers: { Authorization: `Bearer ${authToken}` } }, - ); - return response.status; - }, - { - timeout: EVENT_POLLING_TIMEOUT, - }, - ) - .toBe(200); -}); diff --git a/dev-packages/e2e-tests/test-applications/webpack-4/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/webpack-4/tests/errors.test.ts new file mode 100644 index 000000000000..2c2ca2dbb952 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-4/tests/errors.test.ts @@ -0,0 +1,14 @@ +import { expect, test } from '@playwright/test'; +import { waitForError } from '@sentry-internal/test-utils'; + +test('Captures an exception', async ({ page }) => { + const eventPromise = waitForError('webpack-4', event => { + return event.exception?.values?.[0].value === 'I am an error!'; + }); + await page.goto('/'); + + const errorEvent = await eventPromise; + + expect(errorEvent.exception?.values?.[0].value).toBe('I am an error!'); + expect(errorEvent.transaction).toBe('/'); +}); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js index 4fd9cd67e7e3..69877184b91a 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-5/entry.js +++ b/dev-packages/e2e-tests/test-applications/webpack-5/entry.js @@ -1,11 +1,11 @@ -import { browserTracingIntegration, captureException, init } from '@sentry/browser'; +import { browserTracingIntegration, init } from '@sentry/browser'; init({ dsn: process.env.E2E_TEST_DSN, integrations: [browserTracingIntegration()], + tunnel: 'http://localhost:3031', }); setTimeout(() => { - const eventId = captureException(new Error('I am an error!')); - window.capturedExceptionId = eventId; + throw new Error('I am an error!'); }, 2000); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/package.json b/dev-packages/e2e-tests/test-applications/webpack-5/package.json index bae94797b9bb..996b4f240b74 100644 --- a/dev-packages/e2e-tests/test-applications/webpack-5/package.json +++ b/dev-packages/e2e-tests/test-applications/webpack-5/package.json @@ -9,6 +9,7 @@ }, "devDependencies": { "@playwright/test": "^1.44.1", + "@sentry-internal/test-utils": "link:../../../test-utils", "@sentry/browser": "latest || *", "webpack": "^5.91.0", "terser-webpack-plugin": "^5.3.10", diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.mjs new file mode 100644 index 000000000000..4248d8d94297 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.mjs @@ -0,0 +1,7 @@ +import { getPlaywrightConfig } from '@sentry-internal/test-utils'; + +const config = getPlaywrightConfig({ + startCommand: 'pnpm start', +}); + +export default config; diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts b/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts deleted file mode 100644 index 5f93f826ebf0..000000000000 --- a/dev-packages/e2e-tests/test-applications/webpack-5/playwright.config.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; -import { devices } from '@playwright/test'; - -/** - * See https://playwright.dev/docs/test-configuration. - */ -const config: PlaywrightTestConfig = { - testDir: './tests', - /* Maximum time one test can run for. */ - timeout: 150_000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000, - }, - /* Run tests in files in parallel */ - fullyParallel: true, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: 0, - /* Opt out of parallel tests on CI. */ - workers: 1, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'list', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ - actionTimeout: 0, - - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - ...devices['Desktop Chrome'], - }, - }, - // For now we only test Chrome! - // { - // name: 'firefox', - // use: { - // ...devices['Desktop Firefox'], - // }, - // }, - // { - // name: 'webkit', - // use: { - // ...devices['Desktop Safari'], - // }, - // }, - ], - - /* Run your local dev server before starting the tests */ - webServer: { - command: 'pnpm start', - port: 3030, - env: { - PORT: '3030', - }, - }, -}; - -export default config; diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/webpack-5/start-event-proxy.mjs new file mode 100644 index 000000000000..8ee10bade2f8 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/start-event-proxy.mjs @@ -0,0 +1,6 @@ +import { startEventProxyServer } from '@sentry-internal/test-utils'; + +startEventProxyServer({ + port: 3031, + proxyServerName: 'webpack-5', +}); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts b/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts deleted file mode 100644 index 7b824ef26579..000000000000 --- a/dev-packages/e2e-tests/test-applications/webpack-5/tests/behaviour-test.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { expect, test } from '@playwright/test'; - -const EVENT_POLLING_TIMEOUT = 90_000; - -const authToken = process.env.E2E_TEST_AUTH_TOKEN; -const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG; -const sentryTestProject = process.env.E2E_TEST_SENTRY_PROJECT; - -test('Sends an exception to Sentry', async ({ page }) => { - await page.goto('/'); - - const exceptionIdHandle = await page.waitForFunction(() => window.capturedExceptionId); - const exceptionEventId = await exceptionIdHandle.jsonValue(); - - console.log(`Polling for error eventId: ${exceptionEventId}`); - - await expect - .poll( - async () => { - const response = await fetch( - `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/events/${exceptionEventId}/`, - { headers: { Authorization: `Bearer ${authToken}` } }, - ); - return response.status; - }, - { - timeout: EVENT_POLLING_TIMEOUT, - }, - ) - .toBe(200); -}); diff --git a/dev-packages/e2e-tests/test-applications/webpack-5/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/webpack-5/tests/errors.test.ts new file mode 100644 index 000000000000..c899613aafc2 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/webpack-5/tests/errors.test.ts @@ -0,0 +1,14 @@ +import { expect, test } from '@playwright/test'; +import { waitForError } from '@sentry-internal/test-utils'; + +test('Captures an exception', async ({ page }) => { + const eventPromise = waitForError('webpack-5', event => { + return event.exception?.values?.[0].value === 'I am an error!'; + }); + await page.goto('/'); + + const errorEvent = await eventPromise; + + expect(errorEvent.exception?.values?.[0].value).toBe('I am an error!'); + expect(errorEvent.transaction).toBe('/'); +});