From 4cbc0c80f9d7ab8f6eb5e0e8ce8f82962ed0985b Mon Sep 17 00:00:00 2001 From: Liam Keegan Date: Wed, 18 Dec 2024 13:35:35 +0100 Subject: [PATCH] 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 | 32 ++++- .github/workflows/codegen.yml | 2 +- .gitignore | 7 + frontend/README.md | 12 ++ frontend/package.json | 6 +- frontend/playwright.config.ts | 43 ++++++ frontend/pnpm-lock.yaml | 125 +++++++++++++----- .../DataInput/ResearchCodeInput.svelte | 6 +- frontend/src/routes/+layout.svelte | 4 + frontend/tests/frontpage.spec.ts | 6 + frontend/tests/signup.spec.ts | 22 +++ 11 files changed, 221 insertions(+), 44 deletions(-) create mode 100644 frontend/playwright.config.ts create mode 100644 frontend/tests/frontpage.spec.ts create mode 100644 frontend/tests/signup.spec.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e2eeea65..78f97f40 100644 --- a/.github/workflows/ci.yml +++ b/.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,7 +26,7 @@ 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 @@ -33,11 +34,38 @@ jobs: 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 diff --git a/.github/workflows/codegen.yml b/.github/workflows/codegen.yml index b2a5ca05..ae4f6242 100644 --- a/.github/workflows/codegen.yml +++ b/.github/workflows/codegen.yml @@ -5,7 +5,7 @@ on: - main jobs: - codegen-and-format: + codegen: runs-on: ubuntu-latest defaults: run: diff --git a/.gitignore b/.gitignore index 2c3350e2..3eb70439 100644 --- a/.gitignore +++ b/.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/ diff --git a/frontend/README.md b/frontend/README.md index be73ee3c..e3b87c70 100644 --- a/frontend/README.md +++ b/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` diff --git a/frontend/package.json b/frontend/package.json index ecaa58cc..c60cad95 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts new file mode 100644 index 00000000..155d65d1 --- /dev/null +++ b/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, + }, +}); diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 3e1ee092..30ed916f 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -30,27 +30,33 @@ importers: '@hey-api/openapi-ts': specifier: 0.55.2 version: 0.55.2(magicast@0.3.5)(typescript@5.6.3) + '@playwright/test': + specifier: ^1.49.1 + version: 1.49.1 '@sveltejs/adapter-static': specifier: ^3.0.6 - version: 3.0.6(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11)) + version: 3.0.6(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))) '@sveltejs/kit': specifier: ^2.8.0 - version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11) + version: 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) '@sveltejs/vite-plugin-svelte': specifier: ^4.0.0 - version: 4.0.0(svelte@5.1.16)(vite@5.4.11) + version: 4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) '@tailwindcss/typography': specifier: ^0.5.15 version: 0.5.15(tailwindcss@3.4.14) '@testing-library/svelte': specifier: ^5.2.4 - version: 5.2.4(svelte@5.1.16)(vite@5.4.11)(vitest@2.1.4(jsdom@25.0.1)) + version: 5.2.4(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))(vitest@2.1.4(@types/node@22.10.2)(jsdom@25.0.1)) '@types/eslint': specifier: ^9.6.1 version: 9.6.1 + '@types/node': + specifier: ^22.10.2 + version: 22.10.2 '@vitest/coverage-v8': specifier: ^2.1.4 - version: 2.1.4(vitest@2.1.4(jsdom@25.0.1)) + version: 2.1.4(vitest@2.1.4(@types/node@22.10.2)(jsdom@25.0.1)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) @@ -86,10 +92,10 @@ importers: version: 8.14.0(eslint@9.13.0(jiti@2.4.0))(typescript@5.6.3) vite: specifier: ^5.4.11 - version: 5.4.11 + version: 5.4.11(@types/node@22.10.2) vitest: specifier: ^2.1.4 - version: 2.1.4(jsdom@25.0.1) + version: 2.1.4(@types/node@22.10.2)(jsdom@25.0.1) packages: @@ -614,6 +620,11 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@playwright/test@1.49.1': + resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==} + engines: {node: '>=18'} + hasBin: true + '@polka/url@1.0.0-next.28': resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} @@ -914,6 +925,9 @@ packages: '@types/mapbox__vector-tile@1.3.4': resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==} + '@types/node@22.10.2': + resolution: {integrity: sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==} + '@types/parse-json@4.0.2': resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} @@ -1715,6 +1729,11 @@ packages: resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==} engines: {node: '>= 8'} + fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -2261,6 +2280,16 @@ packages: pkg-types@1.2.1: resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==} + playwright-core@1.49.1: + resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==} + engines: {node: '>=18'} + hasBin: true + + playwright@1.49.1: + resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==} + engines: {node: '>=18'} + hasBin: true + postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -2674,6 +2703,9 @@ packages: engines: {node: '>=0.8.0'} hasBin: true + undici-types@6.20.0: + resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==} + update-browserslist-db@1.1.1: resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} hasBin: true @@ -3276,6 +3308,10 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@playwright/test@1.49.1': + dependencies: + playwright: 1.49.1 + '@polka/url@1.0.0-next.28': {} '@popperjs/core@2.11.8': {} @@ -3352,13 +3388,13 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.26.0': optional: true - '@sveltejs/adapter-static@3.0.6(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11))': + '@sveltejs/adapter-static@3.0.6(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))': dependencies: - '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11) + '@sveltejs/kit': 2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) - '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11)': + '@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))': dependencies: - '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.16)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) '@types/cookie': 0.6.0 cookie: 0.6.0 devalue: 5.1.1 @@ -3372,27 +3408,27 @@ snapshots: sirv: 3.0.0 svelte: 5.1.16 tiny-glob: 0.2.9 - vite: 5.4.11 + vite: 5.4.11(@types/node@22.10.2) - '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11)': + '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))': dependencies: - '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.16)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) debug: 4.3.7 svelte: 5.1.16 - vite: 5.4.11 + vite: 5.4.11(@types/node@22.10.2) transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11)': + '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11))(svelte@5.1.16)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2)) debug: 4.3.7 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.12 svelte: 5.1.16 - vite: 5.4.11 - vitefu: 1.0.3(vite@5.4.11) + vite: 5.4.11(@types/node@22.10.2) + vitefu: 1.0.3(vite@5.4.11(@types/node@22.10.2)) transitivePeerDependencies: - supports-color @@ -3415,13 +3451,13 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/svelte@5.2.4(svelte@5.1.16)(vite@5.4.11)(vitest@2.1.4(jsdom@25.0.1))': + '@testing-library/svelte@5.2.4(svelte@5.1.16)(vite@5.4.11(@types/node@22.10.2))(vitest@2.1.4(@types/node@22.10.2)(jsdom@25.0.1))': dependencies: '@testing-library/dom': 10.4.0 svelte: 5.1.16 optionalDependencies: - vite: 5.4.11 - vitest: 2.1.4(jsdom@25.0.1) + vite: 5.4.11(@types/node@22.10.2) + vitest: 2.1.4(@types/node@22.10.2)(jsdom@25.0.1) '@types/aria-query@5.0.4': {} @@ -3581,6 +3617,10 @@ snapshots: '@types/mapbox__point-geometry': 0.1.4 '@types/pbf': 3.0.5 + '@types/node@22.10.2': + dependencies: + undici-types: 6.20.0 + '@types/parse-json@4.0.2': {} '@types/pbf@3.0.5': {} @@ -3749,7 +3789,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitest/coverage-v8@2.1.4(vitest@2.1.4(jsdom@25.0.1))': + '@vitest/coverage-v8@2.1.4(vitest@2.1.4(@types/node@22.10.2)(jsdom@25.0.1))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 @@ -3763,7 +3803,7 @@ snapshots: std-env: 3.8.0 test-exclude: 7.0.1 tinyrainbow: 1.2.0 - vitest: 2.1.4(jsdom@25.0.1) + vitest: 2.1.4(@types/node@22.10.2)(jsdom@25.0.1) transitivePeerDependencies: - supports-color @@ -3774,13 +3814,13 @@ snapshots: chai: 5.1.2 tinyrainbow: 1.2.0 - '@vitest/mocker@2.1.4(vite@5.4.11)': + '@vitest/mocker@2.1.4(vite@5.4.11(@types/node@22.10.2))': dependencies: '@vitest/spy': 2.1.4 estree-walker: 3.0.3 magic-string: 0.30.12 optionalDependencies: - vite: 5.4.11 + vite: 5.4.11(@types/node@22.10.2) '@vitest/pretty-format@2.1.4': dependencies: @@ -4569,6 +4609,9 @@ snapshots: dependencies: minipass: 3.3.6 + fsevents@2.3.2: + optional: true + fsevents@2.3.3: optional: true @@ -5091,6 +5134,14 @@ snapshots: mlly: 1.7.3 pathe: 1.1.2 + playwright-core@1.49.1: {} + + playwright@1.49.1: + dependencies: + playwright-core: 1.49.1 + optionalDependencies: + fsevents: 2.3.2 + postcss-import@15.1.0(postcss@8.4.49): dependencies: postcss: 8.4.49 @@ -5522,6 +5573,8 @@ snapshots: uglify-js@3.19.3: optional: true + undici-types@6.20.0: {} + update-browserslist-db@1.1.1(browserslist@4.24.2): dependencies: browserslist: 4.24.2 @@ -5534,12 +5587,12 @@ snapshots: util-deprecate@1.0.2: {} - vite-node@2.1.4: + vite-node@2.1.4(@types/node@22.10.2): dependencies: cac: 6.7.14 debug: 4.3.7 pathe: 1.1.2 - vite: 5.4.11 + vite: 5.4.11(@types/node@22.10.2) transitivePeerDependencies: - '@types/node' - less @@ -5551,22 +5604,23 @@ snapshots: - supports-color - terser - vite@5.4.11: + vite@5.4.11(@types/node@22.10.2): dependencies: esbuild: 0.21.5 postcss: 8.4.49 rollup: 4.26.0 optionalDependencies: + '@types/node': 22.10.2 fsevents: 2.3.3 - vitefu@1.0.3(vite@5.4.11): + vitefu@1.0.3(vite@5.4.11(@types/node@22.10.2)): optionalDependencies: - vite: 5.4.11 + vite: 5.4.11(@types/node@22.10.2) - vitest@2.1.4(jsdom@25.0.1): + vitest@2.1.4(@types/node@22.10.2)(jsdom@25.0.1): dependencies: '@vitest/expect': 2.1.4 - '@vitest/mocker': 2.1.4(vite@5.4.11) + '@vitest/mocker': 2.1.4(vite@5.4.11(@types/node@22.10.2)) '@vitest/pretty-format': 2.1.4 '@vitest/runner': 2.1.4 '@vitest/snapshot': 2.1.4 @@ -5582,10 +5636,11 @@ snapshots: tinyexec: 0.3.1 tinypool: 1.0.1 tinyrainbow: 1.2.0 - vite: 5.4.11 - vite-node: 2.1.4 + vite: 5.4.11(@types/node@22.10.2) + vite-node: 2.1.4(@types/node@22.10.2) why-is-node-running: 2.3.0 optionalDependencies: + '@types/node': 22.10.2 jsdom: 25.0.1 transitivePeerDependencies: - less diff --git a/frontend/src/lib/components/DataInput/ResearchCodeInput.svelte b/frontend/src/lib/components/DataInput/ResearchCodeInput.svelte index a303cab4..ee13ca7b 100644 --- a/frontend/src/lib/components/DataInput/ResearchCodeInput.svelte +++ b/frontend/src/lib/components/DataInput/ResearchCodeInput.svelte @@ -3,10 +3,6 @@
- +
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 531e5425..8c7f49d5 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -32,6 +32,10 @@ onMount(async () => { }); + + MONDEY :: Milestones of Normal Development in Early Years + + MONDEY Logo diff --git a/frontend/tests/frontpage.spec.ts b/frontend/tests/frontpage.spec.ts new file mode 100644 index 00000000..772c6e02 --- /dev/null +++ b/frontend/tests/frontpage.spec.ts @@ -0,0 +1,6 @@ +import { expect, test } from "@playwright/test"; + +test("frontpage", async ({ page }) => { + await page.goto("/"); + await expect(page).toHaveTitle(/mondey/i); +}); diff --git a/frontend/tests/signup.spec.ts b/frontend/tests/signup.spec.ts new file mode 100644 index 00000000..49677325 --- /dev/null +++ b/frontend/tests/signup.spec.ts @@ -0,0 +1,22 @@ +import { expect, test } from "@playwright/test"; + +[ + { code: "", red: false }, + { code: "123451", red: false }, + { code: "666666", red: true }, + { code: "xyz", red: true }, +].forEach(({ code, red }) => { + test(`/signup/${code} : research code input is ${red ? "" : "not"} red`, async ({ + page, + }) => { + await page.goto(`/signup/${code}`); + const input = page.getByTestId("researchCodeInput"); + await expect(input).toHaveValue(code); + if (red) { + await expect(input).toHaveClass(/text-red/); + } else { + await expect(input).not.toHaveClass(/text-red/); + } + await expect(page.locator("[type=submit]")).toBeDisabled(); + }); +});