🐛 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.
This commit is contained in:
@@ -5,7 +5,11 @@ import HealthDashboardView, { type HealthInfo } from './HealthDashboardView.vue'
|
|||||||
// Separation of concerns (SRP):
|
// Separation of concerns (SRP):
|
||||||
// - HealthDashboard (this) = data layer (useFetch lifecycle)
|
// - HealthDashboard (this) = data layer (useFetch lifecycle)
|
||||||
// - HealthDashboardView = presentation layer (testable in Storybook + e2e)
|
// - 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -1,6 +1,24 @@
|
|||||||
import { test, expect } from '@playwright/test'
|
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 }) => {
|
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 page.goto('/')
|
||||||
await expect(page.getByTestId('health-dashboard')).toBeVisible()
|
await expect(page.getByTestId('health-dashboard')).toBeVisible()
|
||||||
const heading = page.getByRole('heading', { name: /dance-lessons-coach/i })
|
const heading = page.getByRole('heading', { name: /dance-lessons-coach/i })
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Reference in New Issue
Block a user