ldx-widgets/tests/components/modal.coffee

widgets

describe 'Modal', ->
  React = require 'react'
  Modal = React.createFactory require('../../src/components/modal')
  createClass = require 'create-react-class'
  
  {div} = require 'react-dom-factories'

  props = {}
  child = null
  closeSpy = sinon.spy()
  onCloseSpy = sinon.spy()
  onSaveCompleteSpy = sinon.spy()

  beforeEach ->

    childClass = createClass
      render: -> div {className: 'child'}
      
    child = React.createFactory(childClass)

    closeSpy.reset()
    onCloseSpy.reset()
    onSaveCompleteSpy.reset()

    props = 
      close: closeSpy
      onClose: onCloseSpy
      onSaveComplete: onSaveCompleteSpy
      title: 'Modal Title'

  it 'Should render a div with the default .modal className', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'div')[0]

    expect(el).to.exist
    expect(el.className.search('modal')).to.be.above(-1)


  it 'Should render a header with the .header className', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'header')[0]

    expect(el).to.exist
    expect(el.className.search('header')).to.be.above(-1)

  
  it 'Should render a header with the passed title', ->

    props.title = 'Modal Title'

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'span')[0]

    expect(el.innerText).to.equal(props.title)


  it 'Should render a header with the passed title', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'span')[0]

    expect(el.innerText).to.equal(props.title)

  it 'Should render a close button by default', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'button')[0]

    expect(el.innerText).to.equal('Cancel')


  it 'Should render the close button with props.closeBtnText', ->

    props.closeBtnText = 'Done'

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'button')[0]

    expect(el.innerText).to.equal('Done')


  it 'Should call props.close when the close button is clicked', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'button')[0]

    Simulate.click el

    expect(props.close.called).to.equal(yes)


  it 'Should NOT call props.close when the close button is clicked and there are unsaved changes', ->

    props.unSavedChanges = yes

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'button')[0]

    Simulate.click el

    expect(props.close.called).to.equal(no)


  it 'Should call props.onClose when the close button is clicked', ->

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithTag(modal, 'button')[0]

    Simulate.click el

    expect(props.onClose.called).to.equal(yes)


  it 'Should render props.buttons as passed', ->

    props.buttons = [
      {
        name: 'Save'
        handler: sinon.spy()
      }
    ]

    modal = renderIntoDocument Modal props

    btns = scryRenderedDOMComponentsWithTag(modal, 'button')

    expect(btns.length).to.equal(2)
    expect(btns[1].innerText).to.equal('Save')


  it 'Should call button.handler when button is click', ->

    props.buttons = [
      {
        name: 'Save'
        handler: sinon.spy()
      }
    ]

    modal = renderIntoDocument Modal props

    btn = scryRenderedDOMComponentsWithTag(modal, 'button')[1]

    Simulate.click btn

    expect(props.buttons[0].handler.called).to.equal(yes)


  it 'Should disable a button when button.disabled is true', ->

    props.buttons = [
      {
        name: 'Save'
        handler: sinon.spy()
        disabled: yes
      }
    ]

    modal = renderIntoDocument Modal props

    btn = scryRenderedDOMComponentsWithTag(modal, 'button')[1]

    Simulate.click btn

    expect(props.buttons[0].disabled).to.equal(yes)


  it 'Should not fail if button.handler on the child element is undefined', ->

    props.buttons = [
      {
        name: 'Save'
        handler: sinon.spy()
      }
    ]

    modal = renderIntoDocument Modal props

    btn = scryRenderedDOMComponentsWithTag(modal, 'button')[1]

    Simulate.click btn

    expect(btn).to.exist


  it 'Should render the passed children', ->

    modal = renderIntoDocument Modal(props, child())

    el = scryRenderedDOMComponentsWithClass(modal, 'child')[0]

    expect(el).to.exist


  it 'Should show the confirm save overlay when there is a saveState', ->

    props.saveState = 'pending'

    modal = renderIntoDocument Modal props

    el = scryRenderedDOMComponentsWithClass(modal, 'confirm-save-wrap')[0]

    expect(el).to.exist



  it 'Should show the spinner instead of the children if loading is true', ->

    props.loading = yes

    modal = renderIntoDocument Modal(props, child())

    el = scryRenderedDOMComponentsWithClass(modal, 'child')[0]
    loader = scryRenderedDOMComponentsWithClass(modal, 'spinner-wrapper')[0]

    expect(el).to.not.exist
    expect(loader).to.exist
  

  it 'Should call @props.onSaveComplete and NOT call @props.close when saveComplete is called and closeAfterSave is false', ->

    props.closeAfterSave = no

    modal = renderIntoDocument Modal(props, child())

    modal.saveComplete()

    expect(closeSpy.called).to.equal(no)
    expect(onSaveCompleteSpy.called).to.equal(yes)