Files
dance-lessons-coach/frontend/tests/e2e/health.spec.ts
Gabriel Radureau 262c4cfaed
Some checks failed
CI/CD Pipeline / Build Docker Cache (push) Successful in 9s
CI/CD Pipeline / CI Pipeline (push) Failing after 7m24s
CI/CD Pipeline / Trigger Docker Push (push) Has been skipped
🐛 fix(frontend): apply server:false + route.fulfill to health spec
Closes the debt left by PR #40 (api/info + footer): the existing
tests/e2e/health.spec.ts happy path still hit the dev-proxy issue
that PR #40 worked around for the new app-footer spec.

Same fix applied to HealthDashboard.vue and the spec:
- HealthDashboard.vue: useFetch( ..., { server: false }) — fetch
  client-side only so Playwright route mocks apply (was failing on
  SSR through the dev proxy).
- health.spec.ts: happy path now uses page.route to mock /api/healthz
  with a 200 success body, matching the pattern in app-footer.spec.ts.
  The error scenario already used route mocking; unchanged.

The integration with the real backend remains covered by the BDD
scenario in features/health/health.feature (server-side, no proxy
in the loop).

Full Playwright suite (4 tests) now passes locally.
2026-05-05 09:04:28 +02:00

56 lines
2.6 KiB
TypeScript

import { test, expect } from '@playwright/test'
// Both specs mock /api/healthz so they decouple from the dev-proxy plumbing.
// The integration with the real backend is covered by the BDD scenario in
// features/health/health.feature (server-side, no frontend proxy in the loop).
// Same approach as tests/e2e/app-footer.spec.ts (PR #40) - applied here to
// close the debt left by that PR's out-of-scope follow-up note.
test('home page loads and shows healthy server state', async ({ page }) => {
await page.route('**/api/healthz', (route) => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
status: 'healthy',
version: '1.4.0',
uptime_seconds: 8042,
timestamp: '2026-05-05T08:00:00Z',
}),
})
})
await page.goto('/')
await expect(page.getByTestId('health-dashboard')).toBeVisible()
const heading = page.getByRole('heading', { name: /dance-lessons-coach/i })
await expect(heading).toBeVisible()
// Assert the dashboard is in HEALTHY state, not an error state.
// The dashboard renders an "Error loading health: ..." paragraph when /api/healthz
// is unreachable (Go backend not running, proxy misconfigured, endpoint removed,
// etc.). Without these assertions the test would falsely PASS even when the
// dashboard shows the error UI - regression observed 2026-05-03 (Go backend
// not running locally → page renders the error, Playwright PASSES).
await expect(page.getByTestId('health-info')).toBeVisible()
await expect(page.getByTestId('health-status')).toHaveText('healthy')
await expect(page.getByText(/Error loading health/i)).not.toBeVisible()
await page.screenshot({ path: 'tests/e2e/screenshots/home-page-loads-and-shows-server-health-info.png', fullPage: true })
})
// Regression spec: documents the expected error UX so we don't ship a silent failure.
// Routes /api/healthz to a 502 mock so the test is reproducible regardless of backend.
test('home page surfaces health endpoint errors visibly', async ({ page }) => {
await page.route('**/api/healthz', (route) => {
route.fulfill({
status: 502,
contentType: 'application/json',
body: JSON.stringify({ error: 'simulated_backend_down' }),
})
})
await page.goto('/')
await expect(page.getByTestId('health-dashboard')).toBeVisible()
await expect(page.getByText(/Error loading health/i)).toBeVisible()
await expect(page.getByTestId('health-info')).not.toBeVisible()
await page.screenshot({ path: 'tests/e2e/screenshots/home-page-surfaces-health-endpoint-errors-visibly.png', fullPage: true })
})