ldx-widgets/tests/components/input_type_ahead.coffee

widgets

describe 'InputTypeAhead', ->
  React = require 'react'
  InputTypeAhead = React.createFactory require('../../src/components/input_type_ahead')
  SearchInput = React.createFactory require('../../src/components/search_input')
  TextInput = React.createFactory require('../../src/components/text_input')
  _ = require 'lodash'
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'

   
   
  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    inputTypeAhead = TestUtils.renderIntoDocument InputTypeAhead {
      onSearch: ->
      onChange: ->
    }

        
    defaultProps = inputTypeAhead.props
    expect(defaultProps.className).to.equal('')
    expect(defaultProps.minLength).to.equal(1)
    expect(defaultProps.searchInterval).to.equal(300)
    expect(defaultProps.maxContainerHeight).to.equal(175)

  #--------------------------------------------------------------------- Text Change
  it 'Should change the value of the input when the user types', ->
    onChange = sinon.spy()

    inputTypeAhead = TestUtils.renderIntoDocument InputTypeAhead {
        onChange: onChange
        onSearch: ->
        value: 'new value'
      }
   
    input = TestUtils.findRenderedDOMComponentWithTag inputTypeAhead, 'input'

    inputValue = ReactDOM.findDOMNode(input).value


    expect(inputValue).to.equal('new value')


  it 'Should call the onChange when text is entered', ->
    onChange = sinon.spy()
    
    inputTypeAhead = TestUtils.renderIntoDocument InputTypeAhead {
        onChange: onChange
        onSearch: ->
        value: 'new value'
      }
   
    inputText = TestUtils.findRenderedDOMComponentWithTag inputTypeAhead, 'input'

    TestUtils.Simulate.change inputText

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

  #--------------------------------------------------------------------- Display Div
  it 'Should display No Results if results array is empty', ->

    onResultSelect = sinon.spy()
    func = sinon.spy()

    inputTypeAhead = TestUtils.renderIntoDocument InputTypeAhead {
      results: []
      showNoResults: true
      onSearch: ->
      onChange: ->
      resultConfig: {
        height: 20
        component: func
        onResultSelect: onResultSelect
      }
    }

    inputTypeAhead.setState {
      loading: false
      showResults: true
    }
 
    noResultsDiv = TestUtils.scryRenderedDOMComponentsWithClass inputTypeAhead, 'no-results'

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

  it 'Should display Results if results array is not empty', ->

    onResultSelect = sinon.spy()
    func = sinon.spy()

    inputTypeAhead = TestUtils.renderIntoDocument InputTypeAhead {
      results: ["one", "two", "three"]
      showNoResults: false
      onSearch: ->
      onChange: ->
      resultConfig: {
        height: 20
        component: func
        onResultSelect: onResultSelect
      }
    }

    inputTypeAhead.setState {
      loading: false
      showResults: true
    }
 
    noResultsDiv = TestUtils.scryRenderedDOMComponentsWithClass inputTypeAhead, 'no-results'

    resultsUl = TestUtils.scryRenderedDOMComponentsWithTag inputTypeAhead, 'ul'

    expect(noResultsDiv.length).to.equal(0)
    expect(resultsUl.length).to.equal(1)