🐛 fix(frontend): Playwright now detects health endpoint failures (was silently passing) #32
Reference in New Issue
Block a user
Delete Branch "fix/playwright-detects-api-failure"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
User reported 2026-05-03 16:50: the frontend page renders an error UI "Error loading health: [GET] '/api/healthz': 404 Page not found" when the Go backend is down or the dev proxy misroutes — but the existing Playwright test PASSES. Silent regression risk.
The existing assertion was:
The dashboard
<section>is visible even in the error branch (<p v-else-if="error">Error loading health: ...</p>). So visibility alone is too weak.Fix
Two complementary tests in
frontend/tests/e2e/health.spec.ts:Healthy path (existing test, strengthened):
health-infovisible (only renders in success branch)health-statustext equalshealthyError path (new regression test):
/api/healthzto return HTTP 502health-infoNOT visible (success branch must not render)This makes the e2e suite catch both "backend down silent fail" AND "error UI is missing/regressed".
Storybook note
HealthDashboard.stories.tsnow has a documentation stub explaining that loading/error variants need a future prop-based refactor of the component (currentuseFetchis internal). For now, the e2e screenshots infrontend/docs/e2e/cover both healthy and error states.Tests
go test ./...(no Go change)Migration context
Trainer-led fix during the 2026-05-03 autonomous day, after user observed the regression in the live frontend.
🤖 Co-Authored-By: Claude Opus 4.7
Reported by user 2026-05-03: the existing test `home page loads and shows server health info` only asserted visibility of the dashboard component, which is ALSO visible when it shows the error state ("Error loading health: [GET] /api/healthz: 404"). So when the Go backend is down or the dev proxy misroutes /api/*, the page shows a visible error UI but the e2e test PASSES — silent regression risk. This commit: 1. health.spec.ts now asserts: - health-info element visible (only present in healthy state) - health-status text equals "healthy" - "Error loading health" text NOT visible 2. Adds a regression test "home page surfaces health endpoint errors visibly" that mocks /api/healthz to 502 and asserts the error UI appears (this is reproducible regardless of backend state). 3. HealthDashboard.stories.ts: adds a documentation note about the useFetch-internal-state limitation for now (proper state-based stories require a future component prop refactor). 🤖 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>