diff --git a/components/__tests__/ProgressBar.spec.cjsx b/components/__tests__/ProgressBar.spec.cjsx
index cafd246e..c0ebf9b9 100644
--- a/components/__tests__/ProgressBar.spec.cjsx
+++ b/components/__tests__/ProgressBar.spec.cjsx
@@ -1,27 +1,50 @@
+TestUtils = React.addons.TestUtils
expect = require('expect')
utils = require('./utils')
-
-TestUtils = React.addons.TestUtils
ProgressBar = require('../progress_bar')
describe 'ProgressBar', ->
- describe '#props', ->
- it 'has the right default properties', ->
- progress = TestUtils.renderIntoDocument()
- expect(progress.props.max).toEqual(100)
- expect(progress.props.min).toEqual(0)
- expect(progress.props.mode).toEqual('indeterminate')
- expect(progress.props.multicolor).toEqual(false)
- expect(progress.props.type).toEqual('linear')
- expect(progress.props.value).toEqual(0)
+ progressBar = null
+
+ describe '#calculateRatio', ->
+ before ->
+ progressBar = TestUtils.renderIntoDocument()
- describe '#calculateRadio', ->
it 'calculates the right ratio', ->
- progress = TestUtils.renderIntoDocument()
- expect(progress.calculateRatio(150)).toEqual(0.25)
+ 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', ->
- context 'when its a linear progress bar', ->
- it 'renders the value and buffer bar', ->
- progressWrapper = utils.shallowRenderComponent(ProgressBar).props.children
- expect(progressWrapper.props.children.length).toEqual(2)
+ 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/index.cjsx b/components/progress_bar/index.cjsx
index c5f950b4..2a7fb910 100644
--- a/components/progress_bar/index.cjsx
+++ b/components/progress_bar/index.cjsx
@@ -26,13 +26,16 @@ module.exports = React.createClass
# -- Helper methods
calculateRatio: (value) ->
- (value - @props.min) / (@props.max - @props.min)
+ 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 += " #{localCSS.root} #{@props.mode} #{@props.className}"
- className += " multicolor" if @props.multicolor
+ className += " #{@props.className}" if @props.className
+ className += " #{@props.mode}" if @props.mode
+ className += " multicolor" if @props.multicolor
circularStyle: ->
@@ -62,4 +65,4 @@ module.exports = React.createClass
# -- Private methods
_transformDasharray = (ratio) ->
- strokeDasharray: "#{2 * Math.PI * 45 * ratio}, 400"
+ strokeDasharray: "#{2 * Math.PI * 25 * ratio}, 400"