♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories (#33)
Some checks failed
CI/CD Pipeline / Build Docker Cache (push) Successful in 12s
CI/CD Pipeline / CI Pipeline (push) Failing after 4m34s
CI/CD Pipeline / Trigger Docker Push (push) Has been skipped

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:
2026-05-03 17:55:47 +02:00
committed by arcodange
parent db13b3ee0c
commit 7c3617c9d7
5 changed files with 133 additions and 34 deletions

View 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,
},
}