ldx-widgets/tests/components/select_pvr_option.coffee

widgets

describe 'SelectPvrOption', ->
  SelectPvrOption = React.createFactory require('../../src/components/select_pvr_option')

  #--------------------------------------------------------------------- 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, 'main-label'
  
    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, 'main-label'
  
    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, 'main-label'
  
    expect(mainDiv.style['line-height']).to.equal("#{lineHeight}px")


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

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

    TestUtils.Simulate.click mainDiv, {}

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


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

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

    TestUtils.Simulate.click mainDiv, {}

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

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

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

    TestUtils.Simulate.click mainDiv, {}

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


  it 'should render children into a collapsible section', ->
    sOpts = [
      {
        value: 1
        label: 'Value 1'
      }
      {
        value: 2
        label: 'Value 2'
      }
    ]

    comp = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        label: 'item with suboptions'
    }, [
      SelectPvrOption {
        key: 1
        option: sOpts[0]
      }
      SelectPvrOption {
        key: 2
        option: sOpts[1]
      }
    ]

    el = scryRenderedDOMComponentsWithClass(comp, 'sub-options')
    opts = scryRenderedDOMComponentsWithClass(comp, 'select-pvr-option')

    assert.equal(el.length, 1, 'suboptions container')
    assert.equal(opts.length - 1, sOpts.length, 'suboptions items')

  it 'should add proper CSS classes when suboptions present', ->
    sOpts = [
      {
        value: 1
        label: 'Value 1'
      }
      {
        value: 2
        label: 'Value 2'
      }
    ]

    comp = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        label: 'item with suboptions'
      isOpen: true
    }, [
      SelectPvrOption {
        key: 1
        option: sOpts[0]
      }
      SelectPvrOption {
        key: 2
        option: sOpts[1]
      }
    ]

    el = scryRenderedDOMComponentsWithClass(comp, 'has-sub-options sub-options-open')

    assert.equal(el.length, 1)

  it 'should render suboption container with the proper height value when expanded', ->
    soSpy = sinon.spy()
    sOpts = [
      {
        value: 1
        label: 'Value 1'
      }
      {
        value: 2
        label: 'Value 2'
      }
      {
        value: 3
        label: 'Value 3'
      }
    ]

    comp = TestUtils.renderIntoDocument SelectPvrOption {
      option:
        label: 'item with suboptions'
      optionHeight: 32
      setOpenSubOptions: soSpy
    }, [
      SelectPvrOption {
        key: 1
        optionHeight: 12
        option: sOpts[0]
      }
      SelectPvrOption {
        key: 2
        optionHeight: 71
        option: sOpts[1]
      }
      SelectPvrOption {
        key: 3
        optionHeight: 42
        option: sOpts[2]
      }
    ]

    el = findRenderedDOMComponentWithClass(comp, 'has-sub-options')

    Simulate.click el
    
    # check combined option height plus border height
    combinedOptionHeight = 125
    combinedBorderSize = 3
    assert.equal(combinedOptionHeight + combinedBorderSize, soSpy.lastCall.args[1])