ldx-widgets/tests/components/search_input.coffee

widgets

describe 'SearchInput', ->
  React = require 'react'
  SearchInput = React.createFactory require('../../src/components/search_input')
  TestUtils = require 'react-addons-test-utils'
  {findDOMNode} = require 'react-dom'
  
  
  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {}
    
    defaultProps = searchInput.props
    expect(defaultProps.wrapClass).to.equal('search-input-wrap')
    expect(defaultProps.height).to.equal(28)
    expect(defaultProps.width).to.equal(260)
    expect(defaultProps.changeDelay).to.equal(0)
    expect(defaultProps.placeholder).to.equal('search')
    expect(defaultProps.term).to.equal('')
    expect(defaultProps.focusOnMount).to.equal(no)
    expect(typeof defaultProps.handleChange).to.equal('function')


  #---------------------------------------------------------------------- Props
  it 'Should apply wrap class to wrapper div', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        wrapClass: 'test-class'
      }

    container = TestUtils.scryRenderedDOMComponentsWithClass searchInput, 'test-class'

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

  it 'Should set the width and height as style props on the input', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        height: 8
        width: 88
        wrapClass: 'test-class'
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'test-class'

    {height,width} = input.style

    expect(height).to.equal('8px')
    expect(width).to.equal('88px')

  it 'Should set the placeholder', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        placeholder: 'test'
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-input'

    placeholder = input.getAttribute('placeholder')

    expect(placeholder).to.equal('test')


  it 'Should set the input to the term prop', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        term: 'test'
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-input'
    input = findDOMNode input
    
    TestUtils.Simulate.change input,
      target:
        value: 'test'

    expect(input.value).to.equal('test')


  it 'Should call the handleChange prop with the entered search text on change events', (done) ->
    handleChange = sinon.spy()

    searchInput = TestUtils.renderIntoDocument SearchInput {
        handleChange: handleChange
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-input'

    TestUtils.Simulate.change input, {
      target:
        value: 'test'
    }

    setTimeout ->
      expect(handleChange.calledOnce).to.equal(true)
      expect(handleChange.calledWith('test')).to.equal(true)
      done()
    , 10

  
  #---------------------------------------------------------------------- Search Clearing
  it 'Should NOT show the search clear button when NO text is entered', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        term: ''
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-input'

    searchClear = TestUtils.scryRenderedDOMComponentsWithClass searchInput, 'search-clear'

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

  it 'Should show the search clear button when text is entered', ->
    searchInput = TestUtils.renderIntoDocument SearchInput {
        term: 'test'
        defaultTerm: 'test'
      }

    searchClear = TestUtils.scryRenderedDOMComponentsWithClass searchInput, 'search-clear'

    expect(searchClear.length).to.be.above(0)

  it 'Should clear the search field and call handleChange with an empty string when search clear button is clicked', ->
    handleChange = sinon.spy()

    searchInput = TestUtils.renderIntoDocument SearchInput {
        handleChange: handleChange
        term: 'test'
        defaultTerm: 'test'
      }

    input = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-input'

    searchClear = TestUtils.findRenderedDOMComponentWithClass searchInput, 'search-clear'

    TestUtils.Simulate.click searchClear

    expect(handleChange.calledOnce).to.equal(true)
    expect(handleChange.calledWith('')).to.equal(true)