react-toolbox/components/progress_bar/__test__/index.spec.js

/* eslint-disable */
import React from 'react';
import expect from 'expect';
import TestUtils from 'react-addons-test-utils';
import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
import theme from '../theme.css';
import utils from '../../utils/testing';

describe('ProgressBar', () => {
  let progressBar;

  describe('#calculateRatio', () => {
    before(() => {
      const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
      progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
    });

    it('calculates the right ratio', () => {
      expect(progressBar.calculateRatio(150)).toEqual(0.25);
    });

    it('gets 0 when value is less than min', () => {
      expect(progressBar.calculateRatio(10)).toEqual(0);
    });

    it('gets 1 when value is more than max', () => {
      expect(progressBar.calculateRatio(400)).toEqual(1);
    });
  });

  describe('#render', () => {
    let buffer,
      value,
      wrapper,
      circle,
      strokeLength;

    it('renders the value and buffer bars when it is linear', () => {
      wrapper = utils.shallowRenderComponent(RawProgressBar, { theme }).props.children;
      expect(wrapper.props.children.length).toEqual(2);
      expect(wrapper.props.children[0].ref).toEqual('buffer');
      expect(wrapper.props.children[1].ref).toEqual('value');
    });

    it('renders the value and buffer bars when it is linear', () => {
      progressBar = utils.shallowRenderComponent(RawProgressBar, { mode: 'determinate', value: 30, buffer: 60, theme });
      buffer = (progressBar.props.children.props.children[0]);
      value = (progressBar.props.children.props.children[1]);
      expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`);
      expect(value.props.style.transform).toEqual(`scaleX(${0.3})`);
    });

    it('renders the svg circle when it is circular', () => {
      progressBar = utils.shallowRenderComponent(RawProgressBar, { type: 'circular', theme });
      expect(progressBar.props.children.type).toEqual('svg');
      expect(progressBar.props.children.props.children.type).toEqual('circle');
    });

    it('renders the proper circle length style when it is circular and determinate', () => {
      progressBar = utils.shallowRenderComponent(RawProgressBar, { type: 'circular', mode: 'determinate', value: 30, theme });
      circle = progressBar.props.children.props.children;
      strokeLength = 2 * Math.PI * circle.props.r * 0.3;
      expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
    });

    it('contains mode and className in its className', () => {
      progressBar = utils.shallowRenderComponent(RawProgressBar, { mode: 'determinate', className: 'tight', theme });
      expect(progressBar.props.className).toContain(theme.determinate);
      expect(progressBar.props.className).toContain(theme.tight);
    });
  });
});