Gabriel Radureau
20d7d8153d
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>
80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
import HealthDashboardView from './HealthDashboardView.vue'
|
|
|
|
interface ViewArgs {
|
|
data: {
|
|
status: string
|
|
version: string
|
|
uptime_seconds: number
|
|
timestamp: string
|
|
} | null
|
|
pending: boolean
|
|
error: { message: string } | null
|
|
}
|
|
|
|
const meta = {
|
|
title: 'Components/HealthDashboardView',
|
|
component: HealthDashboardView,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
pending: { control: 'boolean' },
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Pure presentational component for the health dashboard. ' +
|
|
'Accepts `data`, `pending`, `error` as props so all 3 states can be ' +
|
|
'previewed in Storybook and asserted in unit tests. The data fetching ' +
|
|
'wrapper is `HealthDashboard.vue`.',
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<ViewArgs>
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Healthy: Story = {
|
|
args: {
|
|
data: {
|
|
status: 'healthy',
|
|
version: '1.4.0',
|
|
uptime_seconds: 3600,
|
|
timestamp: '2026-05-03T17:30:00.000Z',
|
|
},
|
|
pending: false,
|
|
error: null,
|
|
},
|
|
}
|
|
|
|
export const Loading: Story = {
|
|
args: {
|
|
data: null,
|
|
pending: true,
|
|
error: null,
|
|
},
|
|
}
|
|
|
|
export const ErrorState: Story = {
|
|
args: {
|
|
data: null,
|
|
pending: false,
|
|
error: { message: '[GET] "/api/healthz": 502 Bad Gateway (simulated)' },
|
|
},
|
|
}
|
|
|
|
export const HealthyHighUptime: Story = {
|
|
args: {
|
|
data: {
|
|
status: 'healthy',
|
|
version: '1.5.0-rc1',
|
|
uptime_seconds: 86400 * 7,
|
|
timestamp: new Date().toISOString(),
|
|
},
|
|
pending: false,
|
|
error: null,
|
|
},
|
|
}
|