the-tip-top-frontend/__tests__/components/ui/StatusBadge.test.tsx

/**
 * 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(<StatusBadge type="ticket" value="PENDING" />);

      expect(screen.getByText('En attente')).toBeInTheDocument();
    });

    it('should render CLAIMED status', () => {
      render(<StatusBadge type="ticket" value="CLAIMED" />);

      expect(screen.getByText('Réclamé')).toBeInTheDocument();
    });

    it('should render REJECTED status', () => {
      render(<StatusBadge type="ticket" value="REJECTED" />);

      expect(screen.getByText('Rejeté')).toBeInTheDocument();
    });

    it('should show icon when showIcon is true', () => {
      const { container } = render(<StatusBadge type="ticket" value="CLAIMED" showIcon />);

      // Check that SVG icon is rendered
      expect(container.querySelector('svg')).toBeInTheDocument();
    });

    it('should not show icon by default', () => {
      const { container } = render(<StatusBadge type="ticket" value="CLAIMED" />);

      // Check that no SVG icon is rendered
      expect(container.querySelector('svg')).not.toBeInTheDocument();
    });
  });

  describe('role type', () => {
    it('should render ADMIN role', () => {
      render(<StatusBadge type="role" value="ADMIN" />);

      expect(screen.getByText('Admin')).toBeInTheDocument();
    });

    it('should render EMPLOYEE role', () => {
      render(<StatusBadge type="role" value="EMPLOYEE" />);

      expect(screen.getByText('Employé')).toBeInTheDocument();
    });

    it('should render CLIENT role', () => {
      render(<StatusBadge type="role" value="CLIENT" />);

      expect(screen.getByText('Client')).toBeInTheDocument();
    });
  });

  describe('status type', () => {
    it('should render active status', () => {
      render(<StatusBadge type="status" value="active" />);

      expect(screen.getByText('Actif')).toBeInTheDocument();
    });

    it('should render inactive status', () => {
      render(<StatusBadge type="status" value="inactive" />);

      expect(screen.getByText('Inactif')).toBeInTheDocument();
    });

    it('should render verified status', () => {
      render(<StatusBadge type="status" value="verified" />);

      expect(screen.getByText('Vérifié')).toBeInTheDocument();
    });
  });

  describe('custom className', () => {
    it('should apply custom className', () => {
      const { container } = render(
        <StatusBadge type="ticket" value="PENDING" className="custom-class" />
      );

      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');
  });
});