🐛 fix(frontend): apply server:false + route.fulfill to health spec (#43)

Co-authored-by: Gabriel Radureau <arcodange@gmail.com>
Co-committed-by: Gabriel Radureau <arcodange@gmail.com>

frontend/components/HealthDashboard.vue

@@ -5,7 +5,11 @@ import HealthDashboardView, { type HealthInfo } from './HealthDashboardView.vue'
 // Separation of concerns (SRP):
 //   - HealthDashboard (this) = data layer (useFetch lifecycle)
 //   - HealthDashboardView    = presentation layer (testable in Storybook + e2e)
-const { data, pending, error } = await useFetch<HealthInfo>('/api/healthz')
+//
+// server: false → fetch client-side only. Avoids SSR fetching through the dev
+// proxy (which can fail in some local setups), and lets Playwright route mocks
+// apply. Same fix that landed for AppFooter in PR #40.
+const { data, pending, error } = useFetch<HealthInfo>('/api/healthz', { server: false })
 </script>
 
 <template>

frontend/tests/e2e/health.spec.ts

@@ -1,6 +1,24 @@
 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 })