ldx-widgets/tests/components/select_input_custom_options.coffee

widgets

describe 'Select Input Custom Options', ->
  SelectInputCustomOptions = React.createFactory require('../../src/components/select_input_custom_options')
  { DOWN_ARROW, UP_ARROW, TAB, ESCAPE, ENTER } = require '../../src/constants/keyboard'


  spy = sinon.spy()
  chld = null
  cmp = null
  props =
    options: [
      {
        optValue: 123
        label: 'Number one'
      }
      {
        optValue: 4321
        label: 'Number two'
      }
      {
        optValue: 6126
        label: 'Number three'
      }
      {
        optValue: 651
        label: 'Number four'
      }
    ]
    onChange: spy
    labelField: 'label'
    valueField: 'optValue'
    selectText: 'This is the first choice'
    isFilter: yes

  before ->
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()

  beforeEach ->
    spy.reset()

  it 'should render a list of options and filter input', ->
    el = findRenderedDOMComponentWithTag(chld, 'input')
    opts = scryRenderedDOMComponentsWithTag(chld, 'li')
    expect(el).to.be.ok
    expect(opts.length).to.equal(props.options.length)

  it 'should render only options that match an applied filter', ->
    props.filter = 't'
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()
    opts = scryRenderedDOMComponentsWithTag(chld, 'li')
    props.filter = ''
    expect(opts.length).to.equal(2)

  it 'should render the no results text when there is no filter match', ->
    props.filter = 'txasx'
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()
    opts = scryRenderedDOMComponentsWithTag(chld, 'li')
    nor = scryRenderedDOMComponentsWithClass(chld, 'no-results')
    props.filter = ''
    expect(opts.length).to.equal(0)    
    expect(nor.length).to.equal(1)

  it 'should move focus on up/down arrow press', ->
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()
    e =
      preventDefault: ->
      stopPropagation: ->
    {focusedOptionIndex} = chld.state

    # move forward    
    e.keyCode = DOWN_ARROW
    chld.handleKeyDown(e)
    expect(chld.state.focusedOptionIndex).to.equal(focusedOptionIndex + 1)

    # move backwards again
    e.keyCode = UP_ARROW
    chld.handleKeyDown(e)
    expect(chld.state.focusedOptionIndex).to.equal(focusedOptionIndex)

  it 'should NOT move focus to less than zero', ->
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()
    e =
      preventDefault: ->
      stopPropagation: ->
    {focusedOptionIndex} = chld.state
    e.keyCode = UP_ARROW
    chld.handleKeyDown(e)
    expect(chld.state.focusedOptionIndex).to.equal(0)

  it 'should close the overlay on tab or esc', ->
    e =
      preventDefault: ->
      stopPropagation: ->
    e.keyCode = ESCAPE
    chld.handleKeyDown(e)
    expect(chld.context.closeOverlay.calledOnce).to.be.true

    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()

    e.keyCode = TAB
    chld.handleKeyDown(e)
    expect(chld.context.closeOverlay.calledOnce).to.be.true

  it 'should fire onChange when enter pressed on selected option', ->
    cmp = renderIntoDocument ContextWrapper {
      factory: SelectInputCustomOptions
      childProps: props
    }
    chld = cmp.getInput()
    e =
      preventDefault: ->
      stopPropagation: ->
      keyCode: DOWN_ARROW

    # Select the first option
    chld.handleKeyDown(e)

    # Press enter
    e.keyCode = ENTER
    chld.handleKeyDown(e)

    {focusedOptionIndex} = chld.state

    expect(spy.lastCall.args[0]).to.equal(props.options[focusedOptionIndex][props.valueField])
    expect(spy.lastCall.args[1]).to.equal(chld.context.closeOverlay)