2015-09-09 11:36:12 +03:00
|
|
|
import expect from 'expect';
|
2015-10-10 12:25:47 +03:00
|
|
|
import style from '../../progress_bar/style';
|
2015-09-09 11:36:12 +03:00
|
|
|
import utils from '../../utils/testing';
|
|
|
|
import ProgressBar from '../index';
|
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 () {
|
2015-09-08 11:08:37 +03:00
|
|
|
progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300});
|
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 () {
|
2015-09-08 11:08:37 +03:00
|
|
|
wrapper = utils.shallowRenderComponent(ProgressBar).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');
|
2015-09-08 02:05:08 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the value and buffer bars when it is linear', function () {
|
2015-09-08 11:08:37 +03:00
|
|
|
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60});
|
|
|
|
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 () {
|
2015-09-08 11:08:37 +03:00
|
|
|
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'});
|
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 () {
|
2015-09-08 11:08:37 +03:00
|
|
|
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30});
|
|
|
|
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 () {
|
2015-09-08 11:08:37 +03:00
|
|
|
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
|
2015-10-10 12:25:47 +03:00
|
|
|
expect(progressBar.props.className).toContain(style.determinate);
|
|
|
|
expect(progressBar.props.className).toContain(style.tight);
|
2015-09-08 02:05:08 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|