Skip to content

Commit 136575c

Browse files
andreiborzamydea
andreiborza
and
mydea
authored
feat(solidjs): Add e2e tests (#12328)
Co-authored-by: Francesco Novy <[email protected]>
1 parent 58f75b6 commit 136575c

File tree

21 files changed

+412
-0
lines changed

21 files changed

+412
-0
lines changed

‎.github/workflows/build.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1014,6 +1014,7 @@ jobs:
10141014
'react-router-6-use-routes',
10151015
'react-router-5',
10161016
'react-router-6',
1017+
'solidjs',
10171018
'svelte-5',
10181019
'sveltekit',
10191020
'sveltekit-2',

‎dev-packages/e2e-tests/test-applications/solidjs/.gitignore

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

‎dev-packages/e2e-tests/test-applications/solidjs/.npmrc

Lines changed: 2 additions & 0 deletions
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/solidjs/README.md

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.)

‎dev-packages/e2e-tests/test-applications/solidjs/index.html

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>

‎dev-packages/e2e-tests/test-applications/solidjs/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "solidjs",
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 && npx playwright install && pnpm build",
13+
"test:assert": "pnpm test:prod"
14+
},
15+
"license": "MIT",
16+
"devDependencies": {
17+
"@playwright/test": "^1.44.1",
18+
"@sentry-internal/test-utils": "link:../../../test-utils",
19+
"@sentry/types": "latest || *",
20+
"@sentry/utils": "latest || *",
21+
"autoprefixer": "^10.4.17",
22+
"postcss": "^8.4.33",
23+
"solid-devtools": "^0.29.2",
24+
"tailwindcss": "^3.4.1",
25+
"vite": "^5.0.11",
26+
"vite-plugin-solid": "^2.8.2"
27+
},
28+
"dependencies": {
29+
"@solidjs/router": "^0.13.5",
30+
"solid-js": "^1.8.11",
31+
"@sentry/solidjs": "latest || *"
32+
}
33+
}

‎dev-packages/e2e-tests/test-applications/solidjs/playwright.config.mjs

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;

‎dev-packages/e2e-tests/test-applications/solidjs/postcss.config.js

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+
};

‎dev-packages/e2e-tests/test-applications/solidjs/src/errors/404.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function NotFound() {
2+
return (
3+
<section class="text-gray-700 p-8">
4+
<h1 class="text-2xl font-bold">404: Not Found</h1>
5+
<p class="mt-4">It's gone 😞</p>
6+
</section>
7+
);
8+
}

‎dev-packages/e2e-tests/test-applications/solidjs/src/index.css

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;

‎dev-packages/e2e-tests/test-applications/solidjs/src/index.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* @refresh reload */
2+
import * as Sentry from '@sentry/solidjs';
3+
import { Router, useBeforeLeave, useLocation } from '@solidjs/router';
4+
import { render } from 'solid-js/web';
5+
import './index.css';
6+
import PageRoot from './pageroot';
7+
import { routes } from './routes';
8+
9+
Sentry.init({
10+
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
11+
debug: true,
12+
environment: 'qa', // dynamic sampling bias to keep transactions
13+
integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
14+
release: 'e2e-test',
15+
tunnel: 'http://localhost:3031/', // proxy server
16+
tracesSampleRate: 1.0,
17+
});
18+
19+
const SentryRouter = Sentry.withSentryRouterRouting(Router);
20+
21+
render(() => <SentryRouter root={PageRoot}>{routes}</SentryRouter>, document.getElementById('root'));

‎dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 class="py-2 px-4">
14+
<A href="/error" class="no-underline hover:underline">
15+
Error
16+
</A>
17+
</li>
18+
</ul>
19+
</nav>
20+
<main>{props.children}</main>
21+
</>
22+
);
23+
}

‎dev-packages/e2e-tests/test-applications/solidjs/src/pages/home.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { A } from '@solidjs/router';
2+
import { createSignal } from 'solid-js';
3+
4+
export default function Home() {
5+
const [count, setCount] = createSignal(0);
6+
7+
return (
8+
<section class="bg-gray-100 text-gray-700 p-8">
9+
<h1 class="text-2xl font-bold">Home</h1>
10+
<p class="mt-4">This is the home page.</p>
11+
12+
<div class="flex items-center space-x-2 mb-4">
13+
<button class="border rounded-lg px-2 border-gray-900" onClick={() => setCount(count() - 1)}>
14+
-
15+
</button>
16+
17+
<output class="p-10px">Count: {count()}</output>
18+
19+
<button class="border rounded-lg px-2 border-gray-900" onClick={() => setCount(count() + 1)}>
20+
+
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 SolidJS E2E test app');
29+
}}
30+
>
31+
Throw error
32+
</button>
33+
<A id="navLink" href="/user/5">
34+
User 5
35+
</A>
36+
</div>
37+
</section>
38+
);
39+
}

‎dev-packages/e2e-tests/test-applications/solidjs/src/pages/user.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { useParams } from '@solidjs/router';
2+
3+
export default function User() {
4+
const params = useParams();
5+
return <div>User ID: {params.id}</div>;
6+
}

‎dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { lazy } from 'solid-js';
2+
3+
import Home from './pages/home';
4+
5+
export const routes = [
6+
{
7+
path: '/',
8+
component: Home,
9+
},
10+
{
11+
path: '/user/:id',
12+
component: lazy(() => import('./pages/user')),
13+
},
14+
{
15+
path: '**',
16+
component: lazy(() => import('./errors/404')),
17+
},
18+
];

‎dev-packages/e2e-tests/test-applications/solidjs/start-event-proxy.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { startEventProxyServer } from '@sentry-internal/test-utils';
2+
3+
startEventProxyServer({
4+
port: 3031,
5+
proxyServerName: 'solidjs',
6+
});

‎dev-packages/e2e-tests/test-applications/solidjs/tailwind.config.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Config } from 'tailwindcss';
2+
3+
const config: Config = {
4+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
5+
theme: {
6+
extend: {},
7+
},
8+
plugins: [],
9+
};
10+
11+
export default config;

‎dev-packages/e2e-tests/test-applications/solidjs/tests/errors.test.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { expect, test } from '@playwright/test';
2+
import { waitForError } from '@sentry-internal/test-utils';
3+
4+
test('sends an error', async ({ page }) => {
5+
const errorPromise = waitForError('solidjs', async errorEvent => {
6+
return !errorEvent.type;
7+
});
8+
9+
await Promise.all([page.goto(`/`), page.locator('#errorBtn').click()]);
10+
11+
const error = await errorPromise;
12+
13+
expect(error).toMatchObject({
14+
exception: {
15+
values: [
16+
{
17+
type: 'Error',
18+
value: 'Error thrown from SolidJS E2E test app',
19+
mechanism: {
20+
type: 'onerror',
21+
handled: false,
22+
},
23+
},
24+
],
25+
},
26+
transaction: '/',
27+
});
28+
});

0 commit comments

Comments
 (0)