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

import Notification from '..';

describe('rendering', () => {
  it('shows title & content', () => {
    const { getByText } = renderWithTheme(
      <Notification title="A title" content="A content" />
    );
    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(
      <Notification title="A title" onClose={onClose} />
    );

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

describe('Notification Icon', () => {
  it.each`
    intent       | expectedClass
    ${'success'} | ${'hero-icon-circle-ok'}
    ${'info'}    | ${'hero-icon-circle-info'}
    ${'warning'} | ${'hero-icon-circle-warning'}
    ${'danger'}  | ${'hero-icon-circle-cancel'}
    ${'error'}   | ${'hero-icon-circle-cancel'}
    ${'any'}     | ${'hero-icon-circle-ok'}
  `('shows $intent icon based on intent prop', ({ intent, expectedClass }) => {
    const { getByTestId } = renderWithTheme(
      <Notification title="A title" intent={intent} />
    );

    expect(getByTestId('notification-icon')).toHaveClass(expectedClass);
  });

  it('shows icon based on icon prop (IconName)', () => {
    const { getByTestId } = renderWithTheme(
      <Notification title="A title" icon="coin" />
    );

    expect(getByTestId('notification-icon')).toHaveClass('hero-icon-coin');
  });

  it('shows icon based on icon prop (ReactElement)', () => {
    const { getByText } = renderWithTheme(
      <Notification title="A title" icon={<p>An icon</p>} />
    );

    expect(getByText('An icon')).toBeInTheDocument();
  });

  it('shows no icon', () => {
    const { queryByTestId } = renderWithTheme(
      <Notification title="A title" icon={null} />
    );

    expect(queryByTestId('notification-icon')).not.toBeInTheDocument();
  });
});