ldx-widgets/tests/components/select_pvr_option.coffee

widgets

describe 'SelectPvrOption', ->

  React = require 'react'
  SelectPvrOption = React.createFactory require('../../src/components/select_pvr_option')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'

  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {}

    defaultProps = selectPvrOption.props
    expect(defaultProps.hasSubLabel).to.equal(no)
    expect(defaultProps.isSelected).to.equal(no)
    expect(defaultProps.noWrapOptions).to.equal(no)
    expect(defaultProps.option.disabled).to.equal(no)
    expect(defaultProps.option.isSubHeader).to.equal(no)
    expect(defaultProps.option.isIndented).to.equal(no)
   
     
  #--------------------------------------------------------------------- Render
  it 'Should Render the appropriate CSS class when isSelected property is true', ->
    isSelected = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      isSelected: isSelected
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, "is-selected"

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when noWrapOptions property is true', ->
    noWrapOptions = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      noWrapOptions: noWrapOptions
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, "no-wrap"

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.disabled property is true', ->
    disabled = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option: 
        disabled: disabled
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, "is-disabled"

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.isSubHeader property is true', ->
    isSubHeader = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option: 
        isSubHeader: isSubHeader
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, "is-sub-header"

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.isIndented property is true', ->
    isIndented = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option: 
        isIndented: isIndented
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, "is-indented"

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.customClass property is defined', ->
    customClass = 'custom-class'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option: 
        customClass: customClass
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, customClass

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when hasSubLabel property is true', ->
    hasSubLabel = yes

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      hasSubLabel: hasSubLabel
    }
  
    mainDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, 'has-sublabel'

    expect(mainDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.info property is defined and option.label is defined', ->
    info = 'Info'
    label = 'Label'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        info: info
        label: label
    }
  
    labelDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, 'has-info'

    expect(labelDiv.length).to.equal(1)


  it 'Should Render the appropriate CSS class when option.info property is not defined and option.label is defined', ->
  
    label = 'Label'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        label: label
    }
  
    labelHasInfoDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, 'has-info'
    labelDiv = TestUtils.scryRenderedDOMComponentsWithClass selectPvrOption, 'label'

    expect(labelHasInfoDiv.length).to.equal(0)
    expect(labelDiv.length).to.equal(1)


  it 'Should Render the info when option.info property is defined', ->
    info = 'Info'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        info: info
    }
  
    infoDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'info'

    expect(infoDiv.innerText).to.equal(info)


  it 'Should Render the label when option.label property is defined', ->
    label = 'Label Text'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        label: label
    }
  
    labelDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'label'

    expect(labelDiv.innerText).to.equal(label)


  it 'Should Render the subLabel when option.subLabel property is defined', ->
    subLabel = 'Sub Label'

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        subLabel: subLabel
    }
  
    subLabelDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'sub-label'

    expect(subLabelDiv.innerText).to.equal(subLabel)


  it 'Should set the div height to the optionHeight property', ->

    optionHeight = 10
    
    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      optionHeight: optionHeight
    }

    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'
  
    expect(mainDiv.style['height']).to.equal("#{optionHeight}px")


  it 'Should set the div line-height to the optionHeight property when hasSubLabel property is false', ->

    optionHeight = 10
    
    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      optionHeight: optionHeight
      hasSubLabel: false
    }

    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'
  
    expect(mainDiv.style['line-height']).to.equal("#{optionHeight}px")


  it 'Should set the div line-height to the optionHeight divided 2 property when hasSubLabel property is true', ->

    optionHeight = 10
    
    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      optionHeight: optionHeight
      hasSubLabel: true
    }

    lineHeight = optionHeight/2

    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'
  
    expect(mainDiv.style['line-height']).to.equal("#{lineHeight}px")


  # --------------------------------------------------------------------- onClick
  it 'Should call the props.handleClick when clicked if disabled is false or (isSelected is false and canDeselect is true)', ->
    handleClick = sinon.spy()

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
        handleClick: handleClick
        isSelected: false
        canDeselect: true
        option:
          disabled: no
      }
    
    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'

    TestUtils.Simulate.click mainDiv, {}

    expect(handleClick.called).to.equal(true)


  it 'Should NOT call props.handleClick when clicked if disabled', ->
    handleClick = sinon.spy()

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
        handleClick: handleClick
        option:
          disabled: yes
      }
    
    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'

    TestUtils.Simulate.click mainDiv, {}

    expect(handleClick.called).to.equal(false)

  it 'Should NOT call props.handleClick when clicked if isSelected is true and canDeselect is false', ->
    handleClick = sinon.spy()

    selectPvrOption = TestUtils.renderIntoDocument SelectPvrOption {
      isSelected: true
      canDeselect: false
    }
    
    mainDiv = TestUtils.findRenderedDOMComponentWithClass selectPvrOption, 'select-pvr-option'

    TestUtils.Simulate.click mainDiv, {}

    expect(handleClick.called).to.equal(false)