Add playwright frontend tests (#209)

- add CI job to run the ui tests
- add instructions to frontend/README
- add title to webpages
- add data-testid to ResearchCodeInput component for locating it when testing
- add tests of user registration link with and without a research code
- resolves #121

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: run tests
+name: tests
 on:
   push:
     branches:
@@ -13,6 +13,7 @@ jobs:
     defaults:
       run:
         working-directory: ./frontend
+    timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -25,19 +26,46 @@ jobs:
           cache-dependency-path: frontend/pnpm-lock.yaml
       - run: pnpm install
       - run: pnpm build
-      - run: pnpm run test
+      - run: pnpm run test:unit
       - uses: codecov/codecov-action@v5
         with:
           files: ./frontend/coverage/coverage-final.json
           name: frontend
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
           verbose: true
+  frontend-ui-tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm exec playwright install --with-deps
+      - run: pnpm test:ui
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 7
   backend-unit-tests:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: ./mondey_backend
+    timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-python@v5

.github/workflows/codegen.yml

@@ -5,7 +5,7 @@ on:
       - main
 
 jobs:
-  codegen-and-format:
+  codegen:
     runs-on: ubuntu-latest
     defaults:
       run:

.gitignore

@@ -177,3 +177,10 @@ mondey_backend/static/*.jpg
 # project specific
 private
 static
+
+# playwright
+/frontend/node_modules/
+/frontend/test-results/
+/frontend/playwright-report/
+/frontend/blob-report/
+/frontend/playwright/.cache/

frontend/README.md

@@ -10,9 +10,21 @@ Initial setup to edit the frontend locally:
 - clone the repo, e.g. `git clone https://github.com/ssciwr/mondey.git`
 - go to the frontend folder of the repository, e.g. `cd mondey/frontend`
 - install the node dependencies, e.g. `pnpm install`
+- (optional) install playwright browsers for testing: `pnpm exec playwright install --with-deps`
+- (optional) install pre-commit for code formatting and linting: `pip install pre-commit && pre-commit install`
 
 To start a development server:
 
 - `pnpm run dev`
 
 This will serve the website at [http://localhost:5173](http://localhost:5173)
+
+## Tests
+
+To run the unit tests:
+
+- `pnpm test:unit`
+
+To run the ui tests interactively:
+
+- `pnpm test:ui:dev`

frontend/package.json

@@ -8,17 +8,21 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest --coverage",
+		"test:unit": "vitest --coverage",
+		"test:ui": "pnpm exec playwright test",
+		"test:ui:dev": "pnpm exec playwright test --ui",
 		"openapi-ts": "openapi-ts"
 	},
 	"devDependencies": {
 		"@hey-api/openapi-ts": "0.55.2",
+		"@playwright/test": "^1.49.1",
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"@testing-library/svelte": "^5.2.4",
 		"@types/eslint": "^9.6.1",
+		"@types/node": "^22.10.2",
 		"@vitest/coverage-v8": "^2.1.4",
 		"autoprefixer": "^10.4.20",
 		"flowbite": "^2.5.2",

frontend/playwright.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests",
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: "html",
+	use: {
+		baseURL: "http://localhost:5678",
+		trace: "on-first-retry",
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+		{
+			name: "Mobile Chrome",
+			use: { ...devices["Pixel 5"] },
+		},
+		{
+			name: "Mobile Safari",
+			use: { ...devices["iPhone 12"] },
+		},
+	],
+	webServer: {
+		command: "pnpm exec vite dev --port 5678",
+		port: 5678,
+		reuseExistingServer: false,
+	},
+});