From 7f5dd11730b094c01aaa82f298a747deb3f50ee8 Mon Sep 17 00:00:00 2001
From: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:54:19 +0100
Subject: [PATCH] test(nuxt): Add E2E test with NuxtErrorBoundary (#14754)

Adding a test to make sure error events bubble up when using
`NuxtErrorBoundary`
---
 .../nuxt-3/pages/client-error.vue             | 11 +++--
 .../nuxt-3/tests/errors.client.test.ts        | 41 +++++++++++++++++++
 .../nuxt-4/app/pages/client-error.vue         | 11 +++--
 .../nuxt-4/tests/errors.client.test.ts        | 41 +++++++++++++++++++
 4 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue
index 5e1a14931f84..ea353639a3f4 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/pages/client-error.vue
@@ -1,11 +1,16 @@
 <script setup>
 import ErrorButton from '../components/ErrorButton.vue';
+
+const catchErr = () => {
+  console.log('Additional functionality in NuxtErrorBoundary');
+}
 </script>
 
 <template>
   <ErrorButton id="errorBtn"  error-text="Error thrown from Nuxt-3 E2E test app"/>
   <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-3 E2E test app"/>
-</template>
-
-
 
+  <NuxtErrorBoundary @error="catchErr">
+    <ErrorButton id="error-in-error-boundary" error-text="Error thrown in Error Boundary"/>
+  </NuxtErrorBoundary>
+</template>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts
index 4cb23e8b81df..a04ebf73f08d 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-3/tests/errors.client.test.ts
@@ -28,6 +28,47 @@ test.describe('client-side errors', async () => {
     });
   });
 
+  test('captures error thrown in NuxtErrorBoundary', async ({ page }) => {
+    const errorPromise = waitForError('nuxt-3', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown in Error Boundary';
+    });
+
+    await page.goto(`/client-error`);
+    await page.locator('#error-in-error-boundary').click();
+
+    const error = await errorPromise;
+
+    const expectedBreadcrumb = {
+      category: 'console',
+      message: 'Additional functionality in NuxtErrorBoundary',
+    };
+
+    const matchingBreadcrumb = error.breadcrumbs.find(
+      (breadcrumb: { category: string; message: string }) =>
+        breadcrumb.category === expectedBreadcrumb.category && breadcrumb.message === expectedBreadcrumb.message,
+    );
+
+    expect(matchingBreadcrumb).toBeTruthy();
+    expect(matchingBreadcrumb?.category).toBe(expectedBreadcrumb.category);
+    expect(matchingBreadcrumb?.message).toBe(expectedBreadcrumb.message);
+
+    expect(error.transaction).toEqual('/client-error');
+    expect(error.sdk.name).toEqual('sentry.javascript.nuxt');
+    expect(error).toMatchObject({
+      exception: {
+        values: [
+          {
+            type: 'Error',
+            value: 'Error thrown in Error Boundary',
+            mechanism: {
+              handled: false,
+            },
+          },
+        ],
+      },
+    });
+  });
+
   test('shows parametrized route on button error', async ({ page }) => {
     const errorPromise = waitForError('nuxt-3', async errorEvent => {
       return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Param Route Button';
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue
index c2bdabfb4752..9ec99d1e7471 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/app/pages/client-error.vue
@@ -1,11 +1,16 @@
 <script setup>
 import ErrorButton from '../components/ErrorButton.vue';
+
+const catchErr = () => {
+  console.log('Additional functionality in NuxtErrorBoundary');
+}
 </script>
 
 <template>
   <ErrorButton id="errorBtn"  error-text="Error thrown from Nuxt-4 E2E test app"/>
   <ErrorButton id="errorBtn2" error-text="Another Error thrown from Nuxt-4 E2E test app"/>
-</template>
-
-
 
+  <NuxtErrorBoundary @error="catchErr">
+    <ErrorButton id="error-in-error-boundary" error-text="Error thrown in Error Boundary"/>
+  </NuxtErrorBoundary>
+</template>
diff --git a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts
index c887e255fe57..6694ae851df1 100644
--- a/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts
+++ b/dev-packages/e2e-tests/test-applications/nuxt-4/tests/errors.client.test.ts
@@ -28,6 +28,47 @@ test.describe('client-side errors', async () => {
     });
   });
 
+  test('captures error thrown in NuxtErrorBoundary', async ({ page }) => {
+    const errorPromise = waitForError('nuxt-4', async errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Error thrown in Error Boundary';
+    });
+
+    await page.goto(`/client-error`);
+    await page.locator('#error-in-error-boundary').click();
+
+    const error = await errorPromise;
+
+    const expectedBreadcrumb = {
+      category: 'console',
+      message: 'Additional functionality in NuxtErrorBoundary',
+    };
+
+    const matchingBreadcrumb = error.breadcrumbs.find(
+      (breadcrumb: { category: string; message: string }) =>
+        breadcrumb.category === expectedBreadcrumb.category && breadcrumb.message === expectedBreadcrumb.message,
+    );
+
+    expect(matchingBreadcrumb).toBeTruthy();
+    expect(matchingBreadcrumb?.category).toBe(expectedBreadcrumb.category);
+    expect(matchingBreadcrumb?.message).toBe(expectedBreadcrumb.message);
+
+    expect(error.transaction).toEqual('/client-error');
+    expect(error.sdk.name).toEqual('sentry.javascript.nuxt');
+    expect(error).toMatchObject({
+      exception: {
+        values: [
+          {
+            type: 'Error',
+            value: 'Error thrown in Error Boundary',
+            mechanism: {
+              handled: false,
+            },
+          },
+        ],
+      },
+    });
+  });
+
   test('shows parametrized route on button error', async ({ page }) => {
     const errorPromise = waitForError('nuxt-4', async errorEvent => {
       return errorEvent?.exception?.values?.[0]?.value === 'Error thrown from Param Route Button';