metamask-extension/ui/app/components/unit-input/tests/unit-input.component.test.js

import React from 'react'
import assert from 'assert'
import { shallow, mount } from 'enzyme'
import sinon from 'sinon'
import UnitInput from '../unit-input.component'

describe('UnitInput Component', () => {
  describe('rendering', () => {
    it('should render properly without a suffix', () => {
      const wrapper = shallow(
        <UnitInput />
      )

      assert.ok(wrapper)
      assert.equal(wrapper.find('.unit-input__suffix').length, 0)
    })

    it('should render properly with a suffix', () => {
      const wrapper = shallow(
        <UnitInput
          suffix="ETH"
        />
      )

      assert.ok(wrapper)
      assert.equal(wrapper.find('.unit-input__suffix').length, 1)
      assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
    })

    it('should render properly with a child omponent', () => {
      const wrapper = shallow(
        <UnitInput>
          <div className="testing">
            TESTCOMPONENT
          </div>
        </UnitInput>
      )

      assert.ok(wrapper)
      assert.equal(wrapper.find('.testing').length, 1)
      assert.equal(wrapper.find('.testing').text(), 'TESTCOMPONENT')
    })

    it('should render with an error class when props.error === true', () => {
      const wrapper = shallow(
        <UnitInput
          error
        />
      )

      assert.ok(wrapper)
      assert.equal(wrapper.find('.unit-input--error').length, 1)
    })
  })

  describe('handling actions', () => {
    const handleChangeSpy = sinon.spy()
    const handleBlurSpy = sinon.spy()

    afterEach(() => {
      handleChangeSpy.resetHistory()
      handleBlurSpy.resetHistory()
    })

    it('should focus the input on component click', () => {
      const wrapper = mount(
        <UnitInput />
      )

      assert.ok(wrapper)
      const handleFocusSpy = sinon.spy(wrapper.instance(), 'handleFocus')
      wrapper.instance().forceUpdate()
      wrapper.update()
      assert.equal(handleFocusSpy.callCount, 0)
      wrapper.find('.unit-input').simulate('click')
      assert.equal(handleFocusSpy.callCount, 1)
    })

    it('should call onChange on input changes with the value', () => {
      const wrapper = mount(
        <UnitInput
          onChange={handleChangeSpy}
        />
      )

      assert.ok(wrapper)
      assert.equal(handleChangeSpy.callCount, 0)
      const input = wrapper.find('input')
      input.simulate('change', { target: { value: 123 } })
      assert.equal(handleChangeSpy.callCount, 1)
      assert.ok(handleChangeSpy.calledWith(123))
      assert.equal(wrapper.state('value'), 123)
    })

    it('should call onBlur on blur with the value', () => {
      const wrapper = mount(
        <UnitInput
          onChange={handleChangeSpy}
          onBlur={handleBlurSpy}
        />
      )

      assert.ok(wrapper)
      assert.equal(handleChangeSpy.callCount, 0)
      assert.equal(handleBlurSpy.callCount, 0)
      const input = wrapper.find('input')
      input.simulate('change', { target: { value: 123 } })
      assert.equal(handleChangeSpy.callCount, 1)
      assert.ok(handleChangeSpy.calledWith(123))
      assert.equal(wrapper.state('value'), 123)
      input.simulate('blur')
      assert.equal(handleBlurSpy.callCount, 1)
      assert.ok(handleBlurSpy.calledWith(123))
    })

    it('should set the component state value with props.value', () => {
      const wrapper = mount(
        <UnitInput
          value={123}
        />
      )

      assert.ok(wrapper)
      assert.equal(wrapper.state('value'), 123)
    })

    it('should update the component state value with props.value', () => {
      const wrapper = mount(
        <UnitInput
          onChange={handleChangeSpy}
        />
      )

      assert.ok(wrapper)
      assert.equal(handleChangeSpy.callCount, 0)
      const input = wrapper.find('input')
      input.simulate('change', { target: { value: 123 } })
      assert.equal(wrapper.state('value'), 123)
      assert.equal(handleChangeSpy.callCount, 1)
      assert.ok(handleChangeSpy.calledWith(123))
      wrapper.setProps({ value: 456 })
      assert.equal(wrapper.state('value'), 456)
      assert.equal(handleChangeSpy.callCount, 1)
    })
  })
})