Setup E2E test application.

getsentry · Apr 19, 2024 · 059008b · 059008b
1 parent a495c7f
commit 059008b
Show file tree

Hide file tree

Showing 11 changed files with 390 additions and 99 deletions.
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/.npmrc b/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/.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/create-remix-app-fastify-vite/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/root.tsx
@@ -1,27 +1,80 @@
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
-
+import { cssBundleHref } from '@remix-run/css-bundle';
+import { LinksFunction, MetaFunction, json } from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+  useRouteError,
+} from '@remix-run/react';
 import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix';
+import type { SentryMetaArgs } from '@sentry/remix';
+
+export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : [])];
+
+export const loader = () => {
+  return json({
+    ENV: {
+      SENTRY_DSN: process.env.E2E_TEST_DSN,
+    },
+  });
+};
+
+export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
+  return [
+    {
+      env: data.ENV,
+    },
+    {
+      name: 'sentry-trace',
+      content: data.sentryTrace,
+    },
+    {
+      name: 'baggage',
+      content: data.sentryBaggage,
+    },
+  ];
+};
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const eventId = captureRemixErrorBoundaryError(error);
+
+  return (
+    <div>
+      <span>ErrorBoundary Error</span>
+      <span id="event-id">{eventId}</span>
+    </div>
+  );
+}
+
+function App() {
+  const { ENV } = useLoaderData();
 
-export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.ENV = ${JSON.stringify(ENV)}`,
+          }}
+        />
         <Meta />
         <Links />
       </head>
       <body>
-        {children}
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );
 }
 
-function App() {
-  return <Outlet />;
-}
-
 export default withSentry(App);
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/_index.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/_index.tsx
@@ -1,45 +1,27 @@
-import type { MetaFunction } from '@remix-run/node';
+import { Link, useSearchParams } from '@remix-run/react';
 import * as Sentry from '@sentry/remix';
 
-export const meta: MetaFunction = () => {
-  return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
-};
-
 export default function Index() {
+  const [searchParams] = useSearchParams();
+
+  if (searchParams.get('tag')) {
+    Sentry.setTag('sentry_test', searchParams.get('tag'));
+  }
+
   return (
-    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/tutorials/jokes" rel="noreferrer">
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-        <li>
-          <div>
-            <span>Remix + Sentry on the client</span>
-            <input
-              type="button"
-              value="Capture Exception"
-              id="exception-button"
-              onClick={() => {
-                const eventId = Sentry.captureException(new Error('I am an error!'));
-                window.capturedExceptionId = eventId;
-              }}
-            />
-          </div>
-        </li>
-      </ul>
+    <div>
+      <input
+        type="button"
+        value="Capture Exception"
+        id="exception-button"
+        onClick={() => {
+          const eventId = Sentry.captureException(new Error('I am an error!'));
+          window.capturedExceptionId = eventId;
+        }}
+      />
+      <Link to="/user/5" id="navigation">
+        navigate
+      </Link>
     </div>
   );
 }
diff --git a/...ges/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/client-error.tsx b/...ges/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/client-error.tsx
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export default function ErrorBoundaryCapture() {
+  const [count, setCount] = useState(0);
+
+  if (count > 0) {
+    throw new Error('Sentry React Component Error');
+  } else {
+    setTimeout(() => setCount(count + 1), 0);
+  }
+
+  return <div>{count}</div>;
+}
diff --git a/...ackages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/navigate.tsx b/...ackages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/navigate.tsx
@@ -0,0 +1,20 @@
+import { LoaderFunction } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+export const loader: LoaderFunction = async ({ params: { id } }) => {
+  if (id === '-1') {
+    throw new Error('Unexpected Server Error');
+  }
+
+  return null;
+};
+
+export default function LoaderError() {
+  const data = useLoaderData();
+
+  return (
+    <div>
+      <h1>{data && data.test ? data.test : 'Not Found'}</h1>
+    </div>
+  );
+}
diff --git a/...ackages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/user.$id.tsx b/...ackages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/user.$id.tsx
@@ -0,0 +1,3 @@
+export default function User() {
+  return <div>I am a blank page</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/globals.d.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/globals.d.ts
@@ -0,0 +1,7 @@
+interface Window {
+  recordedTransactions?: string[];
+  capturedExceptionId?: string;
+  ENV: {
+    SENTRY_DSN: string;
+  };
+}
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/package.json
@@ -8,14 +8,16 @@
     "dev": "node ./server.js",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "cross-env NODE_ENV=production node ./server.js",
-    "test:e2e": "playwright test --ui",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "pnpm playwright test"
   },
   "dependencies": {
+    "@remix-run/css-bundle": "^2.8.1",
     "@remix-run/express": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@sentry/remix": "file:../../../../packages/remix",
+    "@sentry/remix": "latest || *",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "isbot": "^4.1.0",
@@ -34,6 +36,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "cross-env": "^7.0.3",
+    "esbuild": "0.19.12",
     "eslint": "^8.38.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",