ldx-widgets/tests/components/multi_select_option.coffee

widgets

describe 'MultiSelectOption', ->
  React = require 'react'
  MultiSelectOption = React.createFactory require('../../src/components/multi_select_option')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'

  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {}

    defaultProps = multiSelectOption.props

    expect(defaultProps.option).to.be.a('object')
    expect(defaultProps.setValues).to.be.a('function')


  #--------------------------------------------------------------------- CSS Class
  it 'Should add the class name is-active to the className if isActive property is true and option.isSelected is true', ->

    className = 'is-active'

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      isActive: yes
      option: {
        isSelected: yes
      }
    }

    mainLi = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, className
  
    expect(mainLi.length).to.equal(1)


  it 'Should add the class name is-selected to the defaultClass if isTheDefault property is true', ->

    defaultClass = 'is-selected'

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      allowDefault: yes
      option: {
        isSelected: yes
      }
      isTheDefault: yes
    }

    defaultBtn = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, defaultClass
  
    expect(defaultBtn.length).to.equal(1)


  #--------------------------------------------------------------------- Buttons
  it 'Should Render the Toggle button when isActive is true and not disabled', ->


    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      isActive: yes
    }

    toggleBtn = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, 'btn-plus-minus'
    
    expect(toggleBtn.length).to.equal(1)


  it 'Should Render the Default button when allowDefault is true and option.isSelected is true and not disabled', ->

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      allowDefault: yes
      option: {
        isSelected: yes
      }
    }

    defaultBtn = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, 'multiselect-default'
    
    expect(defaultBtn.length).to.equal(1)


  it 'Should NOT Render the Default button if allowDefault is false, option.isSelected and not disabled', ->

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      allowDefault: no
      option: {
        isSelected: yes
      }
      isTheDefault: yes
    }

    defaultBtn = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, 'multiselect-default'
  
    expect(defaultBtn.length).to.equal(0)


  it 'Should NOT Render the Default button if allowDefault is true, there is no option.isSelected and not disabled', ->

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      allowDefault: no
      isTheDefault: yes
    }

    defaultBtn = TestUtils.scryRenderedDOMComponentsWithClass multiSelectOption, 'multiselect-default'
  
    expect(defaultBtn.length).to.equal(0)

  it 'Should NOT Render buttons if disabled is true', ->

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      disabled: true
      allowDefault: yes
      isActive: yes
      option: {
        isSelected: yes
      }
    }

    btns = TestUtils.scryRenderedDOMComponentsWithTag multiSelectOption, 'button'

    expect(btns.length).to.equal(0)

  #--------------------------------------------------------------------- Label
  it 'Should Render the label text when option.label is passed', ->

    label = 'New Label'

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      option: {
        label: label
      }
    }

    labelDiv = TestUtils.findRenderedDOMComponentWithClass multiSelectOption, 'multiselect-option-label'
    
    expect(labelDiv.innerText).to.equal(label)


  #--------------------------------------------------------------------- Click handling
  it 'Should call the setValues property when li is clicked and isActive is true', ->
    setValues = sinon.spy()
    
    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      setValues: setValues
      isActive: true
    }

    mainLi = TestUtils.findRenderedDOMComponentWithTag multiSelectOption, 'li'

    TestUtils.Simulate.click mainLi

    expect(setValues.calledOnce).to.equal(true)


  it 'Should NOT call the setValues property when li is clicked and isActive is false', ->
    setValues = sinon.spy()

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      setValues: setValues
      isActive: false
    }

    mainLi = TestUtils.findRenderedDOMComponentWithTag multiSelectOption, 'li'

    TestUtils.Simulate.click mainLi

    expect(setValues.calledOnce).to.equal(false)


  it 'Should NOT call the setValues property when li is clicked and disabled is true', ->
    setValues = sinon.spy()

    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      setValues: setValues
      isActive: true
      disabled: true
    }

    mainLi = TestUtils.findRenderedDOMComponentWithTag multiSelectOption, 'li'

    TestUtils.Simulate.click mainLi

    expect(setValues.calledOnce).to.equal(false)


  it 'Should call the setDefault property when default button is clicked', ->
    setDefault = sinon.spy()
    
    multiSelectOption = TestUtils.renderIntoDocument MultiSelectOption {
      setDefault: setDefault
      isActive: true
      allowDefault: true
      option: {
        isSelected: true
      }
    }

    defaultBtn = TestUtils.findRenderedDOMComponentWithClass multiSelectOption, 'multiselect-default'
    
    TestUtils.Simulate.click defaultBtn

    expect(setDefault.calledOnce).to.equal(true)