test(e2e): Add tests to SvelteKit 1.x E2E test app

Lms24 · Lms24 · commit 5c8483c8f5fc · 2024-01-31T15:50:58.000+01:00
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts
@@ -6,7 +6,7 @@ import * as os from 'os';
 import * as path from 'path';
 import * as util from 'util';
 import * as zlib from 'zlib';
-import type { Envelope, EnvelopeItem, Event } from '@sentry/types';
+import type { Envelope, EnvelopeItem, Event, SerializedEvent } from '@sentry/types';
 import { parseEnvelope } from '@sentry/utils';
 
 const readFile = util.promisify(fs.readFile);
@@ -226,13 +226,13 @@ export function waitForError(
 
 export function waitForTransaction(
   proxyServerName: string,
-  callback: (transactionEvent: Event) => Promise<boolean> | boolean,
-): Promise<Event> {
+  callback: (transactionEvent: SerializedEvent) => Promise<boolean> | boolean,
+): Promise<SerializedEvent> {
   return new Promise((resolve, reject) => {
     waitForEnvelopeItem(proxyServerName, async envelopeItem => {
       const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
-      if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as Event))) {
-        resolve(envelopeItemBody as Event);
+      if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as SerializedEvent))) {
+        resolve(envelopeItemBody as SerializedEvent);
         return true;
       }
       return false;
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/package.json b/dev-packages/e2e-tests/test-applications/sveltekit/package.json
@@ -10,20 +10,19 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:prod": "TEST_ENV=production playwright test",
-    "test:dev": "TEST_ENV=development playwright test",
-    "test:build": "pnpm install && pnpm build",
-    "test:assert": "pnpm -v"
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "pnpm test:prod"
   },
   "dependencies": {
     "@sentry/sveltekit": "latest || *"
   },
   "devDependencies": {
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.41.1",
     "@sentry/types": "latest || *",
     "@sentry/utils": "latest || *",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-node": "^1.2.4",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^1.30.3",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
     "ts-node": "10.9.1",
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/playwright.config.ts b/dev-packages/e2e-tests/test-applications/sveltekit/playwright.config.ts
@@ -8,6 +8,7 @@ if (!testEnv) {
 }
 
 const port = 3030;
+const eventProxyPort = 3031;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -23,8 +24,9 @@ const config: PlaywrightTestConfig = {
      */
     timeout: 10000,
   },
+  workers: 1,
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* `next dev` is incredibly buggy with the app dir */
@@ -61,8 +63,8 @@ const config: PlaywrightTestConfig = {
     {
       command:
         testEnv === 'development'
-          ? `pnpm wait-port ${port} && pnpm dev --port ${port}`
-          : `pnpm wait-port ${port} && pnpm preview --port ${port}`,
+          ? `pnpm wait-port ${eventProxyPort} && pnpm dev --port ${port}`
+          : `pnpm wait-port ${eventProxyPort} && pnpm preview --port ${port}`,
       port,
     },
   ],
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/app.html b/dev-packages/e2e-tests/test-applications/sveltekit/src/app.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
+  <body data-sveltekit-preload-data="off">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/hooks.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/hooks.server.ts
@@ -9,9 +9,8 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-const myErrorHandler = ({ error, event }: any) => {
-  console.error('An error occurred on the server side:', error, event);
-};
+// not logging anything to console to avoid noise in the test output
+const myErrorHandler = ({ error, event }: any) => {};
 
 export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
 
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+layout.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="typescript">
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    // Indicate that the SvelteKit app was hydrated
+    document.body.classList.add('hydrated');
+  });
+</script>
+
+<slot />
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+page.svelte
@@ -1,2 +1,26 @@
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<ul>
+  <li>
+    <a href="/client-error">Client error</a>
+  </li>
+  <li>
+    <a href="/universal-load-error">Universal Load error</a>
+  </li>
+  <li>
+    <a href="/server-load-error">Server Load error</a>
+  </li>
+  <li>
+    <a href="/server-route-error">Server Route error</a>
+  </li>
+  <li>
+    <a href="/users/123abc">Route with Params</a>
+  </li>
+  <li>
+    <a href="/users">Route with Server Load</a>
+  </li>
+  <li>
+    <a href="/universal-load-fetch">Route with fetch in universal load</a>
+  </li>
+</ul>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/api/users/+server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/api/users/+server.ts
@@ -0,0 +1,3 @@
+export const GET = () => {
+  return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/client-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/client-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  function throwError() {
+    throw new Error('Click Error');
+  }
+</script>
+
+<h1>Client error</h1>
+
+<button on:click={throwError}>Throw error</button>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.server.ts
@@ -0,0 +1,6 @@
+export const load = async () => {
+  throw new Error('Server Load Error');
+  return {
+    msg: 'Hello World',
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let data
+</script>
+
+<h1>Server load error</h1>
+
+<p>
+  Message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let data;
+</script>
+
+<h1>Server Route error</h1>
+
+<p>
+  Message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.ts
@@ -0,0 +1,7 @@
+export const load = async ({ fetch }) => {
+  const res = await fetch('/server-route-error');
+  const data = await res.json();
+  return {
+    msg: data,
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+server.ts
@@ -0,0 +1,6 @@
+export const GET = async () => {
+  throw new Error('Server Route Error');
+  return {
+    msg: 'Hello World',
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let data
+</script>
+
+<h1>Universal load error</h1>
+
+<p>
+  To trigger from client: Load on another route, then navigate to this route.
+</p>
+
+<p>
+  To trigger from server: Load on this route
+</p>
+
+<p>
+  Message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.ts
@@ -0,0 +1,8 @@
+import { browser } from '$app/environment';
+
+export const load = async () => {
+  throw new Error(`Universal Load Error (${browser ? 'browser' : 'server'})`);
+  return {
+    msg: 'Hello World',
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let data;
+  console.log(data);
+</script>
+
+<h2>Fetching in universal load</h2>
+
+<p>Here's a list of a few users:</p>
+
+<ul>
+  {#each data.users as user}
+    <li>{user}</li>
+  {/each}
+</ul>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.ts
@@ -0,0 +1,5 @@
+export const load = async ({ fetch }) => {
+  const usersRes = await fetch('/api/users');
+  const data = await usersRes.json();
+  return { users: data.users };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = async () => {
+  return {
+    msg: 'Hi everyone!',
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let data;
+</script>
+<h2>
+  All Users:
+</h2>
+
+<p>
+  message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = async ({ params }) => {
+  return {
+    msg: `This is a special message for user ${params.id}`,
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import { page } from '$app/stores';
+export let data;
+</script>
+
+<h1>Route with dynamic params</h1>
+
+<p>
+  User id: {$page.params.id}
+</p>
+
+<p>
+  Secret message for user: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.client.test.ts
@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '../event-proxy-server';
+import { waitForInitialPageload } from '../utils';
+
+test.describe('client-side errors', () => {
+  test('captures error thrown on click', async ({ page }) => {
+    await page.goto('/client-error');
+
+    await expect(page.getByText('Client error')).toBeVisible();
+
+    const errorEventPromise = waitForError('sveltekit', errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Click Error';
+    });
+
+    const clickPromise = page.getByText('Throw error').click();
+
+    const [errorEvent, _] = await Promise.all([errorEventPromise, clickPromise]);
+
+    const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+    expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+      expect.objectContaining({
+        function: expect.stringContaining('HTMLButtonElement'),
+        lineno: 1,
+        in_app: true,
+      }),
+    );
+
+    expect(errorEvent.tags).toMatchObject({ runtime: 'browser' });
+  });
+
+  test('captures universal load error', async ({ page }) => {
+    await waitForInitialPageload(page);
+    await page.reload();
+
+    const errorEventPromise = waitForError('sveltekit', errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'Universal Load Error (browser)';
+    });
+
+    // navigating triggers the error on the client
+    await page.getByText('Universal Load error').click();
+
+    const errorEvent = await errorEventPromise;
+    const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+    expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+      expect.objectContaining({
+        lineno: 1,
+        in_app: true,
+      }),
+    );
+
+    expect(errorEvent.tags).toMatchObject({ runtime: 'browser' });
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.server.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/test/performance.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit/test/performance.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/test/transaction.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit/test/transaction.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/utils.ts b/dev-packages/e2e-tests/test-applications/sveltekit/utils.ts
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const GET = () => {`
	`2`	`+ return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));`
	`3`	`+};`