Finish tests for progress bar

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(<ProgressBar />)
-      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(<ProgressBar min={100} max={300} />)
 
-  describe '#calculateRadio', ->
     it 'calculates the right ratio', ->
-      progress = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} />)
-      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')

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
 
     <div className={className} role="progressbar"
          aria-valuenow={@props.value}
@@ -43,7 +46,7 @@ module.exports = React.createClass
 
   renderCircular: ->
     <svg className={localCSS.circle}>
-      <circle id="circle" className={localCSS.circlePath} style={@circularStyle()} cx="30" cy="30" r="25"/>
+      <circle className={localCSS.circlePath} style={@circularStyle()} cx="30" cy="30" r="25"/>
     </svg>
 
   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"