🐛 fix(frontend): Playwright now detects health endpoint failures (was silently passing) #32

Merged
arcodange merged 1 commits from fix/playwright-detects-api-failure into main 2026-05-03 16:46:58 +02:00
Owner

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:

await expect(page.getByTestId('health-dashboard')).toBeVisible()

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:

  1. Healthy path (existing test, strengthened):

    • Asserts health-info visible (only renders in success branch)
    • Asserts health-status text equals healthy
    • Asserts "Error loading health" text NOT visible
  2. Error path (new regression test):

    • Mocks /api/healthz to return HTTP 502
    • Asserts "Error loading health" text IS visible
    • Asserts health-info NOT 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.ts now has a documentation stub explaining that loading/error variants need a future prop-based refactor of the component (current useFetch is internal). For now, the e2e screenshots in frontend/docs/e2e/ cover both healthy and error states.

Tests

  • Local: go test ./... (no Go change)
  • Local Playwright run with backend up → PASS expected
  • Local Playwright run with backend down → first test FAIL expected (catching the regression), second test PASS

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

## 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: ```ts await expect(page.getByTestId('health-dashboard')).toBeVisible() ``` 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`: 1. **Healthy path** (existing test, strengthened): - Asserts `health-info` visible (only renders in success branch) - Asserts `health-status` text equals `healthy` - Asserts "Error loading health" text NOT visible 2. **Error path** (new regression test): - Mocks `/api/healthz` to return HTTP 502 - Asserts "Error loading health" text IS visible - Asserts `health-info` NOT 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.ts` now has a documentation stub explaining that loading/error variants need a future prop-based refactor of the component (current `useFetch` is internal). For now, the e2e screenshots in `frontend/docs/e2e/` cover both healthy and error states. ## Tests - [x] Local: `go test ./...` (no Go change) - [ ] Local Playwright run with backend up → PASS expected - [ ] Local Playwright run with backend down → first test FAIL expected (catching the regression), second test PASS ## 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
arcodange added 1 commit 2026-05-03 16:46:47 +02:00
🐛 fix(frontend): make Playwright detect health endpoint failures
Some checks failed
CI/CD Pipeline / Build Docker Cache (push) Successful in 15s
CI/CD Pipeline / CI Pipeline (push) Failing after 6m32s
CI/CD Pipeline / Trigger Docker Push (push) Has been skipped
923b98168c
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>
arcodange merged commit db13b3ee0c into main 2026-05-03 16:46:58 +02:00
arcodange deleted branch fix/playwright-detects-api-failure 2026-05-03 16:46:58 +02:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: arcodange/dance-lessons-coach#32