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

import CompleteStep from '.';

describe('CompleteStep', () => {
  const COMPLETED_STEP_PROPS = {
    isComplete: true,
    uploadedImage: '',
    fileName: 'fileName',
    isError: false,
    isImage: true,
    csSuccessText: 'csSuccessText',
    csFailureText: 'csFailureText',
    csButtonText: 'csButtonText',
    onClear: jest.fn(),
    usLabel: 'usLabel',
  };

  let container: HTMLElement;

  beforeEach(() => {
    const view = render(<CompleteStep {...COMPLETED_STEP_PROPS} />);
    container = view.container;
  });

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

  describe('when error is false', () => {
    test('renders isImage or Upload icon', () => {
      expect(screen.getByTestId('document-icon')).toBeInTheDocument();
    });

    test('renders filename when error is false', () => {
      expect(screen.getByText(COMPLETED_STEP_PROPS.fileName)).toBeInTheDocument();
    });
  });

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

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