feat(unit-4): Dashboard — availability widget with TanStack Query

- Add @tanstack/react-query 5.101.0; wrap app with QueryClientProvider - Add AvailabilityStatus type and AvailabilityResponse to api/types.ts - Implement useAvailabilityStatus (staleTime 30s, stale-on-error preserved) - Add AvailabilityStatusBadge with green/amber/red states and stale indicator - Replace DashboardPage placeholder card with live availability widget - Add MSW availability handler; update test/utils with QueryClientProvider - 55/55 tests pass (FR-05) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-06-22 13:39:29 +02:00
parent f476e06691
commit 3c6a06028e
23 changed files with 1219 additions and 22 deletions
@@ -0,0 +1,70 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { renderWithProviders } from '@/test/utils';
+import { AvailabilityStatusBadge } from './AvailabilityStatusBadge';
+
+describe('AvailabilityStatusBadge', () => {
+    it('renders Available status with green styling', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Available" />);
+
+        const label = screen.getByTestId('availability-status-label');
+        expect(label).toHaveTextContent('Available');
+
+        const badge = screen.getByTestId('availability-badge');
+        expect(badge.querySelector('.bg-green-100')).toBeTruthy();
+    });
+
+    it('renders Maintenance status with amber styling', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Maintenance" />);
+
+        const label = screen.getByTestId('availability-status-label');
+        expect(label).toHaveTextContent('Maintenance');
+
+        const badge = screen.getByTestId('availability-badge');
+        expect(badge.querySelector('.bg-amber-100')).toBeTruthy();
+    });
+
+    it('renders Unavailable status with red styling', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Unavailable" />);
+
+        const label = screen.getByTestId('availability-status-label');
+        expect(label).toHaveTextContent('Unavailable');
+
+        const badge = screen.getByTestId('availability-badge');
+        expect(badge.querySelector('.bg-red-100')).toBeTruthy();
+    });
+
+    it('shows message subtitle when message is non-empty', () => {
+        renderWithProviders(
+            <AvailabilityStatusBadge status="Maintenance" message="Scheduled downtime until 18:00" />,
+        );
+
+        expect(screen.getByTestId('availability-message')).toHaveTextContent(
+            'Scheduled downtime until 18:00',
+        );
+    });
+
+    it('hides message element when message is empty string', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Available" message="" />);
+
+        expect(screen.queryByTestId('availability-message')).toBeNull();
+    });
+
+    it('hides message element when message prop is omitted', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Available" />);
+
+        expect(screen.queryByTestId('availability-message')).toBeNull();
+    });
+
+    it('shows stale indicator when stale={true}', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Available" stale={true} />);
+
+        expect(screen.getByTestId('availability-stale-indicator')).toBeInTheDocument();
+    });
+
+    it('hides stale indicator when stale is omitted (default false)', () => {
+        renderWithProviders(<AvailabilityStatusBadge status="Available" />);
+
+        expect(screen.queryByTestId('availability-stale-indicator')).toBeNull();
+    });
+});