Skip to content

feat(solidjs): Add e2e tests #12328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 4, 2024
Merged

feat(solidjs): Add e2e tests #12328

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
40bc10c
feat(solidjs): Add e2e tests
andreiborza Jun 3, 2024
82faebd
Update dev-packages/e2e-tests/test-applications/solidjs/package.json
andreiborza Jun 3, 2024
9db8660
feat(solidjs): Add `@sentry-internal/test-utils` as dep
andreiborza Jun 3, 2024
2850c80
feat(solidjs): Remove unnecessary wait on pageload transactions from …
andreiborza Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,7 @@ jobs:
'react-router-6-use-routes',
'react-router-5',
'react-router-6',
'solidjs',
'svelte-5',
'sveltekit',
'sveltekit-2',
Expand Down
29 changes: 29 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

/test-results/
/playwright-report/
/playwright/.cache/

!*.d.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
40 changes: 40 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
## Usage

Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.

This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely
be removed once you clone a template.

```bash
$ npm install # or pnpm install or yarn install
```

## Exploring the template

This template's goal is to showcase the routing features of Solid. It also showcase how the router and Suspense work
together to parallelize data fetching tied to a route via the `.data.ts` pattern.

You can learn more about it on the [`@solidjs/router` repository](https://github.com/solidjs/solid-router)

### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)

## Available Scripts

In the project directory, you can run:

### `npm run dev` or `npm start`

Runs the app in the development mode.<br> Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>

### `npm run build`

Builds the app for production to the `dist` folder.<br> It correctly bundles Solid in production mode and optimizes the
build for the best performance.

The build is minified and the filenames include the hashes.<br> Your app is ready to be deployed!

## Deployment

You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/src/index.tsx" type="module"></script>
</body>
</html>
32 changes: 32 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "solidjs",
"version": "0.0.0",
"description": "",
"scripts": {
"build": "vite build",
"clean": "npx rimraf node_modules pnpm-lock.yaml dist",
"dev": "vite",
"preview": "vite preview",
"start": "vite",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && npx playwright install && pnpm build",
"test:assert": "pnpm test:prod"
},
"license": "MIT",
"devDependencies": {
"@playwright/test": "^1.43.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"@playwright/test": "^1.43.1",
"@playwright/test": "^1.44.1",

let's use latest here!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, and also add @sentry-internal/test-utils as a dep, explicitly.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

"@sentry/types": "latest || *",
"@sentry/utils": "latest || *",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.33",
"solid-devtools": "^0.29.2",
"tailwindcss": "^3.4.1",
"vite": "^5.0.11",
"vite-plugin-solid": "^2.8.2"
},
"dependencies": {
"@solidjs/router": "^0.13.5",
"solid-js": "^1.8.11",
"@sentry/solidjs": "latest || *"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/playwright.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'pnpm preview --port 3030',
port: 3030,
});

export default config;
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/errors/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function NotFound() {
return (
<section class="text-gray-700 p-8">
<h1 class="text-2xl font-bold">404: Not Found</h1>
<p class="mt-4">It's gone 😞</p>
</section>
);
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
21 changes: 21 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* @refresh reload */
import * as Sentry from '@sentry/solidjs';
import { Router, useBeforeLeave, useLocation } from '@solidjs/router';
import { render } from 'solid-js/web';
import './index.css';
import PageRoot from './pageroot';
import { routes } from './routes';

Sentry.init({
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
debug: true,
environment: 'qa', // dynamic sampling bias to keep transactions
integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
release: 'e2e-test',
tunnel: 'http://localhost:3031/', // proxy server
tracesSampleRate: 1.0,
});

const SentryRouter = Sentry.withSentryRouterRouting(Router);

render(() => <SentryRouter root={PageRoot}>{routes}</SentryRouter>, document.getElementById('root'));
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { A } from '@solidjs/router';

export default function PageRoot(props) {
return (
<>
<nav class="bg-gray-200 text-gray-900 px-4">
<ul class="flex items-center">
<li class="py-2 px-4">
<A href="/" class="no-underline hover:underline">
Home
</A>
</li>
<li class="py-2 px-4">
<A href="/error" class="no-underline hover:underline">
Error
</A>
</li>
</ul>
</nav>
<main>{props.children}</main>
</>
);
}
39 changes: 39 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/pages/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { A } from '@solidjs/router';
import { createSignal } from 'solid-js';

export default function Home() {
const [count, setCount] = createSignal(0);

return (
<section class="bg-gray-100 text-gray-700 p-8">
<h1 class="text-2xl font-bold">Home</h1>
<p class="mt-4">This is the home page.</p>

<div class="flex items-center space-x-2 mb-4">
<button class="border rounded-lg px-2 border-gray-900" onClick={() => setCount(count() - 1)}>
-
</button>

<output class="p-10px">Count: {count()}</output>

<button class="border rounded-lg px-2 border-gray-900" onClick={() => setCount(count() + 1)}>
+
</button>
</div>
<div class="flex flex-col items-start space-x-2">
<button
class="border rounded-lg px-2 mb-2 border-red-500 text-red-500 cursor-pointer"
id="errorBtn"
onClick={() => {
throw new Error('Error thrown from SolidJS E2E test app');
}}
>
Throw error
</button>
<A id="navLink" href="/user/5">
User 5
</A>
</div>
</section>
);
}
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/pages/user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { useParams } from '@solidjs/router';

export default function User() {
const params = useParams();
return <div>User ID: {params.id}</div>;
}
18 changes: 18 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { lazy } from 'solid-js';

import Home from './pages/home';

export const routes = [
{
path: '/',
component: Home,
},
{
path: '/user/:id',
component: lazy(() => import('./pages/user')),
},
{
path: '**',
component: lazy(() => import('./errors/404')),
},
];
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/start-event-proxy.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
port: 3031,
proxyServerName: 'solidjs',
});
11 changes: 11 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type { Config } from 'tailwindcss';

const config: Config = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};

export default config;
28 changes: 28 additions & 0 deletions dev-packages/e2e-tests/test-applications/solidjs/tests/errors.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('sends an error', async ({ page }) => {
const errorPromise = waitForError('solidjs', async errorEvent => {
return !errorEvent.type;
});

await Promise.all([page.goto(`/`), page.locator('#errorBtn').click()]);

const error = await errorPromise;

expect(error).toMatchObject({
exception: {
values: [
{
type: 'Error',
value: 'Error thrown from SolidJS E2E test app',
mechanism: {
type: 'onerror',
handled: false,
},
},
],
},
transaction: '/',
});
});
Loading
Loading