feat(solidjs): Add e2e tests (#12328)

andreiborza · mydea · web-flow · commit 136575c09ba1 · 2024-06-04T09:53:38.000+02:00
Co-authored-by: Francesco Novy &lt;francesco.novy@sentry.io&gt;
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1014,6 +1014,7 @@ jobs:
             'react-router-6-use-routes',
             'react-router-5',
             'react-router-6',
+            'solidjs',
             'svelte-5',
             'sveltekit',
             'sveltekit-2',
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/.gitignore b/dev-packages/e2e-tests/test-applications/solidjs/.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/solidjs/.npmrc b/dev-packages/e2e-tests/test-applications/solidjs/.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/solidjs/README.md b/dev-packages/e2e-tests/test-applications/solidjs/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/solidjs/index.html b/dev-packages/e2e-tests/test-applications/solidjs/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/solidjs/package.json b/dev-packages/e2e-tests/test-applications/solidjs/package.json
@@ -0,0 +1,33 @@
+{
+  "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.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/solidjs": "latest || *"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/solidjs/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/solidjs/postcss.config.js b/dev-packages/e2e-tests/test-applications/solidjs/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/errors/404.tsx b/dev-packages/e2e-tests/test-applications/solidjs/src/errors/404.tsx
@@ -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>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/index.css b/dev-packages/e2e-tests/test-applications/solidjs/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/index.tsx b/dev-packages/e2e-tests/test-applications/solidjs/src/index.tsx
@@ -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'));
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx b/dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/pages/home.tsx b/dev-packages/e2e-tests/test-applications/solidjs/src/pages/home.tsx
@@ -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>
+  );
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/pages/user.tsx b/dev-packages/e2e-tests/test-applications/solidjs/src/pages/user.tsx
@@ -0,0 +1,6 @@
+import { useParams } from '@solidjs/router';
+
+export default function User() {
+  const params = useParams();
+  return <div>User ID: {params.id}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts b/dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts
@@ -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')),
+  },
+];
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/solidjs/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'solidjs',
+});
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/tailwind.config.ts b/dev-packages/e2e-tests/test-applications/solidjs/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/solidjs/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/solidjs/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('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: '/',
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/tests/performance.test.ts b/dev-packages/e2e-tests/test-applications/solidjs/tests/performance.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/tsconfig.json b/dev-packages/e2e-tests/test-applications/solidjs/tsconfig.json
diff --git a/dev-packages/e2e-tests/test-applications/solidjs/vite.config.ts b/dev-packages/e2e-tests/test-applications/solidjs/vite.config.ts

Original file line number	Diff line number	Diff 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`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`