test(e2e): Add Astro 4 E2E test app (#13375)

getsentry · Aug 14, 2024 · 5c08d03 · 5c08d03
1 parent 7aebf94
commit 5c08d03
Show file tree

Hide file tree

Showing 26 changed files with 673 additions and 1 deletion.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -847,6 +847,7 @@ jobs:
           [
             'angular-17',
             'angular-18',
+            'astro-4',
             'aws-lambda-layer-cjs',
             'aws-serverless-esm',
             'node-express',

diff --git a/dev-packages/e2e-tests/test-applications/astro-4/.gitignore b/dev-packages/e2e-tests/test-applications/astro-4/.gitignore
@@ -0,0 +1,26 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+test-results
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/.npmrc b/dev-packages/e2e-tests/test-applications/astro-4/.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/astro-4/README.md b/dev-packages/e2e-tests/test-applications/astro-4/README.md
@@ -0,0 +1,6 @@
+# Astro 4 E2E test app
+
+- Astro 4.x
+- Output mode `hybrid` (== opt into SSR routes)
+- Node adapter
+- Configured for Tracing and Performance
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/astro.config.mjs b/dev-packages/e2e-tests/test-applications/astro-4/astro.config.mjs
@@ -0,0 +1,29 @@
+import node from '@astrojs/node';
+import sentry from '@sentry/astro';
+import { defineConfig } from 'astro/config';
+
+import spotlightjs from '@spotlightjs/astro';
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'hybrid',
+  integrations: [
+    sentry({
+      debug: true,
+      sourceMapsUploadOptions: {
+        enabled: false,
+      },
+    }),
+    spotlightjs(),
+  ],
+  adapter: node({
+    mode: 'standalone',
+  }),
+  vite: {
+    build: {
+      rollupOptions: {
+        external: ['https'],
+      },
+    },
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/package.json b/dev-packages/e2e-tests/test-applications/astro-4/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "astro-hybrid-with-static-routes",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev --force",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "TEST_ENV=production playwright test"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.2",
+    "@astrojs/node": "^8.3.2",
+    "@playwright/test": "^1.46.0",
+    "@sentry/astro": "* || latest",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@spotlightjs/astro": "^2.1.6",
+    "astro": "^4.13.3",
+    "typescript": "^5.5.4"
+  },
+  "devDependencies": {
+    "@astrojs/internal-helpers": "^0.4.1"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/astro-4/playwright.config.mjs
@@ -0,0 +1,13 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+  throw new Error('No test env defined');
+}
+
+const config = getPlaywrightConfig({
+  startCommand: 'node ./dist/server/entry.mjs',
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/public/favicon.svg b/dev-packages/e2e-tests/test-applications/astro-4/public/favicon.svg
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/sentry.client.config.js b/dev-packages/e2e-tests/test-applications/astro-4/sentry.client.config.js
@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/astro';
+
+Sentry.init({
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  environment: 'qa',
+  tracesSampleRate: 1.0,
+  tunnel: 'http://localhost:3031/', // proxy server
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/sentry.server.config.js b/dev-packages/e2e-tests/test-applications/astro-4/sentry.server.config.js
@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/astro';
+
+Sentry.init({
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  environment: 'qa',
+  tracesSampleRate: 1.0,
+  spotlight: true,
+  tunnel: 'http://localhost:3031/', // proxy server
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/env.d.ts b/dev-packages/e2e-tests/test-applications/astro-4/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/layouts/Layout.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/layouts/Layout.astro
@@ -0,0 +1,39 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #b7b7b7;
+	}
+</style>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/client-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/client-error/index.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Client Error">
+
+<button id="#errBtn" onclick="throw new Error('client error')">
+  Throw Error
+</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/api.ts b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/api.ts
@@ -0,0 +1,15 @@
+import type { APIRoute } from 'astro';
+
+export const prerender = false;
+
+export const GET: APIRoute = ({ request, url }) => {
+  if (url.searchParams.has('error')) {
+    throw new Error('Endpoint Error');
+  }
+  return new Response(
+    JSON.stringify({
+      search: url.search,
+      sp: url.searchParams,
+    }),
+  );
+};
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/index.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export const prerender = false;
+---
+
+<Layout title="Endpoint Error">
+  <button onclick="fetch('endpoint-error/api?error=1')">Get Data</button>
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/index.astro
@@ -0,0 +1,36 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<h1>Astro E2E Test App</h1>
+		<ul role="list" style="display: flex; flex-direction: column;">
+			<a href="/ssr-error">SSR Error</a>
+			<a href="/endpoint-error">Endpoint Error</a>
+			<a href="/client-error">Cliennt Error</a>
+			<a href="/test-ssr">SSR page</a>
+			<a href="/test-static" title="static page">Static Page</a>
+		</ul>
+	</main>
+</Layout>
+
+<style>
+	main {
+		margin: auto;
+		padding: 1rem;
+		width: 800px;
+		max-width: calc(100% - 2rem);
+		color: white;
+		font-size: 20px;
+		line-height: 1.6;
+	}
+
+	h1 {
+		font-size: 4rem;
+		font-weight: 700;
+		line-height: 1;
+		text-align: center;
+		margin-bottom: 1em;
+	}
+</style>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/ssr-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/ssr-error/index.astro
@@ -0,0 +1,13 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+const a = {} as any;
+console.log(a.foo.x);
+export const prerender = false;
+---
+
+<Layout title="SSR Error">
+
+  <h1>Page with SSR error</h1>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-ssr/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-ssr/index.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "../../layouts/Layout.astro"
+
+export const prerender = false
+---
+
+<Layout title="Dynamic SSR page">
+
+    <h1>
+        This is a server page
+    </h1>
+
+    <button onclick="fetch('/test-server')">fetch</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-static/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-static/index.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export const prerender = true;
+---
+
+<Layout title="Static Page">
+
+<h1>
+    This is a static page
+</h1>
+
+<button onclick="fetch('/test-static')">fetch</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/astro-4/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'astro-4',
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.client.test.ts
@@ -0,0 +1,79 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test.describe('client-side errors', () => {
+  test('captures error thrown on click', async ({ page }) => {
+    const errorEventPromise = waitForError('astro-4', errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'client error';
+    });
+
+    await page.goto('/client-error');
+
+    await page.getByText('Throw Error').click();
+
+    const errorEvent = await errorEventPromise;
+
+    const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+    expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+      expect.objectContaining({
+        colno: expect.any(Number),
+        lineno: expect.any(Number),
+        filename: expect.stringContaining('/client-error'),
+        function: 'HTMLButtonElement.onclick',
+        in_app: true,
+      }),
+    );
+
+    expect(errorEvent).toMatchObject({
+      exception: {
+        values: [
+          {
+            mechanism: {
+              handled: false,
+              type: 'onerror',
+            },
+            type: 'Error',
+            value: 'client error',
+            stacktrace: expect.any(Object), // detailed check above
+          },
+        ],
+      },
+      level: 'error',
+      platform: 'javascript',
+      request: {
+        url: expect.stringContaining('/client-error'),
+        headers: {
+          'User-Agent': expect.any(String),
+        },
+      },
+      event_id: expect.stringMatching(/[a-f0-9]{32}/),
+      timestamp: expect.any(Number),
+      sdk: {
+        integrations: expect.arrayContaining([
+          'InboundFilters',
+          'FunctionToString',
+          'BrowserApiErrors',
+          'Breadcrumbs',
+          'GlobalHandlers',
+          'LinkedErrors',
+          'Dedupe',
+          'HttpContext',
+          'BrowserTracing',
+        ]),
+        name: 'sentry.javascript.astro',
+        version: expect.any(String),
+        packages: expect.any(Array),
+      },
+      transaction: '/client-error',
+      contexts: {
+        trace: {
+          trace_id: expect.stringMatching(/[a-f0-9]{32}/),
+          parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
+          span_id: expect.stringMatching(/[a-f0-9]{16}/),
+        },
+      },
+      environment: 'qa',
+    });
+  });
+});