import { FunctionComponent } from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import StepperHeader, { StepperHeaderProps } from './StepperHeader';

const STEPS = ['Phone', 'Verify', 'Profile'];

const ComponentToTest: FunctionComponent<Partial<StepperHeaderProps>> = ({ steps = STEPS, activeStep = 0 }) => (
  <ThemeProvider>
    <StepperHeader steps={steps} activeStep={activeStep} />
  </ThemeProvider>
);

describe('<StepperHeader/> component', () => {
  it('renders every step label', () => {
    render(<ComponentToTest />);
    STEPS.forEach((label) => expect(screen.getByText(label)).toBeInTheDocument());
  });

  it('marks the active step', () => {
    const { container } = render(<ComponentToTest activeStep={1} />);
    // MUI flags the active step's icon with the Mui-active class.
    expect(container.querySelector('.Mui-active')).toBeInTheDocument();
  });
});
