/** * Tests for StepIndicator component */ import { render, screen } from '@testing-library/react'; import { StepIndicator } from '@/components/projects/wizard/StepIndicator'; describe('StepIndicator', () => { describe('non-script mode (6 steps)', () => { it('renders correct step count', () => { render(); expect(screen.getByText('Step 1 of 6')).toBeInTheDocument(); }); it('shows correct step label for each step', () => { const { rerender } = render(); expect(screen.getByText('Basic Info')).toBeInTheDocument(); rerender(); expect(screen.getByText('Complexity')).toBeInTheDocument(); rerender(); expect(screen.getByText('Client Mode')).toBeInTheDocument(); rerender(); expect(screen.getByText('Autonomy')).toBeInTheDocument(); rerender(); expect(screen.getByText('Agent Chat')).toBeInTheDocument(); rerender(); expect(screen.getByText('Review')).toBeInTheDocument(); }); it('renders 6 progress segments', () => { render(); const progressbar = screen.getByRole('progressbar'); expect(progressbar).toBeInTheDocument(); expect(progressbar).toHaveAttribute('aria-valuenow', '3'); expect(progressbar).toHaveAttribute('aria-valuemax', '6'); }); }); describe('script mode (4 steps)', () => { it('renders correct step count', () => { render(); expect(screen.getByText('Step 1 of 4')).toBeInTheDocument(); }); it('shows correct step labels (no Client Mode or Autonomy)', () => { const { rerender } = render(); expect(screen.getByText('Basic Info')).toBeInTheDocument(); rerender(); expect(screen.getByText('Complexity')).toBeInTheDocument(); // Step 5 (Agent Chat) maps to display step 3 rerender(); expect(screen.getByText('Step 3 of 4')).toBeInTheDocument(); expect(screen.getByText('Agent Chat')).toBeInTheDocument(); // Step 6 (Review) maps to display step 4 rerender(); expect(screen.getByText('Step 4 of 4')).toBeInTheDocument(); expect(screen.getByText('Review')).toBeInTheDocument(); }); it('renders 4 progress segments', () => { render(); const progressbar = screen.getByRole('progressbar'); expect(progressbar).toHaveAttribute('aria-valuemax', '4'); }); }); it('applies custom className', () => { const { container } = render( ); expect(container.firstChild).toHaveClass('my-custom-class'); }); });