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

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

const mockProject: Project = {
  id: 'proj-001',
  name: 'Test Project',
  description: 'A test project for unit testing',
  status: 'active',
  autonomy_level: 'milestone',
  created_at: '2025-01-15T00:00:00Z',
  owner_id: 'user-001',
};

describe('ProjectHeader', () => {
  it('renders project name', () => {
    render(<ProjectHeader project={mockProject} />);
    expect(screen.getByText('Test Project')).toBeInTheDocument();
  });

  it('renders project description', () => {
    render(<ProjectHeader project={mockProject} />);
    expect(screen.getByText('A test project for unit testing')).toBeInTheDocument();
  });

  it('renders project status badge', () => {
    render(<ProjectHeader project={mockProject} />);
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('renders autonomy level badge', () => {
    render(<ProjectHeader project={mockProject} />);
    expect(screen.getByText('Milestone')).toBeInTheDocument();
  });

  it('renders nothing when project is null', () => {
    const { container } = render(<ProjectHeader project={null} />);
    expect(container.firstChild).toBeNull();
  });

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

  it('shows pause button when canPause is true and project is active', () => {
    const onPauseProject = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        canPause={true}
        onPauseProject={onPauseProject}
      />
    );
    expect(screen.getByRole('button', { name: /pause project/i })).toBeInTheDocument();
  });

  it('does not show pause button when project is not active', () => {
    const completedProject = { ...mockProject, status: 'completed' as const };
    render(<ProjectHeader project={completedProject} canPause={true} />);
    expect(screen.queryByRole('button', { name: /pause project/i })).not.toBeInTheDocument();
  });

  it('shows run sprint button when canStart is true', () => {
    const onStartSprint = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        canStart={true}
        onStartSprint={onStartSprint}
      />
    );
    expect(screen.getByRole('button', { name: /run sprint/i })).toBeInTheDocument();
  });

  it('does not show run sprint button when project is completed', () => {
    const completedProject = { ...mockProject, status: 'completed' as const };
    render(<ProjectHeader project={completedProject} canStart={true} />);
    expect(screen.queryByRole('button', { name: /run sprint/i })).not.toBeInTheDocument();
  });

  it('calls onStartSprint when run sprint button is clicked', async () => {
    const user = userEvent.setup();
    const onStartSprint = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        canStart={true}
        onStartSprint={onStartSprint}
      />
    );

    await user.click(screen.getByRole('button', { name: /run sprint/i }));
    expect(onStartSprint).toHaveBeenCalledTimes(1);
  });

  it('calls onPauseProject when pause button is clicked', async () => {
    const user = userEvent.setup();
    const onPauseProject = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        canPause={true}
        onPauseProject={onPauseProject}
      />
    );

    await user.click(screen.getByRole('button', { name: /pause project/i }));
    expect(onPauseProject).toHaveBeenCalledTimes(1);
  });

  it('calls onCreateSprint when new sprint button is clicked', async () => {
    const user = userEvent.setup();
    const onCreateSprint = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        onCreateSprint={onCreateSprint}
      />
    );

    await user.click(screen.getByRole('button', { name: /new sprint/i }));
    expect(onCreateSprint).toHaveBeenCalledTimes(1);
  });

  it('calls onSettings when settings button is clicked', async () => {
    const user = userEvent.setup();
    const onSettings = jest.fn();
    render(
      <ProjectHeader
        project={mockProject}
        onSettings={onSettings}
      />
    );

    await user.click(screen.getByRole('button', { name: /project settings/i }));
    expect(onSettings).toHaveBeenCalledTimes(1);
  });

  it('applies custom className', () => {
    render(<ProjectHeader project={mockProject} className="custom-class" />);
    expect(screen.getByTestId('project-header')).toHaveClass('custom-class');
  });
});