Finish tests for progress bar
parent
0bbd413809
commit
3af452fe4b
|
@ -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')
|
||||
|
|
|
@ -26,12 +26,15 @@ 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 += " #{@props.className}" if @props.className
|
||||
className += " #{@props.mode}" if @props.mode
|
||||
className += " multicolor" if @props.multicolor
|
||||
|
||||
<div className={className} role="progressbar"
|
||||
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue