import React from 'react';

import { theme } from '../../../..';
import Col from '../../Col';
import Row from '..';
import renderWithTheme from '../../../../testUtils/renderWithTheme';

describe('Row', () => {
  it('renders with id and contains the children', () => {
    const { getByText, getByTestId } = renderWithTheme(
      <Row data-test-id="row">Row content</Row>
    );

    expect(getByTestId('row')).toBeInTheDocument();
    expect(getByText('Row content')).toBeInTheDocument();
  });

  it('renders with gutter', () => {
    const { getByTestId } = renderWithTheme(
      <Row data-test-id="row" gutter={['xsmall', 'small']}>
        <Col data-test-id="col">Content</Col>
      </Row>
    );

    expect(getByTestId('row')).toHaveStyle(
      `
        margin-left: -${theme.space.xsmall / 2}px;
        margin-right: -${theme.space.xsmall / 2}px;
        margin-top: -${theme.space.small / 2}px;
        margin-bottom: -${theme.space.small / 2}px;
      `
    );

    expect(getByTestId('col')).toHaveStyle(
      `
        padding-left: ${theme.space.xsmall / 2}px;
        padding-right: ${theme.space.xsmall / 2}px;
        padding-top: ${theme.space.small / 2}px;
        padding-bottom: ${theme.space.small / 2}px;
      `
    );
  });
});