import { render, fireEvent, waitFor, screen } from '../../../test-utils';

import ProcessingStep from '.';

describe('ProcessingStep', () => {
  const PROCESSING_STEP_PROPS = {
    isComplete: false,
    isError: false,
    isSuccess: false,
    onAnimationCompleted: jest.fn(),
    onClear: jest.fn(),
    psButtonText: 'psButtonText',
    psProcessingText: 'psProcessingText',
    psButtonDisabled: false,
  };

  let container: HTMLElement;

  beforeEach(() => {
    const view = render(<ProcessingStep {...PROCESSING_STEP_PROPS} />);
    container = view.container;
  });

  test('renders container', async () => {
    await waitFor(() => {
      const processing = container.querySelector('.droppable-processing-card');
      expect(processing).toBeInTheDocument();
    });
  });

  test('renders ProcessIndicator with default status', () => {
    expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
  });

  test('renders ProcessIndicator with success status', async () => {
    const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isSuccess />);
    await waitFor(() => {
      const processIndicator = container.querySelector('.process-success');
      expect(processIndicator).toBeInTheDocument();
    });
  });

  test('renders ProcessIndicator with error status', async () => {
    const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isError />);
    await waitFor(() => {
      const processIndicator = container.querySelector('.process-danger');
      expect(processIndicator).toBeInTheDocument();
    });
  });

  test('renders button when psButtonText is set up', () => {
    expect(screen.getByText(PROCESSING_STEP_PROPS.psButtonText)).toBeInTheDocument();
  });

  test('calls onClear when button is clicked', () => {
    fireEvent.click(screen.getByText(PROCESSING_STEP_PROPS.psButtonText));
    expect(PROCESSING_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
  });
});