feat: Playwright E2E smoke tests

forgejo_admin commented

2026-03-15 01:08:44 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F7 (phase-pal-e-docs-e2e-tests)

Repo

forgejo_admin/pal-e-app

User Story

As a developer
I want automated E2E tests covering all major frontend features
So that regressions are caught before deployment instead of after

Context

pal-e-app has zero tests — no unit tests, no integration tests, no E2E tests. The backend (pal-e-docs) has 513 tests. This gap means features ship with only build verification and code review. This session manually validated 5 features via Playwright MCP — those exact tests should be codified.

File Targets

Files to create:

playwright.config.ts — Playwright config (Chromium, base URL, dark theme)
e2e/home.spec.ts — T1: home page loads with nav elements
e2e/search.spec.ts — T2: search with results, mode toggle, URL persistence
e2e/dashboard.spec.ts — T3: dashboard loads with board rollup
e2e/board-filtering.spec.ts — T4: type pills, hide-done, column collapse
e2e/quick-jot.spec.ts — T5: FAB opens modal, create note flow
e2e/note-detail.spec.ts — T6: note page with blocks, TOC
e2e/board-dragdrop.spec.ts — T7: drag item between columns

Files to modify:

package.json — add @playwright/test devDependency, add test and test:e2e scripts
.woodpecker.yaml — add test step after build (before build-and-push)

Files NOT to touch:

src/ — no production code changes

Acceptance Criteria

npm run test:e2e runs all 7 test files
Tests run against the built app (npm run build && npm run preview)
All 7 tests pass locally
CI pipeline includes test step (after build, before push)
Tests use Playwright's locator API (not CSS selectors)

Test Expectations

T1: home page has Dashboard, Notes, Projects, Boards, Tags, Repos links + search input + FAB
T2: /search?q=deploy+recovery returns results with type badges
T3: /dashboard shows "DORA Dashboard" heading + board cards
T4: board page has filter pills, clicking one filters items
T5: FAB click opens modal, typing title enables Create button
T6: /notes/{known-slug} shows heading blocks + TOC sidebar
T7: board drag produces API call (verify network request)

Constraints

Use @playwright/test (not Cypress or other frameworks)
Tests must be deterministic — use known slugs/data, not random
CI test step needs a running pal-e-docs backend — use in-cluster URL or mock
Keep tests fast — Chromium only, no multi-browser matrix initially

Checklist

PR opened with Closes #21
No unrelated changes
All 7 tests pass locally
CI pipeline updated

phase-pal-e-docs-e2e-tests — plan phase
plan-pal-e-docs — parent plan

### Lineage `plan-pal-e-docs` → Phase F7 (`phase-pal-e-docs-e2e-tests`) ### Repo `forgejo_admin/pal-e-app` ### User Story As a developer I want automated E2E tests covering all major frontend features So that regressions are caught before deployment instead of after ### Context pal-e-app has zero tests — no unit tests, no integration tests, no E2E tests. The backend (pal-e-docs) has 513 tests. This gap means features ship with only build verification and code review. This session manually validated 5 features via Playwright MCP — those exact tests should be codified. ### File Targets Files to create: - `playwright.config.ts` — Playwright config (Chromium, base URL, dark theme) - `e2e/home.spec.ts` — T1: home page loads with nav elements - `e2e/search.spec.ts` — T2: search with results, mode toggle, URL persistence - `e2e/dashboard.spec.ts` — T3: dashboard loads with board rollup - `e2e/board-filtering.spec.ts` — T4: type pills, hide-done, column collapse - `e2e/quick-jot.spec.ts` — T5: FAB opens modal, create note flow - `e2e/note-detail.spec.ts` — T6: note page with blocks, TOC - `e2e/board-dragdrop.spec.ts` — T7: drag item between columns Files to modify: - `package.json` — add `@playwright/test` devDependency, add `test` and `test:e2e` scripts - `.woodpecker.yaml` — add `test` step after `build` (before `build-and-push`) Files NOT to touch: - `src/` — no production code changes ### Acceptance Criteria - [ ] `npm run test:e2e` runs all 7 test files - [ ] Tests run against the built app (`npm run build && npm run preview`) - [ ] All 7 tests pass locally - [ ] CI pipeline includes test step (after build, before push) - [ ] Tests use Playwright's locator API (not CSS selectors) ### Test Expectations - [ ] T1: home page has Dashboard, Notes, Projects, Boards, Tags, Repos links + search input + FAB - [ ] T2: /search?q=deploy+recovery returns results with type badges - [ ] T3: /dashboard shows "DORA Dashboard" heading + board cards - [ ] T4: board page has filter pills, clicking one filters items - [ ] T5: FAB click opens modal, typing title enables Create button - [ ] T6: /notes/{known-slug} shows heading blocks + TOC sidebar - [ ] T7: board drag produces API call (verify network request) ### Constraints - Use `@playwright/test` (not Cypress or other frameworks) - Tests must be deterministic — use known slugs/data, not random - CI test step needs a running pal-e-docs backend — use in-cluster URL or mock - Keep tests fast — Chromium only, no multi-browser matrix initially ### Checklist - [ ] PR opened with `Closes #21` - [ ] No unrelated changes - [ ] All 7 tests pass locally - [ ] CI pipeline updated ### Related - `phase-pal-e-docs-e2e-tests` — plan phase - `plan-pal-e-docs` — parent plan