ldx-widgets/tests/components/confirm_save.coffee

widgets

describe 'ConfirmSave', ->
  React = require 'react'
  ConfirmSave = React.createFactory require('../../src/components/confirm_save')
  TestUtils = require 'react-dom/test-utils'
  ReactDOM = require 'react-dom'
  dispatcher = require('../../src/dispatcher')
  Spinner = React.createFactory require('../../src/components/spinner')
  ValidationContext = require '../../src/context_wrapper'


  afterEach -> dispatcher.dispatch 'clear-all'

  
  ###
  
  Note About ValidationContext

  The input validation uses context to gain access to the app level validation methods
  Because context is only present when the component is a child of the application, it is not present in tests
  The ValidationContext component, simply wraps the input component, and adds the validation context methods so they are present in the tests
  
  ###

  #--------------------------------------------------------------------- Default Props
  it 'Should have default props', ->

    confirmSave = TestUtils.renderIntoDocument ConfirmSave {}
   
    defaultProps = confirmSave.props

    expect(defaultProps.dismissBtnText).to.equal('Dismiss')
    expect(defaultProps.scaleCheckmark).to.equal(1)
    expect(defaultProps.animationDuration).to.equal(800)
    expect(defaultProps.vTranslateCheckmark).to.equal(0)
    expect(defaultProps.saveMessage).to.equal('')

  #--------------------------------------------------------------------- Spinner
  it 'Should Render a spinner when saveState is pending', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveState: 'pending'
      }

    saveSpinner = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'spinner-wrapper'

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


  it 'Should not Render a spinner when saveState is complete', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveState: 'complete'
      }

    saveSpinner = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'spinner-wrapper'

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


  it 'Should not Render a spinner when saveState is failed', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveState: 'failed'
      }

    saveSpinner = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'spinner-wrapper'

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

  #--------------------------------------------------------------------- CSS Classes
  it 'Should Render the appropriate CSS class when saveMessage', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveMessage: 'message'
      }


    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check-message'
    hasMessageClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'has-message'

    expect(checkClassName.length).to.equal(1)
    expect(hasMessageClassName.length).to.equal(1)


  it 'Should Render the appropriate CSS class when saveMessage and saveState is failed', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveMessage: 'message'
        saveState: 'failed'
      }

    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check-message failed'

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


  it 'Should Render the appropriate CSS class when saveMessage and saveState is warning', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveMessage: 'message'
        saveState: 'warning'
      }

    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check-message warning'

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


  it 'Should Render the appropriate CSS class when no saveMessage', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {}

    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check'

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


  it 'Should Render the appropriate CSS class when no saveMessage and saveState is failed', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveState: 'failed'
      }

    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check failed'

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


  it 'Should Render the appropriate CSS class when no saveMessage and saveState is warning', ->
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
        saveState: 'warning'
      }

    checkClassName = TestUtils.scryRenderedDOMComponentsWithClass confirmSave, 'confirm-check warning'

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


  it 'Should call done method after animation is complete if saveState is complete', ->

    done = sinon.spy()
    fail = sinon.spy()


    confirmSave = TestUtils.renderIntoDocument ConfirmSave
      animationDuration: 1
      saveState: 'complete'
      done: done
 
    confirmSave.animateCheck()

    expect(done.called).to.equal(true)
    expect(fail.called).to.equal(false)


  it 'Should call fail method after animation is complete if saveState is not complete', ->

    done = sinon.spy()
    fail = sinon.spy()

    confirmSave = TestUtils.renderIntoDocument ConfirmSave
      animationDuration: 1
      saveState: 'failed'
      fail: fail
      done: done
 
    confirmSave.animateCheck()

    expect(fail.called).to.equal(true)
    expect(done.called).to.equal(false)


  it 'Should Render the dismiss text if dismissBtnText property is passed and saveMessage is true', ->

    dismissBtnText = 'New Dismiss Text'
    
    confirmSave = TestUtils.renderIntoDocument ConfirmSave {
      dismissBtnText: dismissBtnText
      saveMessage: true
    }

    button = TestUtils.findRenderedDOMComponentWithTag confirmSave, 'button'

    expect(button.innerText).to.equal(dismissBtnText)