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

import Alert, { getAlertIcon } from '..';

describe('Alert', () => {
  it('shows icon, title & content', () => {
    const { getByText, getByTestId } = renderWithTheme(
      <Alert title="A title" content="A content" />
    );

    expect(getByTestId('alert-icon')).toBeInTheDocument();
    expect(getByText('A title')).toBeInTheDocument();
    expect(getByText('A content')).toBeInTheDocument();
  });

  it('shows title & content only', () => {
    const { getByText, queryByTestId } = renderWithTheme(
      <Alert title="A title" content="A content" icon={null} />
    );

    expect(queryByTestId('alert-icon')).not.toBeInTheDocument();
    expect(getByText('A title')).toBeInTheDocument();
    expect(getByText('A content')).toBeInTheDocument();
  });

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

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

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

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

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

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