refactor: extract e2e tests to separate app

Let's see if this works nicely in the pipeline...

Related to #83

.github/workflows/default.yml

@@ -58,13 +58,13 @@ jobs:
 
       - name: E2E tests
         run: |
-          (cd apps/webapp && npx playwright install chromium --with-deps)
+          (cd apps/e2e && npx playwright install chromium --with-deps)
           pnpm test:e2e
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: webapp/playwright-report/
+          path: e2e/playwright-report/
           retention-days: 30
 
   deploy:

README.md

@@ -135,6 +135,6 @@ Then, run the e2e tests:
 
 ```sh
 # Install the playwright dependencies if they haven't been yet
-(cd webapp && pnpm dlx playwright install chromium --with-deps)
+(cd apps/e2e && pnpm dlx playwright install chromium --with-deps)
 pnpm test:e2e
 ```

apps/e2e/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@serieslist/eslint-config-base",
+  "root": true
+}

apps/e2e/.gitignore

@@ -0,0 +1,3 @@
+playwright-report
+playwright/.cache
+test-results

apps/e2e/.prettierrc.json

@@ -0,0 +1 @@
+"@serieslist/prettier-config"

apps/e2e/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@serieslist/e2e",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "test:e2e": "dotenv -e ../../.env.e2e pnpm exec playwright test -- --ui",
+    "test:e2e:headed": "pnpm test:e2e -- --headed"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.35.1",
+    "@serieslist/eslint-config-base": "workspace:*",
+    "@serieslist/prettier-config": "workspace:*",
+    "@serieslist/typescript-config-base": "workspace:*",
+    "nanoid": "^4.0.2",
+    "typescript": "^4.9.4"
+  }
+}

apps/webapp/playwright.config.ts → apps/e2e/playwright.config.ts

@@ -1,12 +1,12 @@
 import { defineConfig, devices } from '@playwright/test'
 
-import { config } from '#/config'
+import { config } from './src/config'
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './e2e',
+  testDir: './src',
   timeout: 30 * 1000,
   expect: {
     timeout: 5000,
@@ -33,19 +33,19 @@ export default defineConfig({
 
   webServer: [
     {
-      command: 'pnpm start:e2e',
+      command: '(cd ../.. && pnpm exec nx start:e2e @serieslist/webapp)',
       port: config.port,
       timeout: 120 * 1000,
       reuseExistingServer: !process.env.CI,
     },
     {
-      command: '(cd ../api && pnpm start:e2e)',
+      command: '(cd ../.. && pnpm exec nx start:e2e @serieslist/api)',
       url: `${config.api.url}/graphql`,
       timeout: 20 * 1000,
       reuseExistingServer: !process.env.CI,
     },
     {
-      command: '(cd ../api && pnpm start:tmdb)',
+      command: '(cd ../.. && pnpm exec nx start:tmdb @serieslist/api)',
       url: `http://localhost:4002`,
       timeout: 20 * 1000,
       reuseExistingServer: !process.env.CI,

apps/e2e/src/config.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+export const config = {
+  port: parseInt(process.env.VITE_APP_PORT!),
+  api: {
+    url: process.env.VITE_API_URL!,
+  },
+}

apps/webapp/playwright/fixtures.ts → apps/e2e/src/fixtures.ts

@@ -5,10 +5,8 @@ import { test as baseTest } from '@playwright/test'
 
 import { registerNewUser } from './utils'
 
-// eslint-disable-next-line import/export
 export * from '@playwright/test'
 
-// eslint-disable-next-line import/export
 export const test = baseTest.extend<object, { workerStorageState: string }>({
   // Use the same storage state for all tests in this worker.
   storageState: ({ workerStorageState }, use) => use(workerStorageState),

apps/webapp/e2e/series.spec.ts → apps/e2e/src/tests/series.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../playwright/fixtures'
+import { test, expect } from '../fixtures'
 
 test('allows searching for series and viewing their details', async ({
   page,

apps/webapp/e2e/seriesProgress.spec.ts → apps/e2e/src/tests/seriesProgress.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-import { registerNewUser } from 'playwright/utils'
+import { registerNewUser } from '../utils'
 
 test('allows keeping track of series progress', async ({ page }) => {
   await registerNewUser(page)

apps/webapp/playwright/utils.ts → apps/e2e/src/utils.ts

@@ -1,7 +1,7 @@
 import { type Page, expect } from '@playwright/test'
 import { nanoid } from 'nanoid'
 
-import { config } from '#/config'
+import { config } from './config'
 
 export const registerNewUser = async (page: Page) => {
   const email = `test.dude${nanoid()}@test.com`

apps/e2e/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@serieslist/typescript-config-base",
+  "compilerOptions": {}
+}

apps/webapp/.gitignore

@@ -1,6 +1,3 @@
 node_modules/
 dist/
 coverage
-/test-results/
-/playwright-report/
-/playwright/.cache/

apps/webapp/package.json

@@ -14,7 +14,6 @@
     "tsc": "tsc --noEmit",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "dotenv -e ../../.env.e2e pnpm exec playwright test",
     "codegen": "graphql-codegen"
   },
   "dependencies": {
@@ -62,7 +61,6 @@
   "devDependencies": {
     "@graphql-codegen/cli": "4.0.1",
     "@graphql-codegen/client-preset": "4.0.1",
-    "@playwright/test": "^1.35.1",
     "@sentry/vite-plugin": "^2.8.0",
     "@serieslist/eslint-config-react": "workspace:*",
     "@serieslist/prettier-config": "workspace:*",

apps/webapp/vite.config.ts

@@ -3,7 +3,7 @@ import path, { join } from 'path'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
-import ssr from 'vike/plugin'
+import { ssr } from 'vike/plugin'
 import { loadEnv } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import svgr from 'vite-plugin-svgr'

nx.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "workspaceLayout": {
     "appsDir": "apps"
   },

package.json

@@ -18,7 +18,7 @@
     "build": "nx affected -t build",
     "migrate": "pnpm -F api migrate",
     "migrate:test": "dotenv -e .env.test -- pnpm -F api migrate:test",
-    "test:e2e": "dotenv -e .env.e2e -- pnpm -F webapp test:e2e"
+    "test:e2e": "dotenv -e .env.e2e -- nx test:e2e @serieslist/e2e"
   },
   "devDependencies": {
     "dotenv-cli": "^7.1.0",