You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.1 KiB
146 lines
4.1 KiB
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)
|
|
})
|
|
})
|
|
})
|
|
|