ldx-widgets/tests/components/dialogue.coffee

widgets

describe 'Dialogue', ->
  React = require 'react'
  Dialogue = React.createFactory require('../../src/components/dialogue')
  TestUtils = require 'react-dom/test-utils'
  ReactDOM = require 'react-dom'
  dispatcher = require('../../src/dispatcher')
  ValidationContext = require '../../src/context_wrapper'
  {StyleSheet, css} = require 'aphrodite'  
  
  styles = StyleSheet.create
    titleWrap:
      position: 'static'
      margin: '0'
      fontSize: '18px'
      height: '30px'
      lineHeight: '30px'
      padding: '20px'
    icon:
      display: 'inline-block'
      position: 'relative'
      height: '30px'
      width: '30px'
      top: '4px'
    title:
      display: 'inline-block'
      height: '30px'
      marginLeft: '20px'
    message:
      fontSize: '13px'
      margin: '20px 20px 25px 20px'
      color: 'rgb(115,115,115)' 
    indent:
      margin: '0 60px 25px 72px'

  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', ->

    dialogue = TestUtils.renderIntoDocument Dialogue {}

    defaultProps = dialogue.props

    expect(defaultProps.message).to.equal('')
    expect(defaultProps.confirmText).to.equal('OK')
    expect(defaultProps.cancelText).to.equal('Cancel')
    expect(defaultProps.confirmCallback).to.be.a('function')
    expect(defaultProps.cancelCallback).to.be.a('function')
    expect(defaultProps.width).to.equal(400)
    expect(defaultProps.lightBackdrop).to.equal(no)
  

  it 'Should set an intial top state equal to negative height', ->
    
    dialogue = TestUtils.renderIntoDocument Dialogue {
        height: 366
      }
   
    expect(dialogue.state.top).to.equal(-366)
  

  it 'Should update the top state to 0 on the next event loop tick on mount', (done) ->
    
    dialogue = TestUtils.renderIntoDocument Dialogue {
        height: 366
      }
    
    setTimeout ->
      expect(dialogue.state.top).to.equal(0)
      done()
    , 1

  #--------------------------------------------------------------------- CSS Classes
  it 'Should Render the appropriate CSS class when lightBackdrop is true', ->
    
    dialogue = TestUtils.renderIntoDocument Dialogue {
        lightBackdrop: yes
      }
   
    dialogueClass = TestUtils.scryRenderedDOMComponentsWithClass dialogue, 'dialogue-container'
    lightBackdropClass = TestUtils.scryRenderedDOMComponentsWithClass dialogue, 'light-backdrop'
   
    expect(dialogueClass.length).to.equal(1)
    expect(lightBackdropClass.length).to.equal(1)


  it 'Should Render the appropriate CSS class when lightBackdrop is false', ->
    
    dialogue = TestUtils.renderIntoDocument Dialogue {}

    dialogueClass = TestUtils.scryRenderedDOMComponentsWithClass dialogue, 'dialogue-container'
    lightBackdropClass = TestUtils.scryRenderedDOMComponentsWithClass dialogue, 'light-backdrop'
   
    expect(dialogueClass.length).to.equal(1)
    expect(lightBackdropClass.length).to.equal(0)


  #--------------------------------------------------------------------- Methods called
  # These need a fix from react-transition group, if we get it, then they can be uncommented

  it 'Should set Confirm button text to the confirmText property', ->

    text = 'Confirm Text'

    dialogue = TestUtils.renderIntoDocument Dialogue {
        confirmText: text
      }

    okBtn = TestUtils.findRenderedDOMComponentWithClass dialogue, 'okay-btn'

    expect(okBtn.innerHTML).to.equal(text)


  it 'Should set Confirm button text to the confirmText property', ->

    text = 'Cancel Text'

    dialogue = TestUtils.renderIntoDocument Dialogue {
        cancelText: text
      }

    cancelBtn = TestUtils.findRenderedDOMComponentWithClass dialogue, 'cancel-btn'

    expect(cancelBtn.innerHTML).to.equal(text)


  it 'Should set Message to the message property', ->

    cssMessage = css(styles.message)

    message = 'New Message'

    dialogue = TestUtils.renderIntoDocument Dialogue {
        message: message
      }

    messageDiv = TestUtils.findRenderedDOMComponentWithClass dialogue, cssMessage

    expect(messageDiv.innerHTML).to.equal(message)