diff --git a/.eslintrc b/.eslintrc index ea68877d..fdaf2a6e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,6 +2,7 @@ "env": { "browser": true, "node": true, + "mocha": true, "es6": true }, diff --git a/components/progress_bar/__test__/index.spec.cjsx b/components/progress_bar/__test__/index.spec.cjsx deleted file mode 100644 index cc35a961..00000000 --- a/components/progress_bar/__test__/index.spec.cjsx +++ /dev/null @@ -1,48 +0,0 @@ -TestUtils = React.addons.TestUtils -expect = require('expect') -utils = require('../../utils/testing') -ProgressBar = require('../index') - -describe 'ProgressBar', -> - describe '#calculateRatio', -> - before -> - @progressBar = utils.renderComponent(ProgressBar, { min: 100, max: 300 }) - - 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', -> - it 'renders the value and buffer bars when it is linear', -> - progressBarWrapper = utils.shallowRenderComponent(ProgressBar).props.children - expect(progressBarWrapper.props.children.length).toEqual(2) - expect(progressBarWrapper.props.children[0].ref).toEqual('buffer') - expect(progressBarWrapper.props.children[1].ref).toEqual('value') - - it 'renders the proper scaleX for buffer and value when its linear and determinate', -> - progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60}) - 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(ProgressBar, {type: 'circular'}) - 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(ProgressBar, {type: 'circular', mode: 'determinate', value: 30}) - 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(ProgressBar, {mode: 'determinate', className: 'tight'}) - expect(progressBar.props.className).toContain('determinate') - expect(progressBar.props.className).toContain('tight') diff --git a/components/progress_bar/__test__/index.spec.jsx b/components/progress_bar/__test__/index.spec.jsx new file mode 100644 index 00000000..abb1137c --- /dev/null +++ b/components/progress_bar/__test__/index.spec.jsx @@ -0,0 +1,63 @@ +const expect = require('expect'); +const utils = require('../../utils/testing'); +const ProgressBar = require('../index'); + +describe('ProgressBar', function () { + describe('#calculateRatio', function () { + before(function () { + this.progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300}); + }); + + it('calculates the right ratio', function () { + expect(this.progressBar.calculateRatio(150)).toEqual(0.25); + }); + + it('gets 0 when value is less than min', function () { + expect(this.progressBar.calculateRatio(10)).toEqual(0); + }); + + it('gets 1 when value is more than max', function () { + expect(this.progressBar.calculateRatio(400)).toEqual(1); + }); + }); + + describe('#render', function () { + it('renders the value and buffer bars when it is linear', function () { + const progressBarWrapper = utils.shallowRenderComponent(ProgressBar).props.children; + expect(progressBarWrapper.props.children.length).toEqual(2); + expect(progressBarWrapper.props.children[0].ref).toEqual('buffer'); + expect(progressBarWrapper.props.children[1].ref).toEqual('value'); + }); + + it('renders the value and buffer bars when it is linear', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + mode: 'determinate', value: 30, buffer: 60 + }); + const buffer = (progressBar.props.children.props.children[0]); + const 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', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'}); + 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 () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + type: 'circular', mode: 'determinate', value: 30}); + const circle = progressBar.props.children.props.children; + const 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', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + mode: 'determinate', className: 'tight'}); + expect(progressBar.props.className).toContain('determinate'); + expect(progressBar.props.className).toContain('tight'); + }); + }); +}); diff --git a/components/progress_bar/index.cjsx b/components/progress_bar/index.cjsx deleted file mode 100644 index 6ebffd66..00000000 --- a/components/progress_bar/index.cjsx +++ /dev/null @@ -1,68 +0,0 @@ -localCSS = require './style' -prefixer = require '../utils/prefixer' - -module.exports = React.createClass - - # -- Properties - propTypes: - buffer : React.PropTypes.number - className : React.PropTypes.string - max : React.PropTypes.number - min : React.PropTypes.number - mode : React.PropTypes.string - multicolor : React.PropTypes.bool - type : React.PropTypes.string - value : React.PropTypes.number - - getDefaultProps: -> - buffer : 0 - className : '' - max : 100 - min : 0 - mode : 'indeterminate' - multicolor : false - type : 'linear' - value : 0 - - # -- Helper methods - calculateRatio: (value) -> - return 0 if value < @props.min - return 1 if value > @props.max - return (value - @props.min) / (@props.max - @props.min) - - # -- Render - render: -> - className = if @props.type == 'linear' then localCSS.linearBar else localCSS.circularBar - className += " #{@props.className}" if @props.className - className += " #{@props.mode}" if @props.mode - className += " multicolor" if @props.multicolor - -