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

import StyledDivider from '../StyledDivider';

describe('StyledDivider', () => {
  it.each`
    marginX
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $marginX margin horizontal style', ({ marginX }) => {
    const { container } = renderWithTheme(
      <StyledDivider
        themeMarginX={marginX}
        themeMarginY="xsmall"
        themeVariant="horizontal"
      />
    );

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

  it.each`
    marginY
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $marginY margin vertical style', ({ marginY }) => {
    const { container } = renderWithTheme(
      <StyledDivider
        themeMarginX="xsmall"
        themeMarginY={marginY}
        themeVariant="horizontal"
      />
    );

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

  it.each`
    variant
    ${'horizontal'}
    ${'vertical'}
  `('has $variant variant style', ({ variant }) => {
    const { container } = renderWithTheme(
      <StyledDivider themeVariant={variant} />
    );

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