User feedback (PR #32 commit, T13 follow-up): HealthDashboard.stories.ts could not
demonstrate Loading or Error states because the component used useFetch internally
and didn't accept props. Same limitation made unit-testing the rendering branches
impossible without mocking the Nuxt fetch layer.
Split into 2 files (SRP / DDD modular per code-reviewer skill):
- HealthDashboardView.vue (NEW): pure presentational, accepts data/pending/error
as props. Adds explicit data-testid="health-loading" + "health-error" so e2e and
unit tests can target each branch.
- HealthDashboard.vue (REFACTORED): now a thin smart wrapper that calls
useFetch('/api/healthz') and forwards data/pending/error to HealthDashboardView.
Stories:
- HealthDashboardView.stories.ts (NEW): 4 stories — Healthy, Loading, ErrorState,
HealthyHighUptime. Reviewers can now see all branches without running the backend.
- HealthDashboard.stories.ts: still has the Default story for the wrapper (smoke).
Tooling:
- shims-vue.d.ts: Vue file module declaration with permissive any-typing for the
DefineComponent. Required because Vue 3 strict TS + Storybook propagates prop
types poorly through .vue imports otherwise (false-positive TS2353 errors).
Backwards compatibility:
- pages/index.vue still imports <HealthDashboard /> (unchanged).
- All existing data-testid attributes preserved (health-dashboard, health-info,
health-status). The new health-loading and health-error testids are additive.
- The Playwright tests from PR #32 continue to pass without modification.
🤖 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
