/** * StatusBadge Component Tests */ import { render, screen } from '@testing-library/react'; import { StatusBadge } from '@/features/issues/components/StatusBadge'; import type { IssueStatus } from '@/features/issues/types'; const statusLabels: Record = { open: 'Open', in_progress: 'In Progress', in_review: 'In Review', blocked: 'Blocked', done: 'Done', closed: 'Closed', }; describe('StatusBadge', () => { const statuses: IssueStatus[] = ['open', 'in_progress', 'in_review', 'blocked', 'done', 'closed']; it.each(statuses)('renders %s status correctly', (status) => { render(); // Check that the status text is present - use getAllByText since we have both visible and sr-only const elements = screen.getAllByText(statusLabels[status]); expect(elements.length).toBeGreaterThanOrEqual(1); }); it('hides label when showLabel is false', () => { render(); // The sr-only text should still be present expect(screen.getByText('Open')).toHaveClass('sr-only'); }); it('applies custom className', () => { const { container } = render(); const wrapper = container.firstChild; expect(wrapper).toHaveClass('custom-class'); }); it('renders with accessible label', () => { render(); // Should have sr-only text for screen readers expect(screen.getByText('Open')).toBeInTheDocument(); }); });