ldx-widgets/tests/components/select_pvr.coffee

widgets

describe 'SelectPvr', ->
  React = require 'react'
  Pvr = React.createFactory(require '../../src/components/pvr')
  SelectPvr = React.createFactory require('../../src/components/select_pvr')
  {Flux} = require 'delorean'
  _ = require 'lodash'
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'

  options = [
    {
      label: 'one'
      value: 1
    }
    {
      label: 'two'
      value: 2
    }
    {
      label: 'three'
      value: 3
    }
    {
      label: 'four'
      value: 4
    }
    {
      label: 'five'
      value: 5
    }
  ]

   
  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    selectPvr = TestUtils.renderIntoDocument SelectPvr({
        close: ->
      pvrProps:
        anchor: document.createElement("div") 
    })
    
    defaultProps = selectPvr.props

    optionsTest = _.isEqual defaultProps.options, []
    stylesTest = _.isEqual defaultProps.styleMixin, {}

    expect(optionsTest).to.equal yes
    expect(stylesTest).to.equal yes
    expect(defaultProps.onChange).to.be.a 'function'
    expect(defaultProps.hideSelected).to.equal no
    expect(defaultProps.optionHeight).to.equal 36


  #--------------------------------------------------------------------- Sizing/Styling
  it 'Should resize itself to the number of options when height is auto', ->
    optionHeight = 100
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      optionHeight: optionHeight
      pvrProps:
       anchor: document.createElement("div") 
    
    node = ReactDOM.findDOMNode selectPvr 

    expect(node.style.height).to.equal("#{options.length * optionHeight + (options.length - 1)}px")


  it 'Should adjust the auto height when hideSelected is on', ->
    optionHeight = 100
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      optionHeight: optionHeight
      hideSelected: yes
      pvrProps:
       anchor: document.createElement("div")
    
    node = ReactDOM.findDOMNode selectPvr 

    expect(node.style.height).to.equal("#{options.length * optionHeight + (options.length - 1) - optionHeight}px")

  it 'Should use maxHeight if maxHeight is lower than calculated height (optionHeight * options.length)', ->
    optionHeight = 60
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      optionHeight: optionHeight
      maxHeight: 100
      pvrProps:
       anchor: document.createElement("div")
    
    node = ReactDOM.findDOMNode selectPvr 

    expect(node.style.height).to.equal('100px')
    

  it 'Should apply all styles passed in the styleMixin prop', ->
    styleMixin =
      left: '513px'
      top: '50%'

    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      styleMixin: styleMixin
      pvrProps:
       anchor: document.createElement("div")
       width: '213px'
    
    node = ReactDOM.findDOMNode selectPvr 
    inner = node.getElementsByClassName('select-pvr')[0]

    expect(inner.style.left).to.equal(styleMixin.left)
    expect(inner.style.top).to.equal(styleMixin.top)
    expect(inner.style.width).to.equal('213px')

  #--------------------------------------------------------------------- Selection
  it 'Should set the selectedOption state to the defaultSelected prop', ->
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      defaultSelected: options[3]
      pvrProps:
       anchor: document.createElement("div")
    
    expect(selectPvr.state.selectedOption).to.equal(options[3])

  it 'Should apply the is-selected class to the defaultSelected option element', ->
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      defaultSelected: options[3]
      pvrProps:
       anchor: document.createElement("div")

    selectedEl = TestUtils.scryRenderedDOMComponentsWithClass selectPvr, 'is-selected'
    
    expect(selectedEl.length).to.equal(1)


  it 'Should NOT render the selected element when hideSelected is on', ->
    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      defaultSelected: options[3]
      hideSelected: on
      pvrProps:
       anchor: document.createElement("div")

    optionsEls = TestUtils.scryRenderedDOMComponentsWithClass selectPvr, 'select-pvr-option'
    
    expect(optionsEls.length).to.equal(options.length - 1)

  it 'Should call the onChange prop when a non selected option is clicked', ->
    handleChange = sinon.spy()

    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      defaultSelected: options[3]
      onChange: handleChange
      pvrProps:
       anchor: document.createElement("div")

    optionsEls = TestUtils.scryRenderedDOMComponentsWithClass selectPvr, 'select-pvr-option'

    TestUtils.Simulate.click optionsEls[1]

    expect(handleChange.calledWith(options[1])).to.equal(yes)


  it 'Should NOT call the onChange prop when a the selected option is clicked', ->
    handleChange = sinon.spy()

    selectPvr = TestUtils.renderIntoDocument SelectPvr
      close: ->
      options: options
      defaultSelected: options[3]
      onChange: handleChange
      pvrProps:
       anchor: document.createElement("div")

    optionsEls = TestUtils.scryRenderedDOMComponentsWithClass selectPvr, 'select-pvr-option'

    TestUtils.Simulate.click optionsEls[3]

    expect(handleChange.calledWith(options[3])).to.equal(no)







 #