import { act } from 'react';

import { render, screen } from '../test-utils';
import ProcessIndicator, { ProcessIndicatorProps } from './ProcessIndicator';

describe('ProcessIndicator', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(async () => {
    await jest.runOnlyPendingTimersAsync();
    jest.useRealTimers();
  });

  it('supports transitioning between states', async () => {
    const handleAnimationCompleted = jest.fn();
    const initialProps = {
      'data-testid': 'process-indicator',
      onAnimationCompleted: handleAnimationCompleted,
    } satisfies ProcessIndicatorProps;
    const view = render(<ProcessIndicator {...initialProps} />);

    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-success');
    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-xl');

    const updatedProps = {
      status: 'succeeded',
      size: 'xl',
    } satisfies ProcessIndicatorProps;
    view.rerender(<ProcessIndicator {...initialProps} {...updatedProps} />);
    await act(async () => {
      await jest.runOnlyPendingTimersAsync();
    });

    expect(screen.getByTestId('process-indicator')).toHaveClass('process-success');
    expect(screen.getByTestId('process-indicator')).toHaveClass('process-xl');
    expect(handleAnimationCompleted).not.toHaveBeenCalled();

    await jest.runOnlyPendingTimersAsync();

    expect(handleAnimationCompleted).toHaveBeenCalledWith(updatedProps.status);
    expect(handleAnimationCompleted).toHaveBeenCalledTimes(1);
  });
});