Finish testing for slider and progressbar and add sinon

components/__tests__/ProgressBar.spec.cjsx

@@ -4,20 +4,18 @@ utils       = require('./utils')
 ProgressBar = require('../progress_bar')
 
 describe 'ProgressBar', ->
-  progressBar = null
-
   describe '#calculateRatio', ->
     before ->
-      progressBar = utils.renderComponent(ProgressBar, { min: 100, max: 300 })
+      @progressBar = utils.renderComponent(ProgressBar, { min: 100, max: 300 })
 
     it 'calculates the right ratio', ->
-      expect(progressBar.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)
+      expect(@progressBar.calculateRatio(10)).toEqual(0)
 
     it 'gets 1 when value is more than max', ->
-      expect(progressBar.calculateRatio(400)).toEqual(1)
+      expect(@progressBar.calculateRatio(400)).toEqual(1)
 
   describe '#render', ->
     it 'renders the value and buffer bars when it is linear', ->

components/__tests__/Slider.spec.cjsx

@@ -1,8 +1,10 @@
 TestUtils   = React.addons.TestUtils
 expect      = require('expect')
+sinon       = require('sinon')
 utils       = require('./utils')
-Slider      = require('../slider')
 ProgressBar = require('../progress_bar')
+Input       = require('../input')
+Slider      = require('../slider')
 
 describe 'Slider', ->
   describe '#positionToValue', ->
@@ -68,6 +70,17 @@ describe 'Slider', ->
       slider = utils.renderComponent(Slider, props, state)
       expect(slider.calculateKnobOffset()).toEqual(25)
 
+  describe '#getValue', ->
+    it 'retrieves the current value', ->
+      slider = utils.renderComponent(Slider, {value: 10})
+      expect(slider.getValue()).toEqual(slider.state.value)
+
+  describe '#setValue', ->
+    it 'set the current value', ->
+      slider = utils.renderComponent(Slider, {value: 10})
+      slider.setValue(50)
+      expect(slider.state.value).toEqual(50)
+
   describe '#render', ->
     it "contains a linear progress bar with proper properties", ->
       slider = utils.renderComponent(Slider, {min: 100, max: 1000, value: 140})
@@ -78,6 +91,23 @@ describe 'Slider', ->
       expect(progress.props.min).toEqual(100)
       expect(progress.props.max).toEqual(1000)
 
+    it "contains an input component if its editable", ->
+      slider = utils.renderComponent(Slider, {editable: true, value: 130})
+      input  = TestUtils.findRenderedComponentWithType(slider, Input)
+      expect(input.props.value).toEqual(slider.props.value)
+
+    it "contains the proper number of snaps when snapped", ->
+      slider = utils.renderComponent(Slider, {snaps: true, step: 10})
+      snaps  = slider.refs.snaps
+      expect(snaps.props.children.length).toEqual(10)
+
+    it "has the proper classes for pinned, editable and ring", ->
+      slider = utils.shallowRenderComponent(Slider, {editable: true, pinned: true})
+      expect(slider.props.className).toContain("ring")
+      expect(slider.props.className).toContain("pinned")
+      slider = utils.shallowRenderComponent(Slider, {editable: true, value: 50})
+      expect(slider.props.className).toNotContain("ring")
+
   describe 'events', ->
     before ->
       props = { min: -500, max: 500 }
@@ -88,6 +118,32 @@ describe 'Slider', ->
       TestUtils.Simulate.mouseDown(@slider.refs.knob)
       expect(@slider.state.pressed).toEqual(true)
 
+    it "sets pressed state when knob is touched", ->
+      TestUtils.Simulate.touchStart(@slider.refs.knob, {touches: [{pageX: 200}]})
+      expect(@slider.state.pressed).toEqual(true)
+
     it "sets a proper value when the slider is clicked", ->
       TestUtils.Simulate.mouseDown(@slider.refs.slider, { pageX: 200 })
       expect(@slider.state.value).toEqual(-300)
+
+    it "sets a proper value when the slider is touched", ->
+      TestUtils.Simulate.touchStart(@slider.refs.slider, {touches: [{pageX: 200, pageY: 0}]})
+      expect(@slider.state.value).toEqual(-300)
+
+    it "changes its value when input changes", ->
+      slider = utils.renderComponent(Slider, {editable: true, value: 50})
+      input  = TestUtils.findRenderedComponentWithType(slider, Input)
+      TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}})
+      expect(slider.state.value).toEqual(80)
+
+    it "changes input value when slider changes", ->
+      slider = utils.renderComponent(Slider, {editable: true}, {sliderStart: 0, sliderLength: 1000})
+      input  = TestUtils.findRenderedComponentWithType(slider, Input)
+      TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 })
+      expect(input.state.value).toEqual(90)
+
+    it "calls onChange callback when the value is changed", ->
+      onChangeSpy = sinon.spy()
+      slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000})
+      TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 })
+      expect(onChangeSpy.called).toEqual(true)

components/slider/index.cjsx

@@ -67,7 +67,7 @@ module.exports = React.createClass
     @setState value: value, =>
       @start(position)
       _addEventsToDocument(@getTouchEventMap())
-    _pauseEvent(e)
+    _pauseEvent(event)
 
   onSliderFocus: (event) ->
     _addEventsToDocument(@getKeyboardEvents())
@@ -75,8 +75,8 @@ module.exports = React.createClass
   onSliderBlur: (event) ->
     _removeEventsFromDocument(@getKeyboardEvents())
 
-  onInputChange: ->
-    @setState value: @trimValue(@refs.input.getValue())
+  onInputChange: (event) ->
+    @setState value: @trimValue(event.target.value)
 
   onKeyDown: (event) ->
     event.stopPropagation()
@@ -191,7 +191,7 @@ module.exports = React.createClass
                        min={@props.min}/>
           {
             if @props.snaps
-              <div className={localCSS.snaps}>
+              <div ref="snaps" className={localCSS.snaps}>
               {
                 for i in [1..((@props.max - @props.min) / @props.step)]
                   <div key="span-#{i}" className={localCSS.snap}></div>

package.json

@@ -42,6 +42,7 @@
     "node-libs-browser"           : "^0.5.2",
     "phantomjs-polyfill"          : "0.0.1",
     "postcss-loader"              : "^0.4.3",
+    "sinon"                       : "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
     "style-loader"                : "^0.12.3",
     "stylus-loader"               : "^1.2.0",
     "webpack"                     : "1.10.1",