import React from 'react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import {
  StyledIconWrapper,
  StyledBanner,
  StyledCloseButton,
} from '../StyledBanner';

describe('StyledIconWrapper', () => {
  it('has default style', () => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="default" themeIntent="success" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has compact style', () => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="compact" themeIntent="success" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    themeIntent
    ${'success'}
    ${'info'}
    ${'warning'}
    ${'danger'}
    ${'error'}
  `('renders correctly when themeIntent is $themeIntent', ({ themeIntent }) => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="compact" themeIntent={themeIntent} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('StyledBanner', () => {
  it('has default style', () => {
    const { container } = renderWithTheme(
      <StyledBanner themeSize="default" themeIntent="info" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has compact style', () => {
    const { container } = renderWithTheme(
      <StyledBanner themeSize="compact" themeIntent="info" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    intent
    ${'info'}
    ${'success'}
    ${'warning'}
    ${'danger'}
    ${'error'}
  `('has correct $intent style', ({ intent }) => {
    const { container } = renderWithTheme(
      <StyledBanner themeSize="default" themeIntent={intent} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('StyledCloseButton', () => {
  it('has default style', () => {
    const { container } = renderWithTheme(
      <StyledCloseButton themeSize="default" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has compact style', () => {
    const { container } = renderWithTheme(
      <StyledCloseButton themeSize="compact" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});