SluijsensandClaude Haiku 4.5
3c6a06028e
- 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>
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
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();
|
|
});
|
|
});
|