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

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SprintProgress } from '@/components/projects/SprintProgress';
import type { Sprint, BurndownDataPoint } from '@/components/projects/types';

const mockSprint: Sprint = {
  id: 'sprint-001',
  project_id: 'proj-001',
  name: 'Sprint 3',
  goal: 'Complete checkout flow',
  status: 'active',
  start_date: '2025-01-27',
  end_date: '2025-02-10',
  total_issues: 15,
  completed_issues: 8,
  in_progress_issues: 4,
  blocked_issues: 1,
  todo_issues: 2,
};

const mockBurndownData: BurndownDataPoint[] = [
  { day: 1, remaining: 45, ideal: 45 },
  { day: 2, remaining: 42, ideal: 42 },
  { day: 3, remaining: 38, ideal: 39 },
  { day: 4, remaining: 35, ideal: 36 },
  { day: 5, remaining: 30, ideal: 33 },
];

describe('SprintProgress', () => {
  it('renders sprint progress with title', () => {
    render(<SprintProgress sprint={mockSprint} />);
    expect(screen.getByText('Sprint Overview')).toBeInTheDocument();
  });

  it('displays sprint name and date range', () => {
    render(<SprintProgress sprint={mockSprint} />);
    expect(screen.getByText(/Sprint 3/)).toBeInTheDocument();
    expect(screen.getByText(/Jan 27 - Feb 10, 2025/)).toBeInTheDocument();
  });

  it('shows progress percentage', () => {
    render(<SprintProgress sprint={mockSprint} />);
    // 8/15 = 53%
    expect(screen.getByText('53%')).toBeInTheDocument();
  });

  it('displays issue statistics', () => {
    render(<SprintProgress sprint={mockSprint} />);

    expect(screen.getByText('Completed')).toBeInTheDocument();
    expect(screen.getByText('8')).toBeInTheDocument();

    expect(screen.getByText('In Progress')).toBeInTheDocument();
    expect(screen.getByText('4')).toBeInTheDocument();

    expect(screen.getByText('Blocked')).toBeInTheDocument();
    expect(screen.getByText('1')).toBeInTheDocument();

    expect(screen.getByText('To Do')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
  });

  it('renders empty state when sprint is null', () => {
    render(<SprintProgress sprint={null} />);
    expect(screen.getByText('No active sprint')).toBeInTheDocument();
    expect(screen.getByText('No sprint is currently active')).toBeInTheDocument();
  });

  it('shows loading skeleton when isLoading is true', () => {
    const { container } = render(<SprintProgress sprint={null} isLoading />);
    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
  });

  it('renders burndown chart when data is provided', () => {
    render(<SprintProgress sprint={mockSprint} burndownData={mockBurndownData} />);
    expect(screen.getByText('Burndown Chart')).toBeInTheDocument();
  });

  it('shows sprint selector when multiple sprints are available', () => {
    const availableSprints = [
      { id: 'sprint-001', name: 'Sprint 3' },
      { id: 'sprint-002', name: 'Sprint 2' },
    ];
    const onSprintChange = jest.fn();

    render(
      <SprintProgress
        sprint={mockSprint}
        availableSprints={availableSprints}
        selectedSprintId="sprint-001"
        onSprintChange={onSprintChange}
      />
    );

    expect(screen.getByRole('combobox', { name: /select sprint/i })).toBeInTheDocument();
  });

  // Note: Radix Select doesn't work well with jsdom. Skipping interactive test.
  // This would need to be tested in E2E tests with Playwright.
  it.skip('calls onSprintChange when sprint is selected', async () => {
    const user = userEvent.setup();
    const availableSprints = [
      { id: 'sprint-001', name: 'Sprint 3' },
      { id: 'sprint-002', name: 'Sprint 2' },
    ];
    const onSprintChange = jest.fn();

    render(
      <SprintProgress
        sprint={mockSprint}
        availableSprints={availableSprints}
        selectedSprintId="sprint-001"
        onSprintChange={onSprintChange}
      />
    );

    await user.click(screen.getByRole('combobox', { name: /select sprint/i }));
    await user.click(screen.getByText('Sprint 2'));

    expect(onSprintChange).toHaveBeenCalledWith('sprint-002');
  });

  it('applies custom className', () => {
    render(<SprintProgress sprint={mockSprint} className="custom-class" />);
    expect(screen.getByTestId('sprint-progress')).toHaveClass('custom-class');
  });

  it('has accessible list role for issue statistics', () => {
    render(<SprintProgress sprint={mockSprint} />);
    expect(screen.getByRole('list', { name: /sprint issue statistics/i })).toBeInTheDocument();
  });
});