ldx-widgets/tests/components/file_input.coffee

widgets

describe 'FileInput', ->
  React = require 'react'
  FileInput = React.createFactory require('../../src/components/file_input')
  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', ->

    fileInput = TestUtils.renderIntoDocument FileInput {}

    defaultProps = fileInput.props

    expect(defaultProps.wrapperClass).to.equal('file-input-wrapper')
    expect(defaultProps.className).to.equal('file-input')
    expect(defaultProps.multiple).to.equal(no)
    expect(defaultProps.chooseFileText).to.equal('Choose file...')
    expect(defaultProps.removeFileText).to.equal('Remove file')
    expect(defaultProps.maxSize).to.equal(1048576)
    expect(defaultProps.disabled).to.equal(no)

    expect(defaultProps.openAlertModal).to.be.a('function')
    expect(defaultProps.wrapperClass).to.be.a('string')
    expect(defaultProps.className).to.be.a('string')
    expect(defaultProps.multiple).to.be.a('boolean')
    expect(defaultProps.chooseFileText).to.be.a('string')
    expect(defaultProps.removeFileText).to.be.a('string')
    expect(defaultProps.name).to.be.a('string')
    expect(defaultProps.maxSize).to.be.a('number')
    expect(defaultProps.disabled).to.be.a('boolean')


  #--------------------------------------------------------------------- CSS Classes
  it 'Should Render the appropriate CSS classes when uploadProgress is defined', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        uploadProgress: {test: 'test'}
        name: 'test'
      }

    wrapperClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-input-wrapper is-uploading'
    overlayClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-overlay is-uploading'

    expect(wrapperClassName.length).to.equal(1)
    expect(overlayClassName.length).to.equal(1)

  it 'Should Render the appropriate CSS classes when uploadProgress is not defined', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    wrapperClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-input-wrapper'
    overlayClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-overlay'

    wrapperLoadingClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-input-wrapper is-uploading'
    overlayLoadingClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-overlay is-uploading'

    expect(wrapperClassName.length).to.equal(1)
    expect(overlayClassName.length).to.equal(1)

    expect(wrapperLoadingClassName.length).to.equal(0)
    expect(overlayLoadingClassName.length).to.equal(0)


  #--------------------------------------------------------------------- File Overlay
  it 'Should Render the File Overlay when disabled is no', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    overlayClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-overlay'

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


  it 'Should NOT Render the File Overlay when disabled is yes', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
        disabled: yes
      }

    overlayClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'file-overlay'

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

  #--------------------------------------------------------------------- Progress Bar
  it 'Should Render the Progress Bar when uploadProgress is defined', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        uploadProgress: {test: 'test'}
        name: 'test'
      }

    progressBarClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'progress-bar'
    

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


  it 'Should NOT Render the Progress Bar when uploadProgress is undefined', ->

    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    progressBarClassName = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'progress-bar'
    

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


  #--------------------------------------------------------------------- Style
  it 'Should Render the input with style display = none if state inputHasFile', ->
   
    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    fileInput.setState
      inputHasFile: true

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.style.display).to.equal('none')


  it 'Should Render the input with style display = block if state inputHasFile is false (default)', ->
   
    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.style.display).to.equal('block')


  #--------------------------------------------------------------------- Remove Button
  it 'Should Render the remove button if state inputHasFile is true', ->
   
    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    fileInput.setState
      inputHasFile: true

    buttons = TestUtils.scryRenderedDOMComponentsWithTag fileInput, 'button'

    expect(buttons.length).to.equal(2)


  it 'Should Render the remove button if props showFileRemove is true', ->
   
    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
        showFileRemove: true
      }

    buttons = TestUtils.scryRenderedDOMComponentsWithTag fileInput, 'button'

    expect(buttons.length).to.equal(2)


  it 'Should NOT Render the remove button if state inputHasFile is false or showFileRemove is false', ->
   
    fileInput = TestUtils.renderIntoDocument FileInput {
        name: 'test'
      }

    buttons = TestUtils.scryRenderedDOMComponentsWithTag fileInput, 'button'

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


  it 'Should Render specific remove file text if removeFileText property is passed and showFileRemove property is true', ->
    
    removeFileText = 'Remove'

    fileInput = TestUtils.renderIntoDocument FileInput {
        showFileRemove: true
        removeFileText: removeFileText
      }

    removeBtn = TestUtils.findRenderedDOMComponentWithClass fileInput, 'remove-file'

    expect(removeBtn.innerText).to.equal(removeFileText)

  it 'Should Render specific remove file text if removeFileText property is passed and inputHasFile state is true', ->
    
    removeFileText = 'Remove'

    fileInput = TestUtils.renderIntoDocument FileInput {
        removeFileText: removeFileText
      }

    fileInput.setState
      inputHasFile: true

    removeBtn = TestUtils.findRenderedDOMComponentWithClass fileInput, 'remove-file'

    expect(removeBtn.innerText).to.equal(removeFileText)

  it 'Should Render specific choose file text if chooseFileText property is passed', ->
    
    chooseFileText = 'Choose'

    fileInput = TestUtils.renderIntoDocument FileInput {
        showFileRemove: true
        chooseFileText: chooseFileText
      }

    chooseBtn = TestUtils.findRenderedDOMComponentWithClass fileInput, 'add-file'

    expect(chooseBtn.innerText).to.equal(chooseFileText)

  it 'Should NOT Render choose file button if hideUpload property is true and inputHasFile state is true', ->
    
    fileInput = TestUtils.renderIntoDocument FileInput {
        hideUpload: true
      }

    fileInput.setState
      inputHasFile: true

    chooseBtn = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'add-file'

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

  it 'Should Render choose file button if hideUpload property is false and inputHasFile state is true', ->
    
    fileInput = TestUtils.renderIntoDocument FileInput {
        hideUpload: false
      }

    fileInput.setState
      inputHasFile: true

    chooseBtn = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'add-file'

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

  it 'Should Render choose file button if hideUpload property is true and inputHasFile state is false', ->
    
    fileInput = TestUtils.renderIntoDocument FileInput {
        hideUpload: true
      }

    fileInput.setState
      inputHasFile: false

    chooseBtn = TestUtils.scryRenderedDOMComponentsWithClass fileInput, 'add-file'

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

  #--------------------------------------------------------------------- Display 
  it 'Should Render a disabled input field if disabled property is true', ->
    fileInput = TestUtils.renderIntoDocument FileInput {
        disabled: true
      }

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.disabled).to.equal(true)

    fileInput = TestUtils.renderIntoDocument FileInput {}

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.disabled).to.equal(false)


  it 'Should Render a multiple input field if multiple property is true', ->
    fileInput = TestUtils.renderIntoDocument FileInput {
        multiple: true
      }

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.multiple).to.equal(true)

    fileInput = TestUtils.renderIntoDocument FileInput {}

    input = TestUtils.findRenderedDOMComponentWithTag fileInput, 'input'

    expect(input.multiple).to.equal(false)