Skip to content

test: add unit/component tests, E2E, and a11y + Lighthouse CI - #157

Draft
majicmaj wants to merge 1 commit into
donetick:developfrom
majicmaj:testing-infrastructure
Draft

test: add unit/component tests, E2E, and a11y + Lighthouse CI#157
majicmaj wants to merge 1 commit into
donetick:developfrom
majicmaj:testing-infrastructure

Conversation

@majicmaj

Copy link
Copy Markdown

What

Frontend testing from zero — the FE half of a testing initiative (Phases 1–3).

Unit / component (Vitest + RTL + MSW)

  • src/test/ — Vitest setup, MSW server, renderWithProviders helper.
  • DurationUtils / FilterEngine pure-logic tests (the filtering that decides which tasks a user sees).
  • DurationInput component test — RTL + user-event + axe (a11y).

E2E (Playwright)

  • Critical flows: signup and create → complete task, on desktop + mobile, auto-starting the Go backend + Vite dev server (playwright.config.js).

Accessibility (axe-core)

  • e2e/a11y.spec.js scans the critical pages, gating on critical/serious with a known-issue baseline so it catches NEW regressions today and tightens as the shadcn migration lands.
  • Added accessible labels to DurationInput (a real gap the axe test caught).

Lighthouse (advisory)

  • lighthouserc.json + workflow — PWA/a11y/perf signal, all warn, never blocks.

CI

  • Unit tests + build on every push; E2E + Lighthouse on PRs to develop; re-enabled lint as advisory.

Selectors survive the shadcn migration

Everything queries by accessible role/label/text, not MUI Joy DOM.

🤖 Generated with Claude Code

Establishes frontend testing from zero:

- Vitest + React Testing Library + MSW setup (src/test/), plus:
  - DurationUtils / FilterEngine pure-logic unit tests
  - DurationInput component test (RTL + user-event + axe)
- Playwright E2E for the critical flows (signup, create -> complete)
  on desktop + mobile, auto-starting both servers (playwright.config.js)
- axe-core a11y scans of the critical pages with a known-issue baseline
  that catches NEW regressions (e2e/a11y.spec.js)
- Lighthouse CI (advisory, never blocks) for PWA/a11y/perf
- CI: run unit tests on every push; E2E + Lighthouse on PRs to develop;
  re-enabled lint as advisory

Also adds accessible labels to DurationInput (caught by the axe test).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

@KhyFee KhyFee left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strong testing bootstrap — Vitest/RTL/MSW + Playwright E2E + axe + advisory Lighthouse is a solid FE quality stack.

What’s working well

  • Blocking unit tests in build.yml while keeping lint/Lighthouse advisory (continue-on-error) is a pragmatic ratchet.
  • E2E limited to PRs targeting develop, backend pin, Playwright report upload, and chromium-only a11y scans (with an allowlist that you plan to shrink) are all good calls.
  • Component-level vitest-axe on DurationInput catches issues earlier than full-page scans.

Review notes

  1. Artifacts on failure: upload test-results/ (traces/screenshots) in e2e.yml with if: failure() in addition to the HTML report — much faster flake triage.
  2. npm i vs npm ci: build/test jobs use npm i while e2e uses npm ci. Prefer npm ci everywhere in CI for lockfile-faithful installs.
  3. Axe allowlist: keep the excluded rule IDs listed in TESTING.md with owners/tickets so the list doesn’t become permanent debt.
  4. Backend pin: ref: develop on donetick/donetick can break FE PRs when backend moves. Consider pinning a SHA (or documenting that e2e failures may be cross-repo).

None of these are merge blockers — happy to see this land and ratchet lint to blocking once clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants