/** * SyncStatusIndicator Component Tests */ import { render, screen } from '@testing-library/react'; import { SyncStatusIndicator } from '@/features/issues/components/SyncStatusIndicator'; import type { SyncStatus } from '@/features/issues/types'; describe('SyncStatusIndicator', () => { const statuses: SyncStatus[] = ['synced', 'pending', 'conflict', 'error']; it.each(statuses)('renders %s status correctly', (status) => { render(); // Should have accessible label containing "Sync status" const element = screen.getByRole('status'); expect(element).toHaveAttribute('aria-label', expect.stringContaining('Sync status')); }); it('shows label when showLabel is true', () => { render(); expect(screen.getByText('Synced')).toBeInTheDocument(); }); it('hides label by default', () => { render(); expect(screen.queryByText('Synced')).not.toBeInTheDocument(); }); it('applies custom className', () => { render(); const element = screen.getByRole('status'); expect(element).toHaveClass('custom-class'); }); it('shows spinning icon for pending status', () => { const { container } = render(); const icon = container.querySelector('svg'); expect(icon).toHaveClass('animate-spin'); }); it('falls back to synced config for unknown status', () => { // @ts-expect-error - Testing unknown status value render(); // Should fall back to synced config expect(screen.getByText('Synced')).toBeInTheDocument(); }); it('shows label for conflict status', () => { render(); expect(screen.getByText('Conflict')).toBeInTheDocument(); }); it('shows label for error status', () => { render(); // The error label is 'Sync Error' in SYNC_STATUS_CONFIG expect(screen.getByText('Sync Error')).toBeInTheDocument(); }); });