diff --git a/src/dateinput/ffe-dateinput.js b/src/dateinput/ffe-dateinput.js index 1bf7fa62fe..a248786ce9 100644 --- a/src/dateinput/ffe-dateinput.js +++ b/src/dateinput/ffe-dateinput.js @@ -1,11 +1,13 @@ import React, { PropTypes } from 'react'; +import classNames from 'classnames'; import KalenderIkon from 'ffe-icons-react/kalender-ikon'; -function FFEDateInput(props) { - const defaultProps = props.inputProps || {}; - const defaultClassName = defaultProps.className || ''; - const inputProps = { ...defaultProps, - className: `ffe-dateinput__field ffe-input-field ${defaultClassName}`, +export default function FFEDateInput(props) { + const givenInputProps = props.inputProps || {}; + + const inputProps = { + ...givenInputProps, + className: classNames('ffe-dateinput__field', 'ffe-input-field', givenInputProps.className), }; return ( @@ -30,5 +32,3 @@ FFEDateInput.propTypes = { value: PropTypes.string.isRequired, inputProps: PropTypes.object, }; - -export default FFEDateInput; diff --git a/src/dateinput/ffe-dateinput.test.js b/src/dateinput/ffe-dateinput.test.js index bcf15a2520..15776329b9 100644 --- a/src/dateinput/ffe-dateinput.test.js +++ b/src/dateinput/ffe-dateinput.test.js @@ -2,19 +2,63 @@ import { shallow } from 'enzyme'; import { assert } from 'chai'; +import { spy } from 'sinon'; import React from 'react'; import FFEDateInput from './ffe-dateinput'; describe('', () => { - const dateinput = ; + const onChange = spy(); + const onFocus = spy(); + const onKeyDown = spy(); + + const component = shallow(); it('should render a wrapper for the input field', () => { - const wrapper = shallow(dateinput); - assert.equal(wrapper.find('.ffe-dateinput').length, 1); + assert.isTrue(component.is('.ffe-dateinput')); }); - it('should render an input field', () => { - const wrapper = shallow(dateinput); - assert.equal(wrapper.find('input.ffe-dateinput__field').length, 1); + describe('nested input field', () => { + const input = component.find('input'); + + it('should be a single input field', () => { + assert.equal(component.length, 1); + }); + + it('should have BEM element class name', () => { + assert.isTrue(input.hasClass('ffe-dateinput__field')); + }); + + it('should have given value', () => { + assert.equal(input.prop('value'), '2016-03-07'); + }); + + it('should have property from input props', () => { + assert.equal(input.prop('placeholder'), 'Given placeholder'); + }); + + it('should have class name from input props', () => { + assert.isTrue(input.hasClass('given-class-name')); + }); + + it('should delegate change events', () => { + input.simulate('change'); + assert.isTrue(onChange.calledOnce); + }); + + it('should delegate focus events', () => { + input.simulate('focus'); + assert.isTrue(onFocus.calledOnce); + }); + + it('should delegate key down events', () => { + input.simulate('keypress'); + assert.isTrue(onKeyDown.calledOnce); + }); }); });