#24 tests refactoring

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

@@ -1,3 +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>"`;
+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\\" data-test=\\"input-node\\" 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

@@ -27,6 +27,7 @@ const Input = ({ input, type, label, disabled, meta: { touched, pristine, valid,
       <input
         {...input}
         id={name}
+        data-test="input-node"
         type={type}
         className="form-control"
         disabled={disabled}

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

@@ -7,18 +7,25 @@ const validMetaProps = { touched: true, pristine: false, valid: true, invalid: f
 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 }
+  const defaultProps = { input: { name: 'the-input' }, type: 'text', label: 'the input', disabled: false, meta: invalidMetaProps }
   return shallow(<Input {...defaultProps} {...props} />)
 }
 
 describe('rendering testing', () => {
   let wrapper
 
   test('renders without error', () => {
-    wrapper = setup({ meta: invalidMetaProps })
+    wrapper = setup()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  test('renders the value got from props on mount', () => {
+    const nodeValue = 'Some saved text'
+    const wrapper = setup({ input: { value: nodeValue } })
+    const inputNode = wrapper.find('[data-test="input-node"]')
+    expect(inputNode.prop('value')).toEqual(nodeValue)
+  })
+
   describe('valid input data', () => {
     beforeEach(() => {
       wrapper = setup({ meta: validMetaProps })

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

@@ -1,6 +1,12 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 
+/**
+ * @component A textarea 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
+ * @returns React Component
+*/
 const Textarea = ({ input, label }) => {
   const name = input.name
 

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

@@ -2,7 +2,6 @@ import React from 'react'
 import { mount } from 'enzyme'
 
 import Textarea from './textarea'
-import { node } from 'prop-types'
 
 const mockUseEffect = jest.fn()
 React.useEffect = mockUseEffect
@@ -20,15 +19,15 @@ describe('rendering testing', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  test('counts height on value change', () => {
+  test('counts height on value prop change', () => {
     const currentProps = { input: { name: 'the-name', value: 'The value' } }
     const wrapper = setup(currentProps)
     mockUseEffect.mockClear()
     wrapper.setProps({ input: { name: 'the-name', value: 'The other value' } })
     expect(mockUseEffect).toHaveBeenCalled()
   })
 
-  test('does not count height on other prop change (except for value)', () => {
+  test('does not count height on update with the same value prop', () => {
     const wrapper = setup()
     mockUseEffect.mockClear()
     wrapper.update()
@@ -37,8 +36,7 @@ describe('rendering testing', () => {
 
   test('renders the value got from props on mount', () => {
     const nodeValue = 'Some saved text'
-    const wrapper = setup({ input: { value: nodeValue } })
-    console.log(wrapper.debug())
+    const wrapper = setup({ input: { name: 'the-name', value: nodeValue } })
     const textareaNode = wrapper.find('[data-test="textarea-node"]')
     expect(textareaNode.prop('value')).toEqual(nodeValue)
   })