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

import Result from '..';
import Button from '../../Button';

describe('rendering', () => {
  it('renders result content', () => {
    const { queryByText } = renderWithTheme(
      <Result
        status="info"
        title="Title"
        subTitle="Sub title"
        extra={<div>Extra</div>}
      />
    );
    expect(queryByText('Title')).toBeInTheDocument();
    expect(queryByText('Sub title')).toBeInTheDocument();
    expect(queryByText('Extra')).toBeInTheDocument();
  });

  it('allows to customize icon', () => {
    const { queryByText } = renderWithTheme(
      <Result title="Title" icon={<div>Customised icon</div>} />
    );
    expect(queryByText('Title')).toBeInTheDocument();
    expect(queryByText('Customised icon')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('allows to interact on extra section', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <Result
        title="Title"
        extra={<Button text="Click me" onClick={(): void => onClick('foo')} />}
      />
    );
    fireEvent.click(getByText('Click me'));
    expect(onClick).toHaveBeenCalledTimes(1);
    expect(onClick).toHaveBeenCalledWith('foo');
  });

  it('allows to customize icon', () => {
    const { queryByText } = renderWithTheme(
      <Result title="Title" icon={<div>Customised icon</div>} />
    );
    expect(queryByText('Title')).toBeInTheDocument();
    expect(queryByText('Customised icon')).toBeInTheDocument();
  });
});