Phase 7a: E2E + Integration Test Suite

phase-mcd-tracker-7a-testing Phase

phase
Goal: Full test coverage across unit, integration, and E2E layers. Playwright for real browser flows, MSW for API mocking, Vitest for components.
Owner: Dev agent + Lucas (E2E test verification on phone)
Repo: mcd-tracker-app
Depends on: Phase 7 (app scaffold merged and deployed)

Scope

Integration tests (Vitest + MSW):
  • Mock Service Worker intercepts API calls, returns controlled responses
  • Home page: fetches GET /dashboard, renders location cards with correct slot counts
  • Location detail: fetches slots + codes, renders progress bar, code cards, expiry countdown
  • History: fetches codes + receipts + stats, renders date-grouped timeline with correct colors
  • Scan flow: wizard step progression, location picker population from GET /locations/nearby
  • Redeem: PATCH /codes/{id}/redeem sends redeemed_item, success page shows correct data
  • Auth guard: unauthenticated user redirected from protected routes, landing page accessible
  • Empty states: zero locations, zero codes, zero history — verify empty UX renders
E2E tests (Playwright):
  • Full user flow: landing → sign in (Keycloak test user) → home → tap location → scan → save → use now → redeem → history → event detail
  • Mobile viewport (390px) — no horizontal scroll on any page
  • Visual regression: screenshot each page, compare against playground baseline
  • Lighthouse audit: mobile score > 90 on landing page
  • Auth flow: sign in, sign out, register (with Keycloak test accounts)
  • Error states: API timeout, 401 expired token, 404 location not found
Test accounts (Keycloak mcd-tracker realm):
  • testuser@mcd-tracker.test — normal user with sample data
  • testuser2@mcd-tracker.test — second user (isolation testing)
  • testadmin@mcd-tracker.test — admin role
  • emptyuser@mcd-tracker.test — zero data (empty state UX)
CI integration:
  • Vitest + MSW tests run in Woodpecker CI on every push (fast, no browser needed)
  • Playwright tests run as a separate CI step or manual trigger (needs browser, slower)
  • Chrome DevTools MCP for interactive debugging during development

Deliverables

  • pending
  • plan-mcd-tracker — parent plan
  • phase-mcd-tracker-7-sveltekit — parent phase (scaffold must be deployed first)
  • project-capacitor-mobile — Capacitor testing considerations