Skip to content

Commit 21cf1bc

Browse files
msonnbclaude
andcommitted
test(e2e): Port Solid E2E test apps to span streaming
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Xo7LcmA5Cte2uiSmp7hXSN
1 parent add9adb commit 21cf1bc

22 files changed

Lines changed: 590 additions & 205 deletions
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
/test-results/
26+
/playwright-report/
27+
/playwright/.cache/
28+
29+
!*.d.ts
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
## Usage
2+
3+
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
4+
5+
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely
6+
be removed once you clone a template.
7+
8+
```bash
9+
$ npm install # or pnpm install or yarn install
10+
```
11+
12+
## Exploring the template
13+
14+
This template's goal is to showcase the routing features of Solid. It also showcase how the router and Suspense work
15+
together to parallelize data fetching tied to a route via the `.data.ts` pattern.
16+
17+
You can learn more about it on the [`@solidjs/router` repository](https://github.com/solidjs/solid-router)
18+
19+
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
20+
21+
## Available Scripts
22+
23+
In the project directory, you can run:
24+
25+
### `npm run dev` or `npm start`
26+
27+
Runs the app in the development mode.<br> Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
28+
29+
The page will reload if you make edits.<br>
30+
31+
### `npm run build`
32+
33+
Builds the app for production to the `dist` folder.<br> It correctly bundles Solid in production mode and optimizes the
34+
build for the best performance.
35+
36+
The build is minified and the filenames include the hashes.<br> Your app is ready to be deployed!
37+
38+
## Deployment
39+
40+
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<title>Solid App</title>
8+
</head>
9+
<body>
10+
<noscript>You need to enable JavaScript to run this app.</noscript>
11+
<div id="root"></div>
12+
13+
<script src="/src/index.tsx" type="module"></script>
14+
</body>
15+
</html>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "solid-static",
3+
"version": "0.0.0",
4+
"description": "",
5+
"scripts": {
6+
"build": "vite build",
7+
"clean": "npx rimraf node_modules pnpm-lock.yaml dist",
8+
"dev": "vite",
9+
"preview": "vite preview",
10+
"start": "vite",
11+
"test:prod": "TEST_ENV=production playwright test",
12+
"test:build": "pnpm install && pnpm build",
13+
"test:assert": "pnpm test:prod"
14+
},
15+
"license": "MIT",
16+
"devDependencies": {
17+
"@playwright/test": "~1.56.0",
18+
"@sentry-internal/test-utils": "link:../../../test-utils",
19+
"autoprefixer": "^10.4.17",
20+
"postcss": "^8.4.33",
21+
"solid-devtools": "^0.29.2",
22+
"tailwindcss": "^3.4.1",
23+
"vite": "^5.4.11",
24+
"vite-plugin-solid": "^2.11.6"
25+
},
26+
"dependencies": {
27+
"solid-js": "^1.8.18",
28+
"@sentry/solid": "file:../../packed/sentry-solid-packed.tgz"
29+
},
30+
"volta": {
31+
"extends": "../../package.json"
32+
}
33+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { getPlaywrightConfig } from '@sentry-internal/test-utils';
2+
3+
const config = getPlaywrightConfig({
4+
startCommand: 'pnpm preview --port 3030',
5+
port: 3030,
6+
});
7+
8+
export default config;
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as Sentry from '@sentry/solid';
2+
import { ErrorBoundary, createSignal, onMount } from 'solid-js';
3+
4+
const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
5+
6+
const [count, setCount] = createSignal(1);
7+
const [caughtError, setCaughtError] = createSignal(false);
8+
9+
export default function App() {
10+
return (
11+
<SampleErrorBoundary>
12+
{caughtError() && <Throw error={`Error ${count()} thrown from Sentry ErrorBoundary in Solid E2E test app`} />}
13+
<section class="bg-gray-100 text-gray-700 p-8">
14+
<div class="flex flex-col items-start space-x-2">
15+
<button
16+
class="border rounded-lg px-2 mb-2 border-red-500 text-red-500 cursor-pointer"
17+
id="caughtErrorBtn"
18+
onClick={() => setCaughtError(true)}
19+
>
20+
Throw caught error
21+
</button>
22+
</div>
23+
<div class="flex flex-col items-start space-x-2">
24+
<button
25+
class="border rounded-lg px-2 mb-2 border-red-500 text-red-500 cursor-pointer"
26+
id="errorBtn"
27+
onClick={() => {
28+
throw new Error('Error thrown from Solid E2E test app');
29+
}}
30+
>
31+
Throw uncaught error
32+
</button>
33+
</div>
34+
</section>
35+
</SampleErrorBoundary>
36+
);
37+
}
38+
39+
function Throw(props) {
40+
onMount(() => {
41+
throw new Error(props.error);
42+
});
43+
return null;
44+
}
45+
46+
function SampleErrorBoundary(props) {
47+
return (
48+
<SentryErrorBoundary
49+
fallback={(error, reset) => (
50+
<section class="bg-gray-100 text-gray-700 p-8">
51+
<h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
52+
<div class="flex items-center space-x-2 mb-4">
53+
<code>{error.message}</code>
54+
</div>
55+
<button
56+
id="errorBoundaryResetBtn"
57+
class="border rounded-lg px-2 border-gray-900"
58+
onClick={() => {
59+
setCount(count() + 1);
60+
setCaughtError(false);
61+
reset();
62+
}}
63+
>
64+
Reset
65+
</button>
66+
</section>
67+
)}
68+
>
69+
{props.children}
70+
</SentryErrorBoundary>
71+
);
72+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* @refresh reload */
2+
import * as Sentry from '@sentry/solid';
3+
import { render } from 'solid-js/web';
4+
import App from './app';
5+
import './index.css';
6+
7+
Sentry.init({
8+
traceLifecycle: 'static',
9+
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
10+
debug: true,
11+
environment: 'qa', // dynamic sampling bias to keep transactions
12+
integrations: [Sentry.browserTracingIntegration()],
13+
release: 'e2e-test',
14+
tunnel: 'http://localhost:3031/', // proxy server
15+
tracesSampleRate: 1.0,
16+
});
17+
18+
render(() => <App />, document.getElementById('root'));
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { A } from '@solidjs/router';
2+
3+
export default function PageRoot(props) {
4+
return (
5+
<>
6+
<nav class="bg-gray-200 text-gray-900 px-4">
7+
<ul class="flex items-center">
8+
<li class="py-2 px-4">
9+
<A href="/" class="no-underline hover:underline">
10+
Home
11+
</A>
12+
</li>
13+
<li>
14+
<A href="/error-boundary-example" class="no-underline hover:underline">
15+
Error Boundary Example
16+
</A>
17+
</li>
18+
<li class="py-2 px-4">
19+
<A href="/error" class="no-underline hover:underline">
20+
Error
21+
</A>
22+
</li>
23+
</ul>
24+
</nav>
25+
<main>{props.children}</main>
26+
</>
27+
);
28+
}

0 commit comments

Comments
 (0)