diff --git a/components/__tests__/ProgressBar.spec.cjsx b/components/__tests__/ProgressBar.spec.cjsx index 81f7a2d3..e870c3ad 100644 --- a/components/__tests__/ProgressBar.spec.cjsx +++ b/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', -> diff --git a/components/__tests__/Slider.spec.cjsx b/components/__tests__/Slider.spec.cjsx index 3e7f8acc..07fdbb0d 100644 --- a/components/__tests__/Slider.spec.cjsx +++ b/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) diff --git a/components/slider/index.cjsx b/components/slider/index.cjsx index 75a3e371..4441f118 100644 --- a/components/slider/index.cjsx +++ b/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 -
+
{ for i in [1..((@props.max - @props.min) / @props.step)]
diff --git a/package.json b/package.json index e4d69825..87370edd 100644 --- a/package.json +++ b/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",