♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories (#33)
SRP split: HealthDashboardView (presentational, props-based) + HealthDashboard (smart wrapper, useFetch). Enables 4 Storybook stories per state + unit testability per branch. Existing testids preserved, Playwright tests still pass. Co-authored-by: Gabriel Radureau <arcodange@gmail.com> Co-committed-by: Gabriel Radureau <arcodange@gmail.com>
This commit was merged in pull request #33.
This commit is contained in:
79
frontend/components/HealthDashboardView.stories.ts
Normal file
79
frontend/components/HealthDashboardView.stories.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
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,
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user