🐛 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

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>
This commit is contained in:
2026-05-03 16:46:27 +02:00
parent 17130082c6
commit 923b98168c
2 changed files with 47 additions and 2 deletions

View File

@@ -6,11 +6,28 @@ const meta: Meta<typeof HealthDashboard> = {
component: HealthDashboard,
tags: ['autodocs'],
}
export default meta
type Story = StoryObj<typeof meta>
// Default story - calls real /api/healthz (works in browser if dev proxy + backend are up)
export const Default: Story = {
args: {},
}
// Documents the loading/error visuals so reviewers see them in Storybook
// without needing a backend down. The component currently doesn't accept overrides
// because it uses useFetch internally - this story is a placeholder for a future
// refactor that exposes data/pending/error as props for testability.
export const DocumentationStub: Story = {
args: {},
parameters: {
docs: {
description: {
story:
'Renders the same as Default. The HealthDashboard fetches /api/healthz internally, so loading/error states only appear when the backend is down or slow. ' +
'Future improvement: accept healthData/pending/error as props for easy state-based stories. Until then, see frontend/docs/e2e/ for screenshots of both healthy and error states.',
},
},
},
}