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( ) assert.ok(wrapper) assert.equal(wrapper.find('.unit-input__suffix').length, 0) }) it('should render properly with a suffix', () => { const wrapper = shallow( ) 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(
TESTCOMPONENT
) 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( ) 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( ) 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( ) 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( ) 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( ) assert.ok(wrapper) assert.equal(wrapper.state('value'), 123) }) it('should update the component state value with props.value', () => { const wrapper = mount( ) 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) }) }) })