ldx-widgets/tests/components/draggable.coffee

widgets

describe 'Draggable', ->
  React = require 'react'
  Draggable = React.createFactory require('../../src/components/draggable')
  TestUtils = require 'react-addons-test-utils'
  ReactDOM = require 'react-dom'
  dispatcher = require('../../src/dispatcher')
  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', ->

    draggable = TestUtils.renderIntoDocument Draggable {}

    defaultProps = draggable.props

    expect(defaultProps.centerOnCursor).to.equal(yes)
    expect(defaultProps.component).to.be.a('function')
    expect(defaultProps.position.x).to.equal(0)
    expect(defaultProps.position.y).to.equal(0)
    expect(defaultProps.height).to.equal(75)
    expect(defaultProps.width).to.equal(300)


  #--------------------------------------------------------------------- CSS Classes
  it 'Should Render the appropriate CSS class when className is passed', ->

    newClass = 'new-class'
    
    draggable = TestUtils.renderIntoDocument Draggable {
        className: newClass
      }

    draggabeClassName = TestUtils.scryRenderedDOMComponentsWithClass draggable, newClass
   
    expect(draggabeClassName.length).to.equal(1)


  #--------------------------------------------------------------------- Calculate
  it 'Should calculate new x and y if centerOnCursor is true', ->

    newClass = 'new-class'
    position = {x: 100, y :200}
    height = 50
    width = 300

    draggable = TestUtils.renderIntoDocument Draggable {
        position: position
        height: height
        width: width
      }
    
    newX = position.x - width/2

    newY = position.y - (height - height/2)

    node = ReactDOM.findDOMNode(draggable)
 
    expect(node.style.cssText).to.equal("-webkit-transform: translateX(#{newX}px) translateY(#{newY}px); height: #{height}px; width: #{width}px;")

  
  it 'Should NOT calculate new x and y if centerOnCursor is false', ->

    newClass = 'new-class'
    position = {x: 100, y :200}
    height = 50
    width = 300

    draggable = TestUtils.renderIntoDocument Draggable {
        centerOnCursor: false
        position: position
        height: height
        width: width
      }
    
    {x, y} = position

    node = ReactDOM.findDOMNode(draggable)
    
    expect(node.style.cssText).to.equal("-webkit-transform: translateX(#{x}px) translateY(#{y}px); height: #{height}px; width: #{width}px;")