ldx-widgets/tests/components/chevron.coffee

widgets

describe 'Chevron', ->
  React = require 'react'
  Chevron = React.createFactory require('../../src/components/chevron')
  isEqual = require 'lodash/isEqual'
  TestUtils = require 'react-dom/test-utils'

   
  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->
    chevron = TestUtils.renderIntoDocument Chevron({})
    
    defaultProps = chevron.props
    expect(defaultProps.positionClass).to.equal(null)
    expect(defaultProps.invertOnClick).to.equal(no)
    expect(defaultProps.isInverted).to.equal(no)
    expect(defaultProps.defaultOrientation).to.equal('down')
    expect(defaultProps.onClick).to.be.a('function')
    expect(defaultProps.animationDuration).to.equal(200)


  #--------------------------------------------------------------------- Collpased State
  it 'Should Render in the inverted state when isInverted is true', ->

    chevron = TestUtils.renderIntoDocument Chevron {
      isInverted: yes
    }


    expect(chevron.state).to.equal(chevron.inverted)


  it 'Should Render in the default state when isInverted is false', ->

    chevron = TestUtils.renderIntoDocument Chevron {
      isInverted: no
    }

    expect(chevron.state).to.equal(chevron.default)


  #--------------------------------------------------------------------- Orientation
  it 'Should Render with appropriate css class when defaultOrientation is passed', ->

    orientation = 'left'

    chevron = TestUtils.renderIntoDocument Chevron {
      defaultOrientation: orientation
    }

    el = TestUtils.findRenderedDOMComponentWithTag chevron, 'div'

    
    
    expect(el.className).to.contain(orientation)




  #--------------------------------------------------------------------- Click handling
  it 'Should call the onClick prop when the clicked', ->
    onClick = sinon.spy()

    chevron = TestUtils.renderIntoDocument Chevron {
      onClick: onClick
    }

    el = TestUtils.findRenderedDOMComponentWithTag chevron, 'div'

    TestUtils.Simulate.click el, {}

    expect(onClick.calledOnce).to.equal(true)


  it 'Should change inverted state when clicked and invertOnClick is on', (done) ->
    onClick = sinon.spy()

    chevron = TestUtils.renderIntoDocument Chevron {
      onClick: onClick
      invertOnClick: yes
      animationDuration: 20
    }

    el = TestUtils.findRenderedDOMComponentWithTag chevron, 'div'

    TestUtils.Simulate.click el, {}

    setTimeout ->
      stateTest = isEqual chevron.state, chevron.inverted
      expect(stateTest).to.equal(true)
      done()
    , 100


  it 'Should NOT change inverted state when clicked and invertOnClick is off', (done) ->
    onClick = sinon.spy()

    chevron = TestUtils.renderIntoDocument Chevron {
      onClick: onClick
      invertOnClick: no
      animationDuration: 20
    }

    el = TestUtils.findRenderedDOMComponentWithTag chevron, 'div'

    TestUtils.Simulate.click el, {}

    setTimeout ->
      stateTest = isEqual chevron.state, chevron.default
      expect(stateTest).to.equal(true)
      done()
    , 40