ldx-widgets/tests/components/multi_select.coffee

widgets

describe 'MultiSelect', ->
  React = require 'react'
  MultiSelect = React.createFactory require('../../src/components/multi_select')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'
  _ = require 'lodash'

  ValidationContext = require '../../src/context_wrapper'

  options = []
  flatOptions = []

  beforeEach ->
    flatOptions = ['one', 'two', 'three', 'four']
    options = [
      {
        name: 'one'
        someValue: 1
      }
      {
        name: 'two'
        someValue: 2
      }
      {
        name: 'three'
        someValue: 3
      }
      {
        name: 'four'
        someValue: 4
      }
    ]

  #--------------------------------------------------------------------- Default Props
  it 'Should have default props for allowDefault, filter, editPlaceholder, searchPlaceholder, tabIndex', ->
    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: []
    })

    multiSelect = wrapper.getInput()

    defaultProps = multiSelect.props
    expect(defaultProps.allowDefault).to.equal(false)
    expect(defaultProps.filter).to.equal('auto')
    expect(defaultProps.editPlaceholder).to.equal('Edit Items')
    expect(defaultProps.searchPlaceholder).to.equal('Filter Items')
    expect(defaultProps.tabIndex).to.equal(-1)


  #--------------------------------------------------------------------- getInitialState
  it 'Should set combine options and values into selected and notSelected state when passed and array of options objects', ->
    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
    })

    multiSelect = wrapper.getInput()

    {selected, notSelected} = multiSelect.state

    selectedTest = _.isEqual selected, [
      {
        isSelected: true
        isVisible: true
        value: 2
        label: 'two'
      }
      {
        isSelected: true
        isVisible: true
        value: 4
        label: 'four'
      }
    ]

    notSelectedTest = _.isEqual notSelected, [
      {
        isSelected: false
        isVisible: true
        value: 1
        label: 'one'
      }
      {
        isSelected: false
        isVisible: true
        value: 3
        label: 'three'
      }
    ]

    expect(selectedTest).to.equal(true)
    expect(notSelectedTest).to.equal(true)


  it 'Should set combine options and values into selected and notSelected state when passed flat array of options', ->
    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: flatOptions
        values: ['two', 'four']
    })

    multiSelect = wrapper.getInput()

    {selected, notSelected} = multiSelect.state

    selectedTest = _.isEqual selected, [
      {
        isSelected: true
        isVisible: true
        label: 'two'
        value: 'two'
      }
      {
        isSelected: true
        isVisible: true
        label: 'four'
        value: 'four'
      }
    ]

    notSelectedTest = _.isEqual notSelected, [
      {
        isSelected: false
        isVisible: true
        label: 'one'
        value: 'one'
      }
      {
        isSelected: false
        isVisible: true
        label: 'three'
        value: 'three'
      }
    ]

    expect(selectedTest).to.equal(true)
    expect(notSelectedTest).to.equal(true)

  #--------------------------------------------------------------------- Adding and removing
  it 'Should remove a selected option when clicked', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        onRemove: ->
    })

    multiSelect = wrapper.getInput()

    multiSelect.setState
      isActive: true

    options = TestUtils.scryRenderedDOMComponentsWithClass multiSelect, 'multiselect-option'

    TestUtils.Simulate.click options[0]

    {notSelected} = multiSelect.state

    expect(notSelected.length).to.equal(3)

  it 'Should add a not selected option when clicked', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
    })

    multiSelect = wrapper.getInput()

    multiSelect.setState
      isActive: true

    options = TestUtils.scryRenderedDOMComponentsWithClass multiSelect, 'multiselect-option'

    TestUtils.Simulate.click options[3]

    {selected} = multiSelect.state

    expect(selected.length).to.equal(3)


  #--------------------------------------------------------------------- isActive State
  it 'Should become active when clicked', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
    })

    multiSelect = wrapper.getInput()

    container = TestUtils.findRenderedDOMComponentWithClass multiSelect, 'multiselect'

    TestUtils.Simulate.click container

    expect(multiSelect.state.isActive).to.equal(true)


  #--------------------------------------------------------------------- Filtering
  it 'Should show the filter field when the filter prop is true', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        filter: true
    })

    multiSelect = wrapper.getInput()

    multiSelect.setState
      isActive: true

    expect(multiSelect.filterShouldBeShown()).to.equal(true)

    multiSelect.refs.filterField.blur()

  it 'Should show the filter field when the filter prop is auto and the options are more then 4', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: ['one', 'two', 'three', 'four', 'five']
        values: []
        filter: 'auto'
    })

    multiSelect = wrapper.getInput()

    multiSelect.setState
      isActive: true

    expect(multiSelect.filterShouldBeShown()).to.equal(true)

    multiSelect.refs.filterField.blur()


  it 'Should filter the not selected options by label when the user types in the filter field', (done) ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        filter: true
    })

    multiSelect = wrapper.getInput()

    multiSelect.setState
      isActive: true

    multiSelect.refs.filterField.blur()

    searchField = TestUtils.findRenderedDOMComponentWithClass multiSelect, 'search-input'

    TestUtils.Simulate.change searchField, {
      target:
        value: 'one'
    }

    {notSelected} = multiSelect.state

    setTimeout ->
      visibleTest = _.isEqual notSelected, [
        {
          isSelected: false
          isVisible: true
          value: 1
          label: 'one'
        }
        {
          isSelected: false
          isVisible: false
          value: 3
          label: 'three'
        }
      ]

      expect(visibleTest).to.equal(true)
      done()
    , 10

  #--------------------------------------------------------------------- Default
  it 'Should set the default to object with the value of the valueOfDefault prop', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        allowDefault: true
    })

    multiSelect = wrapper.getInput()

    {theDefault, selected} = multiSelect.state

    expect(theDefault).to.equal(selected[0])


  it 'Should show/hide the default buttons based on the allowDefault prop', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        allowDefault: true
    })

    multiSelect = wrapper.getInput()

    defaultButtons = TestUtils.scryRenderedDOMComponentsWithClass multiSelect, 'multiselect-default'

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

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        allowDefault: false
    })

    multiSelect = wrapper.getInput()

    defaultButtons = TestUtils.scryRenderedDOMComponentsWithClass multiSelect, 'multiselect-default'

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


  it 'Should set the default when the default button is clicked', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        allowDefault: true
    })

    multiSelect = wrapper.getInput()

    defaultButtons = TestUtils.scryRenderedDOMComponentsWithClass multiSelect, 'multiselect-default'

    TestUtils.Simulate.click defaultButtons[1]

    {theDefault, selected} = multiSelect.state

    expect(theDefault).to.equal(selected[1])


  it 'Should set the edit button text based on the editPlaceholder prop', ->

    wrapper = TestUtils.renderIntoDocument(ValidationContext {
      factory: MultiSelect
      childProps: 
        options: options
        values: [2,4]
        labelField: 'name'
        valueField: 'someValue'
        valueOfDefault: 2
        editPlaceholder: 'Edit Numbers'
    })

    multiSelect = wrapper.getInput()

    editButton = TestUtils.findRenderedDOMComponentWithClass multiSelect, 'multiselect-edit'

    text = ReactDOM.findDOMNode(editButton).textContent

    expect(text).to.equal('+ Edit Numbers')