import React from 'react';
import userEvent from '@testing-library/user-event';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Banner, { getBannerIcon } from '../index';

describe('Banner', () => {
  it('shows icon, banner title and content', () => {
    const { getByText, getByTestId } = renderWithTheme(
      <Banner title="Banner title" content={<p>Banner content</p>} />
    );

    expect(getByTestId('banner-icon')).toBeInTheDocument();
    expect(getByText('Banner title')).toBeInTheDocument();
    expect(getByText('Banner content')).toBeInTheDocument();
  });

  it('shows banner title and content only', () => {
    const { getByText, queryByTestId } = renderWithTheme(
      <Banner
        title="Banner title"
        content={<p>Banner content</p>}
        icon={null}
      />
    );

    expect(queryByTestId('banner-icon')).not.toBeInTheDocument();
    expect(getByText('Banner title')).toBeInTheDocument();
    expect(getByText('Banner content')).toBeInTheDocument();
  });

  it('shows close icon button when onClose is defined', () => {
    const onClose = jest.fn();
    const { getByTestId } = renderWithTheme(
      <Banner title="Banner title" content="Banner content" onClose={onClose} />
    );

    expect(getByTestId('close-button')).toBeInTheDocument();
    userEvent.click(getByTestId('close-button'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });
});

describe('getBannerIcon', () => {
  it('returns defaultIcon when icon is not defined', () => {
    expect(getBannerIcon('user', undefined)).toEqual({
      tag: 'Some',
      value: { left: 'user', tag: 'Left' },
    });
  });

  it('returns icon when icon is one of hero icons', () => {
    expect(getBannerIcon('user', 'add')).toEqual({
      tag: 'Some',
      value: { left: 'add', tag: 'Left' },
    });
  });

  it('returns icon element when icon is a ReactElement', () => {
    expect(getBannerIcon('user', <p>Icon</p>)).toEqual({
      tag: 'Some',
      value: { right: <p>Icon</p>, tag: 'Right' },
    });
  });

  it('returns none when icon is null', () => {
    expect(getBannerIcon('user', null)).toEqual({
      tag: 'None',
    });
  });
});