DIG-9441 Refactor ffe-dateinput and its test

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;

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('<FFEDateInput />', () => {
-  const dateinput = <FFEDateInput />;
+  const onChange = spy();
+  const onFocus = spy();
+  const onKeyDown = spy();
+
+  const component = shallow(<FFEDateInput
+    inputProps={{ className: 'given-class-name', placeholder: 'Given placeholder' }}
+    onChange={onChange}
+    onFocus={onFocus}
+    onKeyDown={onKeyDown}
+    value="2016-03-07"
+  />);
 
   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);
+    });
   });
 });