#24 added tests for select and radio components

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

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio component testing renders without error 1`] = `"<div class=\\"form-check form-check-radio\\"><label class=\\"form-check-label text-dark\\"><input type=\\"radio\\" value=\\"the-radio\\" id=\\"the-radio\\" class=\\"form-check-input\\"/>the radio<span class=\\"circle\\"><span class=\\"check\\"></span></span></label></div>"`;
+
+exports[`RadioGroup component testing renders without error 1`] = `"<div class=\\"form-group\\"><div class=\\"form-check form-check-radio\\" input=\\"[object Object]\\"><label class=\\"form-check-label text-dark\\"><input type=\\"radio\\" value=\\"the-radio\\" id=\\"the-radio\\" class=\\"form-check-input\\"/>the radio<span class=\\"circle\\"><span class=\\"check\\"></span></span></label></div><div class=\\"form-check form-check-radio\\" input=\\"[object Object]\\"><label class=\\"form-check-label text-dark\\"><input type=\\"radio\\" value=\\"the-radio\\" id=\\"the-radio\\" class=\\"form-check-input\\"/>the radio<span class=\\"circle\\"><span class=\\"check\\"></span></span></label></div></div>"`;

src/components/ui-elements/radio/radio-group.js

@@ -1,5 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import Radio from './radio'
 
+/**
+ * @component A Radiobutton group to use within Redux-form
+ * @param {object} input Prop that connects a component to the Redux
+ * @param {array} children The list of Radiobutton group options
+ * @returns React Component
+ */
 const RadioGroup = (props) => {
   const { input, children } = props
 
@@ -15,3 +23,10 @@ const RadioGroup = (props) => {
 }
 
 export default RadioGroup
+
+RadioGroup.propTypes = {
+  input: PropTypes.object,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.instanceOf(Radio))
+  ]).isRequired
+}

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

@@ -1,5 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
+/**
+ * @component A single radio option to use with Radio-Group
+ * @param {object} input Prop that connects a component to the Redux
+ * @param {string} label The label of the radio option
+ * @param {string} value Key of the radio option
+ * @returns React Component
+*/
 const Radio = (props) => {
   const { input, label, value } = props
 
@@ -26,3 +34,11 @@ const Radio = (props) => {
 }
 
 export default Radio
+
+Radio.propTypes = {
+  input: PropTypes.shape({
+    value: PropTypes.string
+  }),
+  label: PropTypes.string,
+  value: PropTypes.string
+}

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Radio from './radio'
+import RadioGroup from './radio-group'
+
+const defaultRadioProps = { input: { value: '', onChange: () => { } }, label: 'the radio', value: 'the-radio' }
+const childElements = [
+  shallow(<Radio {...defaultRadioProps} />),
+  shallow(<Radio {...defaultRadioProps} />)
+]
+const defaultGroupProps = { input: {}, children: childElements }
+
+describe('Radio component testing', () => {
+  test('renders without error', () => {
+    const wrapper = shallow(<Radio {...defaultRadioProps} />)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
+
+describe('RadioGroup component testing', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<RadioGroup {...defaultGroupProps} />)
+  })
+
+  test('renders without error', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('renders all children elements', () => {
+    const childrenNumber = wrapper.find('input[type="radio"]')
+    expect(childrenNumber.length).toBe(childElements.length)
+  })
+})

src/components/ui-elements/select/__snapshots__/select.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\\"><label class=\\"control-label bmd-label-static\\" for=\\"the-select\\">the select</label><select name=\\"the-select\\" id=\\"the-select\\" class=\\"form-control\\"><option data-test=\\"option\\"></option><option data-test=\\"option\\">first-option</option><option data-test=\\"option\\">second-option</option><option data-test=\\"option\\">third-option</option></select></div>"`;

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

@@ -1,10 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * @component A select 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 select field
+ * @param {array of strings} options Options of the dropdown list
+ * @returns React Component
+*/
 
 const Select = ({ input, label, options }) => {
   const name = input.name
 
   const selectOptions = options.map((option) => (
-    <option key={option}>{option}</option>
+    <option key={option} data-test='option'>{option}</option>
   ))
 
   return (
@@ -19,7 +28,7 @@ const Select = ({ input, label, options }) => {
         id={name}
         className="form-control"
       >
-        <option key={'_empty'}>{''}</option>
+        <option key='_empty' data-test='option'>{''}</option>
         {selectOptions}
       </select>
 
@@ -28,3 +37,11 @@ const Select = ({ input, label, options }) => {
 }
 
 export default Select
+
+Select.propTypes = {
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  label: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.string)
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Select from './select'
+
+const defaultProps = { input: { name: 'the-select' }, label: 'the select', options: ['first-option', 'second-option', 'third-option'] }
+
+describe('rendering testing', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<Select {...defaultProps} />)
+  })
+  test('renders without error', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('renders correct number of options (including empty one)', () => {
+    const optionNodes = wrapper.find('[data-test="option"]')
+    expect(optionNodes.length).toBe(defaultProps.options.length + 1)
+  })
+})