import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Modal from '../index';

const { PopUp: PopUpModal } = Modal;

describe('rendering', () => {
  it('renders modal contents', () => {
    const { getByText } = renderWithTheme(
      <PopUpModal title="A title" body="A body" footer="A footer" />
    );
    expect(getByText('A title')).toBeInTheDocument();
    expect(getByText('A body')).toBeInTheDocument();
    expect(getByText('A footer')).toBeInTheDocument();
  });

  it('allows to control the visibility', () => {
    const { getByText } = renderWithTheme(
      <PopUpModal
        title="A title"
        body="A body"
        footer="A footer"
        open={false}
      />
    );
    expect(getByText('A title')).not.toBeVisible();
    expect(getByText('A body')).not.toBeVisible();
    expect(getByText('A footer')).not.toBeVisible();
  });

  it('allows to customise modal contents using react elements', () => {
    const { getByText } = renderWithTheme(
      <PopUpModal
        title={<div>Customised title</div>}
        body={<div>Customised body</div>}
        footer={<div>Customised footer</div>}
      />
    );
    expect(getByText('Customised title')).toBeInTheDocument();
    expect(getByText('Customised body')).toBeInTheDocument();
    expect(getByText('Customised footer')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('allows to click on customised footer', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <PopUpModal
        title="A title"
        body="A body"
        footer={
          <button type="button" onClick={(): void => onClick()}>
            Footer button
          </button>
        }
      />
    );
    fireEvent.click(getByText('Footer button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});