Skip to content

Commit ee6cb16

Browse files
onurtemizkanonurtemizkan
committed
Setup E2E test application.
1 parent a495c7f commit ee6cb16

File tree

12 files changed

+391
-99
lines changed

12 files changed

+391
-99
lines changed

‎.github/workflows/build.yml

+1
Original file line numberDiff line numberDiff line change
@@ -1037,6 +1037,7 @@ jobs:
10371037
'create-remix-app',
10381038
'create-remix-app-v2',
10391039
'create-remix-app-express-vite-dev',
1040+
'create-remix-app-fastify-vite',
10401041
'debug-id-sourcemaps',
10411042
# 'esm-loader-node-express-app', # This is currently broken for upstream reasons. See https://github.com/getsentry/sentry-javascript/pull/11338#issuecomment-2025450675
10421043
'nextjs-app-dir',

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/root.tsx

+62-9
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,80 @@
1-
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
2-
1+
import { cssBundleHref } from '@remix-run/css-bundle';
2+
import { LinksFunction, MetaFunction, json } from '@remix-run/node';
3+
import {
4+
Links,
5+
LiveReload,
6+
Meta,
7+
Outlet,
8+
Scripts,
9+
ScrollRestoration,
10+
useLoaderData,
11+
useRouteError,
12+
} from '@remix-run/react';
313
import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix';
14+
import type { SentryMetaArgs } from '@sentry/remix';
15+
16+
export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : [])];
17+
18+
export const loader = () => {
19+
return json({
20+
ENV: {
21+
SENTRY_DSN: process.env.E2E_TEST_DSN,
22+
},
23+
});
24+
};
25+
26+
export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
27+
return [
28+
{
29+
env: data.ENV,
30+
},
31+
{
32+
name: 'sentry-trace',
33+
content: data.sentryTrace,
34+
},
35+
{
36+
name: 'baggage',
37+
content: data.sentryBaggage,
38+
},
39+
];
40+
};
41+
42+
export function ErrorBoundary() {
43+
const error = useRouteError();
44+
const eventId = captureRemixErrorBoundaryError(error);
45+
46+
return (
47+
<div>
48+
<span>ErrorBoundary Error</span>
49+
<span id="event-id">{eventId}</span>
50+
</div>
51+
);
52+
}
53+
54+
function App() {
55+
const { ENV } = useLoaderData();
456

5-
export function Layout({ children }: { children: React.ReactNode }) {
657
return (
758
<html lang="en">
859
<head>
960
<meta charSet="utf-8" />
10-
<meta name="viewport" content="width=device-width, initial-scale=1" />
61+
<meta name="viewport" content="width=device-width,initial-scale=1" />
62+
<script
63+
dangerouslySetInnerHTML={{
64+
__html: `window.ENV = ${JSON.stringify(ENV)}`,
65+
}}
66+
/>
1167
<Meta />
1268
<Links />
1369
</head>
1470
<body>
15-
{children}
71+
<Outlet />
1672
<ScrollRestoration />
1773
<Scripts />
74+
<LiveReload />
1875
</body>
1976
</html>
2077
);
2178
}
2279

23-
function App() {
24-
return <Outlet />;
25-
}
26-
2780
export default withSentry(App);

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/_index.tsx

+20-38
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,27 @@
1-
import type { MetaFunction } from '@remix-run/node';
1+
import { Link, useSearchParams } from '@remix-run/react';
22
import * as Sentry from '@sentry/remix';
33

4-
export const meta: MetaFunction = () => {
5-
return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
6-
};
7-
84
export default function Index() {
5+
const [searchParams] = useSearchParams();
6+
7+
if (searchParams.get('tag')) {
8+
Sentry.setTag('sentry_test', searchParams.get('tag'));
9+
}
10+
911
return (
10-
<div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
11-
<h1>Welcome to Remix</h1>
12-
<ul>
13-
<li>
14-
<a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">
15-
15m Quickstart Blog Tutorial
16-
</a>
17-
</li>
18-
<li>
19-
<a target="_blank" href="https://remix.run/tutorials/jokes" rel="noreferrer">
20-
Deep Dive Jokes App Tutorial
21-
</a>
22-
</li>
23-
<li>
24-
<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
25-
Remix Docs
26-
</a>
27-
</li>
28-
<li>
29-
<div>
30-
<span>Remix + Sentry on the client</span>
31-
<input
32-
type="button"
33-
value="Capture Exception"
34-
id="exception-button"
35-
onClick={() => {
36-
const eventId = Sentry.captureException(new Error('I am an error!'));
37-
window.capturedExceptionId = eventId;
38-
}}
39-
/>
40-
</div>
41-
</li>
42-
</ul>
12+
<div>
13+
<input
14+
type="button"
15+
value="Capture Exception"
16+
id="exception-button"
17+
onClick={() => {
18+
const eventId = Sentry.captureException(new Error('I am an error!'));
19+
window.capturedExceptionId = eventId;
20+
}}
21+
/>
22+
<Link to="/user/5" id="navigation">
23+
navigate
24+
</Link>
4325
</div>
4426
);
4527
}

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/client-error.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { useState } from 'react';
2+
3+
export default function ErrorBoundaryCapture() {
4+
const [count, setCount] = useState(0);
5+
6+
if (count > 0) {
7+
throw new Error('Sentry React Component Error');
8+
} else {
9+
setTimeout(() => setCount(count + 1), 0);
10+
}
11+
12+
return <div>{count}</div>;
13+
}

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/navigate.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { LoaderFunction } from '@remix-run/node';
2+
import { useLoaderData } from '@remix-run/react';
3+
4+
export const loader: LoaderFunction = async ({ params: { id } }) => {
5+
if (id === '-1') {
6+
throw new Error('Unexpected Server Error');
7+
}
8+
9+
return null;
10+
};
11+
12+
export default function LoaderError() {
13+
const data = useLoaderData();
14+
15+
return (
16+
<div>
17+
<h1>{data && data.test ? data.test : 'Not Found'}</h1>
18+
</div>
19+
);
20+
}

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/app/routes/user.$id.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function User() {
2+
return <div>I am a blank page</div>;
3+
}

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/globals.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
interface Window {
2+
recordedTransactions?: string[];
3+
capturedExceptionId?: string;
4+
ENV: {
5+
SENTRY_DSN: string;
6+
};
7+
}

‎dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@
88
"dev": "node ./server.js",
99
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
1010
"start": "cross-env NODE_ENV=production node ./server.js",
11-
"test:e2e": "playwright test --ui",
12-
"typecheck": "tsc"
11+
"typecheck": "tsc",
12+
"test:build": "pnpm install && npx playwright install && pnpm build",
13+
"test:assert": "pnpm playwright test"
1314
},
1415
"dependencies": {
16+
"@remix-run/css-bundle": "^2.8.1",
1517
"@remix-run/express": "^2.8.1",
1618
"@remix-run/node": "^2.8.1",
1719
"@remix-run/react": "^2.8.1",
18-
"@sentry/remix": "file:../../../../packages/remix",
20+
"@sentry/remix": "latest || *",
1921
"compression": "^1.7.4",
2022
"express": "^4.18.2",
2123
"isbot": "^4.1.0",
@@ -34,6 +36,7 @@
3436
"@typescript-eslint/eslint-plugin": "^6.7.4",
3537
"@typescript-eslint/parser": "^6.7.4",
3638
"cross-env": "^7.0.3",
39+
"esbuild": "0.19.12",
3740
"eslint": "^8.38.0",
3841
"eslint-import-resolver-typescript": "^3.6.1",
3942
"eslint-plugin-import": "^2.28.1",

0 commit comments

Comments
 (0)