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

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

describe('ProjectStatusBadge', () => {
  it('renders active status correctly', () => {
    render(<ProjectStatusBadge status="active" />);
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('renders completed status correctly', () => {
    render(<ProjectStatusBadge status="completed" />);
    expect(screen.getByText('Completed')).toBeInTheDocument();
  });

  it('renders paused status correctly', () => {
    render(<ProjectStatusBadge status="paused" />);
    expect(screen.getByText('Paused')).toBeInTheDocument();
  });

  it('renders archived status correctly', () => {
    render(<ProjectStatusBadge status="archived" />);
    expect(screen.getByText('Archived')).toBeInTheDocument();
  });

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

describe('AutonomyBadge', () => {
  it('renders full_control level correctly', () => {
    render(<AutonomyBadge level="full_control" />);
    expect(screen.getByText('Full Control')).toBeInTheDocument();
  });

  it('renders milestone level correctly', () => {
    render(<AutonomyBadge level="milestone" />);
    expect(screen.getByText('Milestone')).toBeInTheDocument();
  });

  it('renders autonomous level correctly', () => {
    render(<AutonomyBadge level="autonomous" />);
    expect(screen.getByText('Autonomous')).toBeInTheDocument();
  });

  it('has title attribute with description', () => {
    render(<AutonomyBadge level="milestone" />);
    // The Badge component is the closest ancestor with the title
    const badge = screen.getByText('Milestone').closest('[title]');
    expect(badge).toHaveAttribute('title', 'Approve at sprint boundaries');
  });

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