#24 tests for input and checkbox components

src/components/ui-elements/checkbox/__snapshots__/checkbox.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without error 1`] = `"<div class=\\"form-group\\"><div class=\\"form-check\\"><label class=\\"form-check-label text-dark\\"><input type=\\"checkbox\\" name=\\"the-checkbox\\" class=\\"form-check-input\\"/>the checkbox<span class=\\"form-check-sign\\"><span class=\\"check\\"></span></span></label></div></div>"`;

src/components/ui-elements/checkbox/checkbox.js

@@ -1,5 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+/**
+ * @component A checkbox form field to use within Redux-form
+ * @param {object} input Prop that connects a component to the Redux
+ * @param {string} label The label of the checkbox
+ * @param {bool} disabled Disables the checkbox
+ * @returns React Component
+*/
 const Checkbox = ({ input, label, disabled }) => {
   const name = input.name
 
@@ -27,3 +35,11 @@ const Checkbox = ({ input, label, disabled }) => {
 }
 
 export default Checkbox
+
+Checkbox.propTypes = {
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  label: PropTypes.string,
+  disabled: PropTypes.bool
+}

src/components/ui-elements/checkbox/checkbox.test.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Checkbox from './checkbox'
+
+test('renders without error', () => {
+  const defaultProps = { input: { name: 'the-checkbox' }, label: 'the checkbox', disabled: false }
+  const wrapper = shallow(<Checkbox {...defaultProps} />)
+  expect(wrapper.html()).toMatchSnapshot()
+})

src/components/ui-elements/input/__snapshots__/input.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering testing renders without error 1`] = `"<div class=\\"form-group bmd-form-group  has-danger\\"><label class=\\"control-label bmd-label-static\\" for=\\"the-input\\">the input</label><input type=\\"text\\" name=\\"the-input\\" id=\\"the-input\\" class=\\"form-control\\"/><span class=\\"form-control-feedback\\"><i class=\\"material-icons \\">clear</i></span><label class=\\"error\\" for=\\"the-input\\" data-test=\\"error-message\\">Bad input</label></div>"`;

src/components/ui-elements/input/input.js

@@ -1,4 +1,15 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * @component An input form field to use within Redux-form
+ * @param {object} input Prop that connects a component to the Redux
+ * @param {string} type Type of the html input tag
+ * @param {string} label The label of the checkbox
+ * @param {bool} disabled Disables the checkbox
+ * @param {object} meta Metadata about the state of this field that redux-form is tracking
+ * @returns React Component
+*/
 
 const Input = ({ input, type, label, disabled, meta: { touched, pristine, valid, invalid, error } }) => {
   const name = input.name
@@ -31,10 +42,27 @@ const Input = ({ input, type, label, disabled, meta: { touched, pristine, valid,
       {touched && invalid && <label
         className="error"
         htmlFor={name}
+        data-test="error-message"
       >{error}</label>}
 
     </div>
   )
 }
 
 export default Input
+
+Input.propTypes = {
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  type: PropTypes.string,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    pristine: PropTypes.bool,
+    valid: PropTypes.bool,
+    invalid: PropTypes.bool,
+    error: PropTypes.string
+  })
+}

src/components/ui-elements/input/input.test.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Input from './input'
+
+const validMetaProps = { touched: true, pristine: false, valid: true, invalid: false }
+const invalidMetaProps = { touched: true, pristine: false, valid: false, invalid: true, error: 'Bad input' }
+
+const setup = (props) => {
+  const defaultProps = { input: { name: 'the-input' }, type: 'text', label: 'the input', disabled: false }
+  return shallow(<Input {...defaultProps} {...props} />)
+}
+
+describe('rendering testing', () => {
+  let wrapper
+
+  test('renders without error', () => {
+    wrapper = setup({ meta: invalidMetaProps })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  describe('valid input data', () => {
+    beforeEach(() => {
+      wrapper = setup({ meta: validMetaProps })
+    })
+
+    test('contains valid class', () => {
+      const validClassNode = wrapper.find('.has-success')
+      expect(validClassNode.length).toBe(1)
+    })
+
+    test('contains success icon', () => {
+      const iconNode = wrapper.find('.material-icons')
+      expect(iconNode.text()).toEqual('done')
+    })
+
+    test('error message is hidden', () => {
+      const errorMsg = wrapper.find('[data-test="error-message"]')
+      expect(errorMsg.length).toBe(0)
+    })
+  })
+
+  describe('invalid input data', () => {
+    beforeEach(() => {
+      wrapper = setup({ meta: invalidMetaProps })
+    })
+    test('contains invalid class', () => {
+      const invalidClassNode = wrapper.find('.has-danger')
+      expect(invalidClassNode.length).toBe(1)
+    })
+
+    test('contains error icon', () => {
+      const iconNode = wrapper.find('.material-icons')
+      expect(iconNode.text()).toEqual('clear')
+    })
+
+    test('shows error message', () => {
+      const errorMsg = wrapper.find('[data-test="error-message"]')
+      expect(errorMsg.text()).toEqual(invalidMetaProps.error)
+    })
+  })
+})