test(browser): Add error event test

Zen-cronic · Zen-cronic · commit 435a44bfddc2 · 2024-07-30T20:56:10.000-04:00
diff --git a/dev-packages/e2e-tests/test-applications/default-browser/build.mjs b/dev-packages/e2e-tests/test-applications/default-browser/build.mjs
@@ -17,7 +17,12 @@ webpack(
       minimize: true,
       minimizer: [new TerserPlugin()],
     },
-    plugins: [new webpack.EnvironmentPlugin(['E2E_TEST_DSN']), new HtmlWebpackPlugin()],
+    plugins: [
+      new webpack.EnvironmentPlugin(['E2E_TEST_DSN']),
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, 'public/index.html'),
+      }),
+    ],
     mode: 'production',
   },
   (err, stats) => {
diff --git a/dev-packages/e2e-tests/test-applications/default-browser/public/index.html b/dev-packages/e2e-tests/test-applications/default-browser/public/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Browser App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <input type="button" value="Capture Exception" id="exception-button" />
+
+    <!-- The script tags for the bundled JavaScript files will be injected here by HtmlWebpackPlugin in build.mjs-->
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/default-browser/src/index.js b/dev-packages/e2e-tests/test-applications/default-browser/src/index.js
@@ -7,6 +7,6 @@ Sentry.init({
   integrations: [Sentry.browserTracingIntegration()],
 });
 
-setTimeout(() => {
+document.getElementById('exception-button').addEventListener('click', () => {
   throw new Error('I am an error!');
-}, 2000);
+});
diff --git a/dev-packages/e2e-tests/test-applications/default-browser/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/default-browser/tests/errors.test.ts
@@ -1,5 +1,30 @@
 import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
 
-test('testing', () => {
-  expect(true).toBe(true);
+test('Should send correct error event', async ({ page }) => {
+  const errorEventPromise = waitForError('default-browser', event => {
+    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+  });
+
+  await page.goto('/');
+
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');
+
+  expect(errorEvent.transaction).toBe('/');
+
+  expect(errorEvent.request).toEqual({
+    url: 'http://localhost:3030/',
+    headers: expect.any(Object),
+  });
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: expect.any(String),
+    span_id: expect.any(String),
+  });
 });
