#24 added tests and prop types for Textarea component

src/components/ui-elements/textarea/__snapshots__/textarea.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-textarea\\">the textarea</label><textarea name=\\"the-textarea\\" id=\\"the-textarea\\" data-test=\\"textarea-node\\" rows=\\"1\\" class=\\"form-control\\">Some big text</textarea></div>"`;

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

@@ -1,11 +1,12 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
 
 const Textarea = ({ input, label }) => {
   const name = input.name
 
   const textareaRef = useRef(null)
 
-  useEffect(() => {
+  React.useEffect(() => {
     textareaRef.current.style.height = '0px'
     const scrollHeight = textareaRef.current.scrollHeight
     textareaRef.current.style.setProperty('height', `${scrollHeight}px`, 'important')
@@ -21,6 +22,7 @@ const Textarea = ({ input, label }) => {
       <textarea
         {...input}
         id={name}
+        data-test='textarea-node'
         rows="1"
         ref={textareaRef}
         className="form-control"
@@ -30,3 +32,10 @@ const Textarea = ({ input, label }) => {
 }
 
 export default Textarea
+
+Textarea.propTypes = {
+  input: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }),
+  label: PropTypes.string
+}

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import Textarea from './textarea'
+import { node } from 'prop-types'
+
+const mockUseEffect = jest.fn()
+React.useEffect = mockUseEffect
+
+const setup = (props) => {
+  mockUseEffect.mockClear()
+
+  const defaultProps = { input: { name: 'the-textarea', value: 'Some big text', onChange: () => { } }, label: 'the textarea' }
+  return mount(<Textarea {...defaultProps} {...props} />)
+}
+
+describe('rendering testing', () => {
+  test('renders without error', () => {
+    const wrapper = setup()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('counts height on value 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)', () => {
+    const wrapper = setup()
+    mockUseEffect.mockClear()
+    wrapper.update()
+    expect(mockUseEffect).not.toHaveBeenCalled()
+  })
+
+  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 textareaNode = wrapper.find('[data-test="textarea-node"]')
+    expect(textareaNode.prop('value')).toEqual(nodeValue)
+  })
+})