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

import { ModalContent, ModalHeader } from '../StyledModal';

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

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

  it.each`
    themeSize
    ${'small'}
    ${'large'}
    ${'xlarge'}
    ${'xxlarge'}
  `('renders correctly when themeSize is $themeSize', ({ themeSize }) => {
    const { container } = renderWithTheme(
      <ModalContent themeSize={themeSize} />
    );

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

describe('ModalHeader', () => {
  it.each`
    themeVariant
    ${undefined}
    ${'basic'}
    ${'primary'}
  `(
    'renders correctly when themeVariant is $themeVariant',
    ({ themeVariant }) => {
      const { container } = renderWithTheme(
        <ModalHeader themeVariant={themeVariant} />
      );

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