ldx-widgets/tests/components/text_input.coffee

widgets

describe 'TextInput', ->
  React = require 'react'
  TextInput = React.createFactory require('../../src/components/text_input')
  Spinner = React.createFactory require('../../src/components/spinner')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'

  spinner = null

  beforeEach ->
    spinner = TestUtils.renderIntoDocument(Spinner({}))
    spinner.spinner

  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    inputText = TestUtils.renderIntoDocument TextInput({})
    
    defaultProps = inputText.props
    expect(defaultProps.type).to.equal('text')
    expect(defaultProps.loading).to.equal(no)
    expect(defaultProps.className).to.equal('text-input')

  #--------------------------------------------------------------------- Spinner
  it 'Should show a spinner when the loading prop is true', ->

    inputText = TestUtils.renderIntoDocument TextInput {
        loading: true
      }

    inputSpinner = TestUtils.scryRenderedDOMComponentsWithClass inputText, 'input-spinner'

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

  #--------------------------------------------------------------------- Validation
  it 'Should show an error when the validationErrors has length and loading prop is false', ->
    
    inputText = TestUtils.renderIntoDocument TextInput {
        loading: false
        validation: [
          {
            valid: false
            error: 'Validation Error Message'
          }
        ]
      }

    fieldErrors = TestUtils.scryRenderedDOMComponentsWithClass inputText, 'field-errors-show'

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

  #--------------------------------------------------------------------- Delayed action
  it 'Should fire a delayed action after a set number of milliseconds', (cb) ->

    actionFn = sinon.spy()

    inputText = TestUtils.renderIntoDocument TextInput {
      delayedActionOnChange:
        action: actionFn
        interval: 10
    }

    expect(typeof inputText.props.delayedActionOnChange.action).to.equal('function')
    expect(typeof inputText.props.delayedActionOnChange.interval).to.equal('number')

    # Fire the action to make sure it's executing
    inputText.fireDelayedAction()

    setTimeout ->
      expect(actionFn.calledOnce).to.equal(true)
      cb()
    , 20

  #--------------------------------------------------------------------- Text change
  it 'Should change the value of the input when the user types', ->

    inputText = TestUtils.renderIntoDocument TextInput {
      value: 'new value'
    }

    input = TestUtils.findRenderedDOMComponentWithClass inputText, 'text-input'

    inputValue = ReactDOM.findDOMNode(input).value

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

  #--------------------------------------------------------------------- onEnterKey function
  it 'Should fire a method that is bound, when the enter key is pressed', (cb) ->

    onEnterFn = sinon.spy()

    inputText = TestUtils.renderIntoDocument TextInput {
      onEnterKey: onEnterFn
      value: 'test'
    }

    input = TestUtils.findRenderedDOMComponentWithClass inputText, 'text-input'

    TestUtils.Simulate.keyUp input, {
      key: 'Enter'
      type: 'keyup'
    }

    setTimeout ->
      expect(onEnterFn.calledOnce).to.equal(true)
      cb()
    , 10