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

import {
  SliderRail,
  SliderTrack,
  SliderTooltip,
  SliderThumb,
  SliderContainer,
} from '../StyledSlider';

describe('SliderRail', () => {
  it('has correct style', () => {
    const { container } = renderWithTheme(<SliderRail />);

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

describe('SliderTrack', () => {
  it('has correct style', () => {
    const { container } = renderWithTheme(<SliderTrack />);

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

describe('SliderTooltip', () => {
  it.each`
    alwaysShowTooltip
    ${true}
    ${false}
  `(
    'has correct style when alwaysShowTooltip is $alwaysShowTooltip',
    ({ alwaysShowTooltip }: { alwaysShowTooltip: boolean }) => {
      const { container } = renderWithTheme(
        <SliderTooltip alwaysShowTooltip={alwaysShowTooltip} />
      );

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

describe('SliderThumb', () => {
  it('has correct style', () => {
    const { container } = renderWithTheme(<SliderThumb />);

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

describe('SliderContainer', () => {
  it.each`
    disabled
    ${true}
    ${false}
  `(
    'has correct style when disabled is $disabled',
    ({ disabled }: { disabled: boolean }) => {
      const { container } = renderWithTheme(
        <SliderContainer disabled={disabled} />
      );

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