react-ions/test/Toggle.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import TestUtils from 'react-dom/test-utils'
import { shallow, mount } from 'enzyme'
import Toggle from '../src/components/Toggle/Toggle'

describe('Toggle', () => {
  let wrapper

  it('should shallow render itself', () => {
    wrapper = shallow(<Toggle value={false} label='Test label' />)

    expect(wrapper.find('div')).to.have.length(4)
    expect(wrapper.find('label')).to.have.length(1)

    expect(wrapper.hasClass('toggle-red')).to.be.false
    expect(wrapper.hasClass('toggle-component')).to.be.true
    expect(wrapper.childAt(1).hasClass('toggle-wrapper')).to.be.true
    expect(wrapper.childAt(1).childAt(0).hasClass('outer')).to.be.true
    expect(wrapper.childAt(1).childAt(1).hasClass('inner')).to.be.true
    expect(wrapper.childAt(1).childAt(0).hasClass('on')).to.be.false
    expect(wrapper.childAt(1).childAt(1).hasClass('on')).to.be.false
  })

  it('should be disabled', () => {
    wrapper = shallow(<Toggle value={false} label='Test label' disabled={true} />)
    expect(wrapper.hasClass('toggle-component')).to.be.true
    expect(wrapper.hasClass('toggle-disabled')).to.be.true
  })

  it('should be true', () => {
    wrapper = shallow(<Toggle value={true} label='Test label' />)

    expect(wrapper.childAt(1).childAt(0).hasClass('on')).to.be.true
    expect(wrapper.childAt(1).childAt(1).hasClass('on')).to.be.true
  })

  it('should have an extra class', () => {
    wrapper = shallow(<Toggle optClass='toggle-red' />)

    expect(wrapper.hasClass('toggle-red')).to.be.true
  })

  it('should call changeCallback function', () => {
    const spy = sinon.spy()

    wrapper = mount(<Toggle value={false} changeCallback={spy} />)
    wrapper.childAt(0).simulate('click')

    expect(spy.calledOnce).to.be.true
  })

  it('should not call changeCallback function when disabled', () => {
    const spy = sinon.spy()

    wrapper = mount(<Toggle value={false} changeCallback={spy} disabled={true} />)
    wrapper.childAt(0).simulate('click')

    expect(spy.calledOnce).to.be.false
  })

  it('should update checked value via callback', () => {
    let value = false
    const callback = function(event) {
      value = event.target.value
    }
    wrapper = mount(<Toggle value={false} changeCallback={callback} />)

    wrapper.childAt(0).simulate('click', {target: { value: true }})
    expect(value).to.equal(true)
  })

  it('should not result in an error if the change callback is not defined', () => {
    let value = false
    wrapper = mount(<Toggle value={false} />)

    wrapper.childAt(0).simulate('click', {target: { value: true }})
    expect(value).to.equal(false)
  })

  it('displays a modified state upon changing props', function () {
    var TestParent = React.createFactory(React.createClass({
      getInitialState() {
        return {value: false}
      },
      render() {
        return <Toggle ref='toggle' value={this.state.value} />
      }
    }))

    var parent = TestUtils.renderIntoDocument(TestParent())
    expect(parent.refs.toggle.props.value).to.be.false

    parent.setState({
      value: true
    })

    expect(parent.refs.toggle.props.value).to.be.true
  })
})