asInput reorg + coverage, simplify checkbox, regenerate snapshots

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -142,14 +142,14 @@ exports[`Storyshots InputSelect basic usage 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput5"
+    htmlFor="asInput5"
   >
     Fruits
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="textInput5"
+    id="asInput5"
     name="fruits"
     onBlur={[Function]}
     onChange={[Function]}
@@ -184,14 +184,14 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput6"
+    htmlFor="asInput6"
   >
     New England States
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="textInput6"
+    id="asInput6"
     name="new-england-states"
     onBlur={[Function]}
     onChange={[Function]}
@@ -236,14 +236,14 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput7"
+    htmlFor="asInput7"
   >
     Northeast States
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="textInput7"
+    id="asInput7"
     name="northeast-states"
     onBlur={[Function]}
     onChange={[Function]}
@@ -336,14 +336,14 @@ exports[`Storyshots InputSelect with validation 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput8"
+    htmlFor="asInput8"
   >
     Favorite Color
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="textInput8"
+    id="asInput8"
     name="color"
     onBlur={[Function]}
     onChange={[Function]}
@@ -393,7 +393,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput9"
+    htmlFor="asInput9"
   >
     First Name
   </label>
@@ -402,7 +402,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
     aria-invalid={false}
     className="form-control"
     disabled={false}
-    id="textInput9"
+    id="asInput9"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -419,16 +419,16 @@ exports[`Storyshots InputText validation 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="textInput10"
+    htmlFor="asInput10"
   >
     Username
   </label>
   <input
-    aria-describedby="undefined description-textInput10"
+    aria-describedby="undefined description-asInput10"
     aria-invalid={false}
     className="form-control"
     disabled={false}
-    id="textInput10"
+    id="asInput10"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -439,7 +439,7 @@ exports[`Storyshots InputText validation 1`] = `
   />
   <small
     className="form-text"
-    id="description-textInput10"
+    id="description-asInput10"
   >
     The unique name that identifies you throughout the site.
   </small>

src/CheckBox/CheckBox.test.jsx

 /* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable no-console */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import CheckBox from './index';
@@ -45,16 +44,16 @@ describe('<CheckBox />', () => {
   });
 
   it('check that callback function is triggered when clicked', () => {
+    const spy = jest.fn();
     const wrapper = shallow(
       <CheckBox
         name="checkbox"
         descibedBy="checkbox"
         label="check me out!"
         checked="false"
-        onChange={() => console.log('the checkbox changed state')}
+        onChange={spy}
       />,
     );
-    const spy = jest.spyOn(wrapper.instance(), 'onChange');
 
     expect(spy).toHaveBeenCalledTimes(0);
     wrapper.find('input').simulate('click');

src/CheckBox/index.jsx

 import React from 'react';
 
-import { inputProps } from '../utils/asInput';
+import { inputProps } from '../asInput';
 import newId from '../utils/newId';
 
 class CheckBox extends React.Component {

src/InputSelect/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Input } from 'reactstrap';
 import PropTypes from 'prop-types';
 
-import asInput, { inputProps } from '../utils/asInput';
+import asInput, { inputProps } from '../asInput';
 
 class Select extends React.Component {
   static getOption(option, i) {

src/InputText/index.jsx

 import React from 'react';
 import { Input } from 'reactstrap';
 
-import asInput, { inputProps } from '../utils/asInput';
+import asInput, { inputProps } from '../asInput';
 
 function Text(props) {
   return (

src/asInput/asInput.test.jsx

+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { mount } from 'enzyme';
+
+import asInput from './index';
+
+function testComponent(props) {
+  return (
+    <input
+      defaultValue={props.value}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+    />
+  );
+}
+
+const InputTestComponent = asInput(testComponent);
+const baseProps = {
+  type: 'text',
+  name: 'test',
+  label: 'test component',
+  description: 'i am a test component',
+};
+
+describe('asInput()', () => {
+  it('renders', () => {
+    const props = {
+      ...baseProps,
+      value: 'foofoo',
+    };
+    const wrapper = mount(
+      <InputTestComponent {...props} />,
+    );
+    expect(wrapper.find('label').text()).toEqual(props.label);
+    expect(wrapper.find('#description-asInput1').text()).toEqual(props.description);
+    expect(wrapper.state('value')).toEqual(props.value);
+  });
+
+  describe('fires', () => {
+    it('blur handler', () => {
+      const spy = jest.fn();
+      const props = {
+        ...baseProps,
+        onBlur: spy,
+      };
+      const wrapper = mount(
+        <InputTestComponent {...props} />,
+      );
+      wrapper.find('input').simulate('blur');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('change handler', () => {
+      const spy = jest.fn();
+      const props = {
+        ...baseProps,
+        onChange: spy,
+      };
+      const wrapper = mount(
+        <InputTestComponent {...props} />,
+      );
+      wrapper.find('input').simulate('change');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    describe('validator', () => {
+      it('on blur', () => {
+        const spy = jest.fn();
+        spy.mockReturnValueOnce({ isValid: true });
+        const props = {
+          ...baseProps,
+          validator: spy,
+        };
+        const wrapper = mount(
+          <InputTestComponent {...props} />,
+        );
+        wrapper.find('input').simulate('blur');
+        expect(spy).toHaveBeenCalledTimes(1);
+      });
+
+      it('and displays error message when invalid', () => {
+        const spy = jest.fn();
+        const validationResult = {
+          isValid: false,
+          validationMessage: 'Invalid!!1',
+        };
+        spy.mockReturnValueOnce(validationResult);
+        const props = {
+          ...baseProps,
+          validator: spy,
+        };
+        const wrapper = mount(
+          <InputTestComponent {...props} />,
+        );
+        wrapper.find('input').simulate('blur');
+        expect(spy).toHaveBeenCalledTimes(1);
+        const err = wrapper.find('.form-control-feedback');
+        expect(err.exists()).toEqual(true);
+        expect(err.text()).toEqual(validationResult.validationMessage);
+      });
+    });
+  });
+});

src/utils/asInput.jsx → src/asInput/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, FormFeedback, FormText } from 'reactstrap';
 
-import newId from './newId';
+import newId from '../utils/newId';
 
 const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
@@ -29,7 +29,7 @@ const asInput = (WrappedComponent) => {
       this.handleChange = this.handleChange.bind(this);
       this.handleBlur = this.handleBlur.bind(this);
 
-      const id = newId('textInput');
+      const id = newId('asInput');
       this.state = {
         id,
         value: this.props.value,