// @flow
import React from 'react';
import { currentTheme, renderSnapshot } from '../../../../utils/tests';

import type { ProgressBarProps } from './progress-bar.proptypes';
import {
  getBackgroundColor,
  getBarColor,
  getBarWidth,
} from './progress-bar.css-rules';
import { ProgressBar } from './index';

const DEFAULT_PROPS: ProgressBarProps = {
  totalSteps: 100,
  currentStep: 40,
  quickProgress: false,
};

describe('ProgressBar', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const progressBar = renderSnapshot(<ProgressBar {...DEFAULT_PROPS} />);

      expect(progressBar).toMatchSnapshot();
    });
  });

  describe('css-rules', () => {
    describe('getBackgroundColor', () => {
      it('returns a valid color', () => {
        expect(getBackgroundColor({ theme: currentTheme })).toBeHexCode();
      });
    });

    describe('getBarColor', () => {
      it('returns a valid color', () => {
        expect(
          getBarColor({
            theme: currentTheme,
            totalSteps: 10,
            currentStep: 5,
            error: true,
          }),
        ).toBeHexCode();
      });
    });

    describe('getBarWidth', () => {
      it('returns a percentage depending on current and total steps', () => {
        const width = getBarWidth({ totalSteps: 10, currentStep: 4 });
        expect(width).toBe('40%');
      });

      it('returns a larger percentage if quickProgress is true', () => {
        const width = getBarWidth({
          totalSteps: 10,
          currentStep: 4,
          quickProgress: true,
        });
        expect(width).toBe('64%');
      });
    });
  });
});
