ldx-widgets/tests/components/grid_form_input.coffee

widgets

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

  ###
  
  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', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        value: ''
    })

    gridFormInput = wrapper.getInput()
        
    defaultProps = gridFormInput.props
    expect(defaultProps.type).to.equal('text')
    expect(defaultProps.labelColumnClass).to.equal('col-3-12')
    expect(defaultProps.inputColumnClass).to.equal('col-9-12')
    expect(defaultProps.className).to.equal('grid grid-pad')
    expect(defaultProps.fullRow).to.equal(yes)
    expect(defaultProps.formLabel).to.equal(null)
    expect(defaultProps.children).to.be.a('array')

  #--------------------------------------------------------------------- Display 
  it 'Should display a form label for the input field if formLabel has value', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        value: ''
        formLabel: 'Test Label'
    })

    label = TestUtils.scryRenderedDOMComponentsWithClass wrapper, 'form-label'
   
    expect(label.length).to.equal(1)

  it 'Should not display a form label for the input field if formLabel has no value', ->
    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        value: ''
    })

    label = TestUtils.scryRenderedDOMComponentsWithClass wrapper, 'form-label'
   
    expect(label.length).to.equal(0)


  it 'Should display a red asterisk next to the form label if formLabel has value and isFieldRequired is true', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        formLabel: 'Test Label'
        isFieldRequired: true
    })
    
    isRequired = TestUtils.scryRenderedDOMComponentsWithClass wrapper, 'form-label is-required'
   
    expect(isRequired.length).to.equal(1)

  it 'Should display single input and not a full row if fullRow is false', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        value: ''
        fullRow: false
    })
    
    fullRow = TestUtils.scryRenderedDOMComponentsWithClass wrapper, 'grid grid-pad'
    singleInputField = TestUtils.scryRenderedDOMComponentsWithClass wrapper, 'col-9-12'
    
    expect(fullRow.length).to.equal(0)
    expect(singleInputField.length).to.equal(1)

  it 'Should display an input field with type equal to text', ->
    onChange = sinon.spy()

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        type: 'text'
        value: 'test'
        onChange: onChange
    })

    input = TestUtils.findRenderedDOMComponentWithTag wrapper, 'input'

    inputField = ReactDOM.findDOMNode(input)

    expect(inputField.type).to.equal('text')

    
  it 'Should display a select field', ->
    onChange = sinon.spy()

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: GridFormInput
      childProps: 
        type: 'select'
        value: 'test'
        onChange: onChange
        options: [
          {
            name: 'one'
            someValue: 1
          }
          {
            name: 'two'
            someValue: 2
          }
        ]
    })

    node = wrapper.getInputEl()
    selectField = node.getElementsByTagName('select')

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