chore(solid): Add e2e test app for solid sdk without solidrouter (#12661

) Moved the existing app to `solid-solidrouter` and created a new for `solid` without using any of the solid router integration.
getsentry · Jun 26, 2024 · 1092d77 · 1092d77
1 parent 8c94548
commit 1092d77
Show file tree

Hide file tree

Showing 28 changed files with 556 additions and 94 deletions.
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/.gitignore b/dev-packages/e2e-tests/test-applications/solid-solidrouter/.gitignore
@@ -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
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/.npmrc b/dev-packages/e2e-tests/test-applications/solid-solidrouter/.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/solid-solidrouter/README.md b/dev-packages/e2e-tests/test-applications/solid-solidrouter/README.md
@@ -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.)
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/index.html b/dev-packages/e2e-tests/test-applications/solid-solidrouter/index.html
@@ -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>
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/package.json b/dev-packages/e2e-tests/test-applications/solid-solidrouter/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "solid-solidrouter",
+ "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.44.1",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@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/solid": "latest || *"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/solid-solidrouter/playwright.config.mjs
@@ -0,0 +1,8 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+ startCommand: 'pnpm preview --port 3030',
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/postcss.config.js b/dev-packages/e2e-tests/test-applications/solid-solidrouter/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/...est-applications/solid/src/errors/404.tsx → ...ions/solid-solidrouter/src/errors/404.tsx b/...est-applications/solid/src/errors/404.tsx → ...ions/solid-solidrouter/src/errors/404.tsx
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/index.css b/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/index.tsx b/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/index.tsx
@@ -0,0 +1,22 @@
+/* @refresh reload */
+import * as Sentry from '@sentry/solid';
+import { solidRouterBrowserTracingIntegration, withSentryRouterRouting } from '@sentry/solid/solidrouter';
+import { Router } 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: [solidRouterBrowserTracingIntegration()],
+ release: 'e2e-test',
+ tunnel: 'http://localhost:3031/', // proxy server
+ tracesSampleRate: 1.0,
+});
+
+const SentryRouter = withSentryRouterRouting(Router);
+
+render(() => <SentryRouter root={PageRoot}>{routes}</SentryRouter>, document.getElementById('root'));
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/pageroot.tsx b/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/pageroot.tsx
@@ -0,0 +1,28 @@
+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>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </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>
+ </>
+ );
+}
diff --git a/.../solid/src/pages/errorboundaryexample.tsx → ...router/src/pages/errorboundaryexample.tsx b/.../solid/src/pages/errorboundaryexample.tsx → ...router/src/pages/errorboundaryexample.tsx
diff --git a/...est-applications/solid/src/pages/home.tsx → ...ions/solid-solidrouter/src/pages/home.tsx b/...est-applications/solid/src/pages/home.tsx → ...ions/solid-solidrouter/src/pages/home.tsx
diff --git a/...est-applications/solid/src/pages/user.tsx → ...ions/solid-solidrouter/src/pages/user.tsx b/...est-applications/solid/src/pages/user.tsx → ...ions/solid-solidrouter/src/pages/user.tsx
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/routes.ts b/dev-packages/e2e-tests/test-applications/solid-solidrouter/src/routes.ts
@@ -0,0 +1,23 @@
+import { lazy } from 'solid-js';
+
+import ErrorBoundaryExample from './pages/errorboundaryexample';
+import Home from './pages/home';
+
+export const routes = [
+ {
+ path: '/',
+ component: Home,
+ },
+ {
+ path: '/user/:id',
+ component: lazy(() => import('./pages/user')),
+ },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
+ {
+ path: '**',
+ component: lazy(() => import('./errors/404')),
+ },
+];
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/solid-solidrouter/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'solid',
+});
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/tailwind.config.ts b/dev-packages/e2e-tests/test-applications/solid-solidrouter/tailwind.config.ts
@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+ content: ['./src/**/*.{js,jsx,ts,tsx}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/tests/errorboundary.test.ts b/dev-packages/e2e-tests/test-applications/solid-solidrouter/tests/errorboundary.test.ts
@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solid', errorEvent => {
+ return !errorEvent.type && errorEvent.transaction === '/error-boundary-example';
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solid', errorEvent => {
+ return !errorEvent.type && errorEvent.transaction === '/error-boundary-example';
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solid', errorEvent => {
+ return !errorEvent.type && errorEvent.transaction === '/error-boundary-example';
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
diff --git a/dev-packages/e2e-tests/test-applications/solid-solidrouter/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/solid-solidrouter/tests/errors.test.ts
@@ -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('solid', async errorEvent => {
+ return !errorEvent.type && errorEvent.exception?.values?.[0]?.value === 'Error thrown from Solid E2E test app';
+ });
+
+ await Promise.all([page.goto(`/`), page.locator('#errorBtn').click()]);
+
+ const error = await errorPromise;
+
+ expect(error).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'Error',
+ value: 'Error thrown from Solid E2E test app',
+ mechanism: {
+ type: 'onerror',
+ handled: false,
+ },
+ },
+ ],
+ },
+ transaction: '/',
+ });
+});