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

import {
  Wrapper,
  Background,
  ProgressPercentage,
  Info,
} from '../StyledProgressBar';

describe('Wrapper', () => {
  it.each`
    size
    ${'small'}
    ${'medium'}
  `('has $size style', ({ size }) => {
    const { container } = renderWithTheme(<Wrapper themeSize={size} />);

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

describe('Background', () => {
  it.each`
    size        | fullWidth
    ${'small'}  | ${true}
    ${'small'}  | ${false}
    ${'medium'} | ${true}
    ${'medium'} | ${false}
  `('has $size style and fullWidth is $fullWidth', ({ size, fullWidth }) => {
    const { container } = renderWithTheme(
      <Background themeSize={size} themeFullWidth={fullWidth} />
    );

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

describe('ProgressPercentage', () => {
  it.each`
    size        | intent
    ${'small'}  | ${'primary'}
    ${'small'}  | ${'danger'}
    ${'small'}  | ${'success'}
    ${'small'}  | ${'warning'}
    ${'small'}  | ${'error'}
    ${'medium'} | ${'primary'}
    ${'medium'} | ${'danger'}
    ${'medium'} | ${'success'}
    ${'medium'} | ${'warning'}
    ${'medium'} | ${'error'}
  `('has $size and $intent style', ({ size, intent }) => {
    const { container } = renderWithTheme(
      <ProgressPercentage
        themeSize={size}
        themeIntent={intent}
        themeValue={32}
      />
    );

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

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

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