/** * Tests for the StatusBadge component * @jest-environment jsdom */ import React from 'react'; import { render, screen } from '@testing-library/react'; import { StatusBadge, getRoleBadgeColor, getTicketStatusColor, getStatusColor } from '@/components/ui/StatusBadge'; describe('StatusBadge', () => { describe('ticket type', () => { it('should render PENDING status', () => { render(); expect(screen.getByText('En attente')).toBeInTheDocument(); }); it('should render CLAIMED status', () => { render(); expect(screen.getByText('Réclamé')).toBeInTheDocument(); }); it('should render REJECTED status', () => { render(); expect(screen.getByText('Rejeté')).toBeInTheDocument(); }); it('should show icon when showIcon is true', () => { const { container } = render(); // Check that SVG icon is rendered expect(container.querySelector('svg')).toBeInTheDocument(); }); it('should not show icon by default', () => { const { container } = render(); // Check that no SVG icon is rendered expect(container.querySelector('svg')).not.toBeInTheDocument(); }); }); describe('role type', () => { it('should render ADMIN role', () => { render(); expect(screen.getByText('Admin')).toBeInTheDocument(); }); it('should render EMPLOYEE role', () => { render(); expect(screen.getByText('Employé')).toBeInTheDocument(); }); it('should render CLIENT role', () => { render(); expect(screen.getByText('Client')).toBeInTheDocument(); }); }); describe('status type', () => { it('should render active status', () => { render(); expect(screen.getByText('Actif')).toBeInTheDocument(); }); it('should render inactive status', () => { render(); expect(screen.getByText('Inactif')).toBeInTheDocument(); }); it('should render verified status', () => { render(); expect(screen.getByText('Vérifié')).toBeInTheDocument(); }); }); describe('custom className', () => { it('should apply custom className', () => { const { container } = render( ); expect(container.firstChild).toHaveClass('custom-class'); }); }); }); describe('getRoleBadgeColor', () => { it('should return correct colors for ADMIN', () => { const result = getRoleBadgeColor('ADMIN'); expect(result).toContain('red'); }); it('should return correct colors for EMPLOYEE', () => { const result = getRoleBadgeColor('EMPLOYEE'); expect(result).toContain('blue'); }); it('should return correct colors for CLIENT', () => { const result = getRoleBadgeColor('CLIENT'); expect(result).toContain('green'); }); it('should return default colors for unknown role', () => { const result = getRoleBadgeColor('UNKNOWN'); expect(result).toContain('gray'); }); }); describe('getTicketStatusColor', () => { it('should return correct colors for PENDING', () => { const result = getTicketStatusColor('PENDING'); expect(result).toContain('yellow'); }); it('should return correct colors for CLAIMED', () => { const result = getTicketStatusColor('CLAIMED'); expect(result).toContain('green'); }); it('should return correct colors for REJECTED', () => { const result = getTicketStatusColor('REJECTED'); expect(result).toContain('red'); }); it('should return default colors for unknown status', () => { const result = getTicketStatusColor('UNKNOWN'); expect(result).toContain('gray'); }); }); describe('getStatusColor', () => { it('should return correct colors for active', () => { const result = getStatusColor('active'); expect(result).toContain('green'); }); it('should return correct colors for inactive', () => { const result = getStatusColor('inactive'); expect(result).toContain('gray'); }); it('should return correct colors for verified', () => { const result = getStatusColor('verified'); expect(result).toContain('green'); }); it('should return default colors for unknown status', () => { const result = getStatusColor('unknown'); expect(result).toContain('gray'); }); });