ldx-widgets/tests/components/toggle_button.coffee

widgets

describe 'ToggleButton', ->

  React = require 'react'
  ToggleButton = React.createFactory require('../../src/components/toggle_button')
  TestUtils = require 'react-dom/test-utils'
  ReactDOM = require 'react-dom'
  ValidationContext = require '../../src/context_wrapper'

  props = {}
  setFormDataSpy = sinon.spy()

  beforeEach ->
    props = 
      isInPopover: no
      options: [{}, {}, {}, {}]
      useTabs: yes
      selected: no
      setFormData: setFormDataSpy
      option:
        disabled: no
        title: 'this is a title'
        label: 'Label'
        tabId: '1'
        validation: null


  it 'Should add the invalid class when there are errors and forceShowAllErrors is true', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      error: {}
      forceShowAllErrors: yes
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button-wrapper invalid"

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


  it 'Should NOT add the invalid class when there are errors and forceShowAllErrors is false', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      error: {}
      forceShowAllErrors: no
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button-wrapper invalid"

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


  it 'Should NOT add the invalid class when there are NO errors', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      error: null
      forceShowAllErrors: yes
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button-wrapper invalid"

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


  it 'Should call toggleValidationError on mouse over/out when there are errors visible', ->

    props.selected = no
    props.showErrors = yes

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      error: {}
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    errorIcon = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "field-errors-show"

    TestUtils.Simulate.mouseOver errorIcon[0]

    expect(wrapper.toggleValidationError.lastCall.args[0].groupId).to.equal(props.option.tabId)
    expect(wrapper.toggleValidationError.lastCall.args[0].status).to.equal(yes)

    TestUtils.Simulate.mouseOut errorIcon[0]

    expect(wrapper.toggleValidationError.lastCall.args[0].groupId).to.equal(props.option.tabId)
    expect(wrapper.toggleValidationError.lastCall.args[0].status).to.equal(no)

  
  #--------------------------------------------------------------------- Render
  it 'Should Render the appropriate CSS class when useTabs property is true', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-tab"
    toggleBtn = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button"

    expect(toggleTab.length).to.equal(1)
    expect(toggleBtn.length).to.equal(0)


  it 'Should Render the appropriate width style when useTabs property is true', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button-wrapper"

    expect(toggleTab[0].style.width).to.equal("#{100/props.options.length}%")


  it 'Should Render the appropriate CSS class when useTabs property is false', ->
    props.useTabs = no

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-tab"
    toggleBtn = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "toggle-button"

    expect(toggleTab.length).to.equal(0)
    expect(toggleBtn.length).to.equal(1)


  it 'Should Render the is-selected CSS class when selected property is true', ->
    props.selected = yes

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleBtn = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "is-selected"
    

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


  it 'Should NOT Render the is-selected CSS class when selected property is false', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
  
    toggleBtn = TestUtils.scryRenderedDOMComponentsWithClass toggleButton, "is-selected"
    

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


  it 'Should disable the button when option.disabled is true', ->
    props.option.disabled = yes

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass wrapper, "toggle-tab"
  
    expect(toggleTab[0].disabled).to.equal(yes)


  it 'Should set the tool tip on the button when option.title is passed', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleTab = TestUtils.scryRenderedDOMComponentsWithClass wrapper, "toggle-tab"
  
    expect(toggleTab[0].title).to.equal(props.option.title)

  # --------------------------------------------------------------------- onClick
  it 'Should call the props.setFormData with option.value when button is clicked', ->

    wrapper = TestUtils.renderIntoDocument ValidationContext {
      factory: ToggleButton
      childProps: props
    }

    toggleButton = do wrapper.getInput
    
    mainBtn = TestUtils.findRenderedDOMComponentWithTag toggleButton, 'button'

    TestUtils.Simulate.click mainBtn, {}

    expect(setFormDataSpy.lastCall.args[0]).to.equal(props.option.tabId)