ldx-widgets/tests/components/checkbox_input.coffee

widgets

describe 'CheckboxInput', ->
  React = require 'react'
  CheckboxInput = React.createFactory require('../../src/components/checkbox_input')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'
  dispatcher = require('../../src/dispatcher')
  ValidationContext = require '../../src/context_wrapper'


  afterEach -> dispatcher.dispatch 'clear-all'

  
  ###
  
  Note About ValidationContext

  The input validation uses context to gain access to the app level validation methods
  Because context is only present when the component is a child of the application, it is not present in tests
  The ValidationContext component, simply wraps the input component, and adds the validation context methods so they are present in the tests
  
  ###

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

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {}

    defaultProps = checkboxInput.props

    expect(defaultProps.className).to.equal('checkbox-input')
    expect(defaultProps.disabled).to.equal(no)
    

  #--------------------------------------------------------------------- Additional Props
  it 'Should Render with appropriate tabIndex if the tabIndex property is passed', ->

    index = 10

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        tabIndex: index
      }

    CheckboxInputEl = ReactDOM.findDOMNode(checkboxInput)
    
    expect(+CheckboxInputEl.getAttribute('tabIndex')).to.equal(index)


  it 'Should Render with appropriate id if the id property is passed', ->

    id = 1

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        id: id
      }

    CheckboxInputEl = ReactDOM.findDOMNode(checkboxInput)
    
    expect(+CheckboxInputEl.getAttribute('id')).to.equal(id)


  it 'Should Render with appropriate label if the wrapperLabel property is passed', ->

    newLabel = 'Test New Label'

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        wrapperLabel: newLabel
      }

    labelText = TestUtils.findRenderedDOMComponentWithTag checkboxInput, 'span'
    
    expect(labelText.innerText).to.equal(newLabel)


  it 'Should Render with appropriate css class if the wrapperLabel property is passed', ->

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        wrapperLabel: 'New Label'
      }

    CheckboxInputEl = ReactDOM.findDOMNode(checkboxInput)

    expect(CheckboxInputEl.getAttribute('class')).to.equal('checkbox-input-label')


  it 'Should NOT Render a label if the wrapperLabel property is null', ->

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        wrapperLabel: null
        onChange: ->
      }
    
    CheckboxInputEl = ReactDOM.findDOMNode(checkboxInput)

    expect(CheckboxInputEl.getAttribute('class')).to.not.equal('checkbox-input-label')


  it 'Should Render a checked checkbox when the checked property is true', ->

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        checked: true
        onChange: ->
      }
    
    checkbox = TestUtils.findRenderedDOMComponentWithTag checkboxInput, 'input'

    expect(checkbox.checked).to.equal(true)


  it 'Should Render a disabled checkbox when the disabled property is true', ->

    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        disabled: true
        onChange: ->
      }
    
    checkbox = TestUtils.findRenderedDOMComponentWithTag checkboxInput, 'input'

    expect(checkbox.disabled).to.equal(true)


  


   it 'Should call the onChange after a change event', ->
    onChange = sinon.spy()


    checkboxInput = TestUtils.renderIntoDocument CheckboxInput {
        onChange: onChange
      }
    
    checkbox = TestUtils.findRenderedDOMComponentWithTag checkboxInput, 'input'

    TestUtils.Simulate.change checkbox

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