add e2e test app

getsentry · Aug 9, 2024 · fea1cb7 · fea1cb7
1 parent af5d322
commit fea1cb7
Show file tree

Hide file tree

Showing 21 changed files with 298 additions and 0 deletions.
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc
@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md
@@ -0,0 +1,3 @@
+# SvelteKit 2 TwP
+
+E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "sveltekit-2-svelte-5",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "proxy": "node start-event-proxy.mjs",
+        "clean": "npx rimraf node_modules pnpm-lock.yaml",
+        "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:build": "pnpm install && npx playwright install && pnpm build",
+        "test:assert": "pnpm test:prod"
+    },
+    "dependencies": {
+        "@sentry/sveltekit": "latest || *"
+    },
+    "devDependencies": {
+        "@playwright/test": "^1.44.1",
+        "@sentry-internal/test-utils": "link:../../../test-utils",
+        "@sentry/types": "latest || *",
+        "@sentry/utils": "latest || *",
+        "@sveltejs/adapter-auto": "^3.0.0",
+        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "svelte": "^5.0.0-next.115",
+        "svelte-check": "^3.6.0",
+        "tslib": "^2.4.1",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.3"
+    },
+    "type": "module"
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs
@@ -0,0 +1,8 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: 'pnpm preview --port 3030',
+  port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts
@@ -0,0 +1,17 @@
+import { env } from '$env/dynamic/public';
+import * as Sentry from '@sentry/sveltekit';
+
+console.log('dsn', env.PUBLIC_E2E_TEST_DSN);
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: env.PUBLIC_E2E_TEST_DSN,
+  release: '1.0.0',
+  tunnel: `http://localhost:3031/`, // proxy server
+});
+
+const myErrorHandler = ({ error, event }: any) => {
+  console.error('An error occurred on the client side:', error, event);
+};
+
+export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts
@@ -0,0 +1,13 @@
+import { E2E_TEST_DSN } from '$env/static/private';
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+});
+
+// not logging anything to console to avoid noise in the test output
+export const handleError = Sentry.handleErrorWithSentry(() => {});
+
+export const handle = Sentry.sentryHandle();
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte
@@ -0,0 +1,15 @@
+<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>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte
@@ -0,0 +1,8 @@
+<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<ul>
+  <li>
+    <a href="/errors">error route</a>
+  </li>
+</ul>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/sveltekit';
+
+export const load = async ({ url }) => {
+  if (!url.search) {
+    Sentry.captureException(new Error('No search query provided'));
+    return {
+      error: 'No search query provided',
+    };
+  }
+  return {
+    message: 'hi',
+  };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let data;
+
+  onMount(() => {
+
+      if (data.error) {
+        throw new Error('Client Error');
+      }
+  });
+</script>
+
+<p>
+  Data:
+  {data.message || 'nothing'}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'sveltekit-2-twp',
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+};
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts
@@ -0,0 +1,5 @@
+import { test } from '@playwright/test';
+
+test.skip('errors on frontend and backend are connected by the same trace', async ({ page }) => {
+  // TODO once browserTracingIntegration is always added
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
+  await page.goto('/');
+
+  const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
+  const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');
+
+  const baggageMetaTag = page.locator('meta[name="baggage"]').first();
+  const baggageContent = await baggageMetaTag.getAttribute('content');
+
+  // ensure that we do not pass a sampled -1 or -0 flag at the end:
+  expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);
+
+  expect(baggageContent?.length).toBeGreaterThan(0);
+
+  const traceId = sentryTraceContent!.split('-')[0];
+
+  expect(baggageContent).toContain('sentry-environment=qa');
+  expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
+  // ensure baggage also doesn't contain a sampled flag
+  expect(baggageContent).not.toContain('sentry-sampled=');
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/utils.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/utils.ts
@@ -0,0 +1,49 @@
+import { Page } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+/**
+ * Helper function that waits for the initial pageload to complete.
+ *
+ * This function
+ * - loads the given route ("/" by default)
+ * - waits for SvelteKit's hydration
+ * - waits for the pageload transaction to be sent (doesn't assert on it though)
+ *
+ * Useful for tests that test outcomes of _navigations_ after an initial pageload.
+ * Waiting on the pageload transaction excludes edge cases where navigations occur
+ * so quickly that the pageload idle transaction is still active. This might lead
+ * to cases where the routing span would be attached to the pageload transaction
+ * and hence eliminates a lot of flakiness.
+ *
+ */
+export async function waitForInitialPageload(
+  page: Page,
+  opts?: { route?: string; parameterizedRoute?: string; debug?: boolean },
+) {
+  const route = opts?.route ?? '/';
+  const txnName = opts?.parameterizedRoute ?? route;
+  const debug = opts?.debug ?? false;
+
+  const clientPageloadTxnEventPromise = waitForTransaction('sveltekit-2-svelte-5', txnEvent => {
+    debug &&
+      console.log({
+        txn: txnEvent?.transaction,
+        op: txnEvent.contexts?.trace?.op,
+        trace: txnEvent.contexts?.trace?.trace_id,
+        span: txnEvent.contexts?.trace?.span_id,
+        parent: txnEvent.contexts?.trace?.parent_span_id,
+      });
+
+    return txnEvent?.transaction === txnName && txnEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await Promise.all([
+    page.goto(route),
+    // the test app adds the "hydrated" class to the body when hydrating
+    page.waitForSelector('body.hydrated'),
+    // also waiting for the initial pageload txn so that later navigations don't interfere
+    clientPageloadTxnEventPromise,
+  ]);
+
+  debug && console.log('hydrated');
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	},
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts
@@ -0,0 +1,12 @@
+import { sentrySvelteKit } from '@sentry/sveltekit';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    sentrySvelteKit({
+      autoUploadSourceMaps: false,
+    }),
+    sveltekit(),
+  ],
+});