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

Author: Lms24

packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts

@@ -247,7 +247,7 @@ async function registerCallbackServerPort(serverName: string, port: string): Pro
   await writeFile(tmpFilePath, port, { encoding: 'utf8' });
 }
 
-async function retrieveCallbackServerPort(serverName: string): Promise<string> {
+function retrieveCallbackServerPort(serverName: string): Promise<string> {
   const tmpFilePath = path.join(os.tmpdir(), `${TEMP_FILE_PREFIX}${serverName}`);
-  return await readFile(tmpFilePath, 'utf8');
+  return readFile(tmpFilePath, 'utf8');
 }

packages/e2e-tests/test-applications/sveltekit/package.json

@@ -10,15 +10,14 @@
     "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:assert": "pnpm test:prod"
   },
   "dependencies": {
     "@sentry/sveltekit": "latest || *"
   },
   "devDependencies": {
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.36.2",
     "@sentry/types": "latest || *",
     "@sentry/utils": "latest || *",
     "@sveltejs/adapter-auto": "^2.0.0",

packages/e2e-tests/test-applications/sveltekit/playwright.config.ts

@@ -1,19 +1,25 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+// Fix urls not resolving to localhost on Node v17+
+// See: https://github.com/axios/axios/issues/3821#issuecomment-1413727575
+import { setDefaultResultOrder } from "dns";
+setDefaultResultOrder("ipv4first");
 
 const testEnv = process.env.TEST_ENV;
 
 if (!testEnv) {
-  throw new Error('No test env defined');
+  throw new Error("No test env defined");
 }
 
-const port = 3030;
+const svelteKitPort = 3030;
+const eventProxyPort = 3031;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './test',
+  testDir: "./test",
   /* Maximum time one test can run for. */
   timeout: 150_000,
   expect: {
@@ -28,42 +34,44 @@ const config: PlaywrightTestConfig = {
   /* 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 */
-  retries: testEnv === 'development' ? 3 : 0,
+  retries: testEnv === "development" ? 3 : 0,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'list',
+  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,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: `http://localhost:${port}`,
+    baseURL: `http://localhost:${svelteKitPort}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: "chromium",
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices["Desktop Chrome"],
       },
     },
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'pnpm ts-node --esm start-event-proxy.ts',
-      port: 3031,
+      command: "pnpm ts-node-script start-event-proxy.ts",
+      port: eventProxyPort,
+      reuseExistingServer: false,
     },
     {
       command:
-        testEnv === 'development'
-          ? `pnpm wait-port ${port} && pnpm dev --port ${port}`
-          : `pnpm wait-port ${port} && pnpm preview --port ${port}`,
-      port,
+        testEnv === "development"
+          ? `pnpm wait-port ${eventProxyPort} && pnpm dev --port ${svelteKitPort}`
+          : `pnpm wait-port ${eventProxyPort} && pnpm preview --port ${svelteKitPort}`,
+      port: svelteKitPort,
+      reuseExistingServer: false,
     },
   ],
 };

packages/e2e-tests/test-applications/sveltekit/src/hooks.client.ts

@@ -1,16 +1,18 @@
-import { env } from '$env/dynamic/public';
-import * as Sentry from '@sentry/sveltekit';
+import { env } from "$env/dynamic/public";
+import * as Sentry from "@sentry/sveltekit";
+
+console.log("Sentry DSN:", env.PUBLIC_E2E_TEST_DSN);
 
 Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
+  environment: "qa", // dynamic sampling bias to keep transactions
   dsn: env.PUBLIC_E2E_TEST_DSN,
   debug: true,
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
 });
 
 const myErrorHandler = ({ error, event }: any) => {
-  console.error('An error occurred on the client side:', error, event);
+  console.error("An error occurred on the client side:", error, event);
 };
 
 export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

packages/e2e-tests/test-applications/sveltekit/src/hooks.server.ts

@@ -1,17 +1,16 @@
-import { env } from '$env/dynamic/private';
-import * as Sentry from '@sentry/sveltekit';
+import { env } from "$env/dynamic/private";
+import * as Sentry from "@sentry/sveltekit";
 
 Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
+  environment: "qa", // dynamic sampling bias to keep transactions
   dsn: env.E2E_TEST_DSN,
   debug: true,
   tunnel: `http://localhost:3031/`, // proxy server
   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);
 

packages/e2e-tests/test-applications/sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { onMount } from "svelte";
+
+onMount(() => {
+  // Indicate that the SvelteKit app was hydrated
+  document.body.classList.add("hydrated");
+});
+</script>
+
+<h1>Sveltekit E2E Test app</h1>
+<div data-sveltekit-preload-data="off">
+  <slot></slot>
+</div>

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>

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"] }));
+};

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>

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",
+  };
+};

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>

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>

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,
+  };
+};

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",
+  };
+};

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>

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",
+  };
+};

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>

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 };
+};

packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.server.ts

@@ -0,0 +1,5 @@
+export const load = async () => {
+  return {
+    msg: "Hi everyone!",
+  };
+};

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>

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}`,
+  };
+};

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>