syndarix/frontend/tests/components/projects/AgentStatusIndicator.test.tsx

import { render, screen } from '@testing-library/react';
import { AgentStatusIndicator } from '@/components/projects/AgentStatusIndicator';

describe('AgentStatusIndicator', () => {
  it('renders idle status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="idle" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-yellow-500');
  });

  it('renders working status with animation', () => {
    const { container } = render(<AgentStatusIndicator status="working" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-green-500');
    expect(indicator).toHaveClass('animate-pulse');
  });

  it('renders waiting status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="waiting" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-blue-500');
  });

  it('renders paused status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="paused" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-gray-400');
  });

  it('renders terminated status with correct color', () => {
    const { container } = render(<AgentStatusIndicator status="terminated" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('bg-gray-600');
  });

  it('applies small size by default', () => {
    const { container } = render(<AgentStatusIndicator status="working" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-2', 'w-2');
  });

  it('applies medium size when specified', () => {
    const { container } = render(<AgentStatusIndicator status="working" size="md" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-3', 'w-3');
  });

  it('applies large size when specified', () => {
    const { container } = render(<AgentStatusIndicator status="working" size="lg" />);
    const indicator = container.querySelector('span > span');
    expect(indicator).toHaveClass('h-4', 'w-4');
  });

  it('shows label when showLabel is true', () => {
    render(<AgentStatusIndicator status="working" showLabel />);
    expect(screen.getByText('Working')).toBeInTheDocument();
  });

  it('does not show label by default', () => {
    render(<AgentStatusIndicator status="working" />);
    expect(screen.queryByText('Working')).not.toBeInTheDocument();
  });

  it('has accessible status role and label', () => {
    render(<AgentStatusIndicator status="working" />);
    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Status: Working');
  });

  it('applies custom className', () => {
    const { container } = render(
      <AgentStatusIndicator status="working" className="custom-class" />
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });
});