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

68 lines
2.9 KiB
JavaScript
Raw Normal View History

2016-05-25 01:25:43 +03:00
import React from 'react';
import expect from 'expect';
2016-05-25 01:25:43 +03:00
import TestUtils from 'react-addons-test-utils';
import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
import theme from '../theme.scss';
import utils from '../../utils/testing';
2015-09-08 02:05:08 +03:00
describe('ProgressBar', function () {
2015-09-08 11:08:37 +03:00
let progressBar;
2015-09-08 02:05:08 +03:00
describe('#calculateRatio', function () {
before(function () {
2016-05-25 01:25:43 +03:00
const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
2015-09-08 02:05:08 +03:00
});
it('calculates the right ratio', function () {
2015-09-08 11:08:37 +03:00
expect(progressBar.calculateRatio(150)).toEqual(0.25);
2015-09-08 02:05:08 +03:00
});
it('gets 0 when value is less than min', function () {
2015-09-08 11:08:37 +03:00
expect(progressBar.calculateRatio(10)).toEqual(0);
2015-09-08 02:05:08 +03:00
});
it('gets 1 when value is more than max', function () {
2015-09-08 11:08:37 +03:00
expect(progressBar.calculateRatio(400)).toEqual(1);
2015-09-08 02:05:08 +03:00
});
});
describe('#render', function () {
2015-09-08 11:08:37 +03:00
let buffer, value, wrapper, circle, strokeLength;
2015-09-08 02:05:08 +03:00
it('renders the value and buffer bars when it is linear', function () {
2016-05-25 01:25:43 +03:00
wrapper = utils.shallowRenderComponent(RawProgressBar, {theme}).props.children;
2015-09-08 11:08:37 +03:00
expect(wrapper.props.children.length).toEqual(2);
expect(wrapper.props.children[0].ref).toEqual('buffer');
expect(wrapper.props.children[1].ref).toEqual('value');
2015-09-08 02:05:08 +03:00
});
it('renders the value and buffer bars when it is linear', function () {
2016-05-25 01:25:43 +03:00
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', value: 30, buffer: 60, theme});
2015-09-08 11:08:37 +03:00
buffer = (progressBar.props.children.props.children[0]);
value = (progressBar.props.children.props.children[1]);
2015-09-08 02:05:08 +03:00
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', function () {
2016-05-25 01:25:43 +03:00
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', theme});
2015-09-08 02:05:08 +03:00
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', function () {
2016-05-25 01:25:43 +03:00
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', mode: 'determinate', value: 30, theme});
2015-09-08 11:08:37 +03:00
circle = progressBar.props.children.props.children;
strokeLength = 2 * Math.PI * circle.props.r * 0.3;
2015-09-08 02:05:08 +03:00
expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
});
it('contains mode and className in its className', function () {
2016-05-25 01:25:43 +03:00
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', className: 'tight', theme});
expect(progressBar.props.className).toContain(theme.determinate);
expect(progressBar.props.className).toContain(theme.tight);
2015-09-08 02:05:08 +03:00
});
});
});