import { Sentiment } from '../common';
import { render, screen, mockMatchMedia } from '../test-utils';

import InlineAlert from './InlineAlert';

mockMatchMedia();

describe('InlineAlert', () => {
  const message = 'Your card is on its way.';

  describe('defaults', () => {
    it('the message is rendered', () => {
      render(<InlineAlert>{message}</InlineAlert>);

      expect(screen.getByText(message)).toBeInTheDocument();
    });

    it('will be of type neutral', () => {
      render(<InlineAlert>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-neutral');
    });
  });

  describe('render with types', () => {
    it('renders info', () => {
      render(<InlineAlert type={Sentiment.INFO}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-info');
      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
    });

    it('renders neutral', () => {
      render(<InlineAlert type={Sentiment.NEUTRAL}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-neutral');
      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
    });

    it('renders success', () => {
      render(<InlineAlert type={Sentiment.SUCCESS}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-success');
      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
    });

    it('renders positive', () => {
      render(<InlineAlert type={Sentiment.POSITIVE}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-positive');
      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
    });

    it('renders error as danger', () => {
      render(<InlineAlert type={Sentiment.ERROR}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-danger');
      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
    });

    it('renders negative as danger', () => {
      render(<InlineAlert type={Sentiment.NEGATIVE}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-danger');
      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
    });

    it('renders warning', () => {
      render(<InlineAlert type={Sentiment.WARNING}>{message}</InlineAlert>);
      const component = screen.getByRole('alert');

      expect(component).toHaveClass('alert-warning');
      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
    });
  });

  describe('other props', () => {
    it('should respect `iconLabel` override', () => {
      const customLabel = 'Custom Label';
      render(
        <InlineAlert type={Sentiment.WARNING} iconLabel={customLabel}>
          {message}
        </InlineAlert>,
      );
      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
    });
  });
});