import React from 'react';

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

import StyledTable, { StyledTH, StyledTD, StyledInnerTH } from '../StyledTable';

describe('StyledTH', () => {
  it('sticks header and shows divider', () => {
    const { container } = renderWithTheme(
      <StyledTH
        themeHorizontallySticky
        themeShowDivider
        themeLeft={50}
        themeSticky={false}
      />
    );

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

  it('does not stick header or show divider', () => {
    const { container } = renderWithTheme(
      <StyledTH
        themeHorizontallySticky={false}
        themeShowDivider={false}
        themeSticky={false}
      />
    );

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

describe('StyledTD', () => {
  it('sticks cell and shows divider', () => {
    const { container } = renderWithTheme(
      <StyledTD themeHorizontallySticky themeShowDivider themeLeft={50} />
    );

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

  it('does not stick cell or show divider', () => {
    const { container } = renderWithTheme(
      <StyledTD
        themeHorizontallySticky={false}
        themeShowDivider={false}
        themeAlign="right"
      />
    );

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

describe('StyledInnerTH', () => {
  it.each`
    themeAlign
    ${'left'}
    ${'right'}
  `('has $themeAlign align style', ({ themeAlign }) => {
    const { container } = renderWithTheme(
      <StyledInnerTH themeAlign={themeAlign} />
    );

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

describe('StyledTable', () => {
  it('has fixed layout style', () => {
    const { container } = renderWithTheme(<StyledTable themeFixedLayout />);

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