import React from 'react';

import renderWithTheme from '../../../testUtils/renderWithTheme';
import Divider from '..';

describe('Divider', () => {
  it('renders correctly', () => {
    const { container } = renderWithTheme(
      <Divider
        marginX="small"
        marginY="small"
        variant="vertical"
        className="DividerClass"
      />
    );

    expect(container.firstChild).toHaveClass('DividerClass');
  });

  it('renders horizontally when variant is horizontal', () => {
    const { getByTestId } = renderWithTheme(
      <Divider variant="horizontal" data-test-id="horizontalDivider" />
    );

    expect(getByTestId('horizontalDivider')).toHaveStyle(`
      border-bottom-width: 1px;
      border-bottom-color: #dadbde;
      border-bottom-style: solid;
    `);
  });

  it('renders vertically when variant is vertical', () => {
    const { getByTestId } = renderWithTheme(
      <Divider variant="vertical" data-test-id="verticalDivider" />
    );

    expect(getByTestId('verticalDivider')).toHaveStyle(`
       border-left-width: 1px;
       border-left-color: #dadbde;
       border-left-style: solid;
    `);
  });
});