Update text area

src/__tests__/__snapshots__/textarea.test.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextBox component The Rendered HTML should have a label 1`] = `
+<div
+  class="form-row_container"
+>
+  <label>
+    My Label
+    <textarea
+      type="text"
+    />
+  </label>
+</div>
+`;
+
+exports[`TextBox component The Rendered HTML should support children 1`] = `
+<div
+  class="form-row_container"
+>
+  <label>
+    My Label
+    <textarea
+      type="text"
+    >
+      This is my value
+    </textarea>
+  </label>
+</div>
+`;
+
+exports[`TextBox component handling input should set a value when passed in 1`] = `
+<div
+  class="form-row_container"
+>
+  <label>
+    My Label
+    <textarea
+      type="text"
+    >
+      My Input Value
+    </textarea>
+  </label>
+</div>
+`;
+
+exports[`TextBox component handling input should update a value when changed 1`] = `
+<div
+  class="form-row_container"
+>
+  <label>
+    My Label
+    <textarea
+      type="text"
+    >
+      Updated Value
+    </textarea>
+  </label>
+</div>
+`;

src/__tests__/textarea.test.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, fireEvent, cleanup } from 'react-testing-library'
+
+import { TextArea } from '../'
+
+describe('TextBox component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+  describe('The Rendered HTML', () => {
+    it('should have a label', () => {
+      const { getByText, getByLabelText, container } = render(
+        <TextArea label="My Label" />
+      )
+
+      expect(container.firstChild).toMatchSnapshot()
+      const label = getByText('My Label', { exact: false })
+      const tArea = getByLabelText('My Label', { exact: false })
+      expect(label.textContent).toBe('My Label')
+      expect(tArea.value).toBe('')
+    })
+    it('should support children', () => {
+      const { getByText, getByLabelText, container } = render(
+        <TextArea label="My Label" initialValue="This is my value" />
+      )
+
+      expect(container.firstChild).toMatchSnapshot()
+      const label = getByText('My Label', { exact: false })
+      const tArea = getByLabelText('My Label', { exact: false })
+      expect(label.textContent).toContain('My Label')
+      expect(tArea.value).toBe('This is my value')
+    })
+  })
+  describe('handling input', () => {
+    it('should set a value when passed in', () => {
+      const { getByLabelText, container } = render(
+        <TextArea label="My Label" initialValue="My Input Value" />
+      )
+
+      expect(container.firstChild).toMatchSnapshot()
+      const input = getByLabelText('My Label', { exact: false })
+      expect(input.value).toBe('My Input Value')
+    })
+    it('should update a value when changed', () => {
+      const { getByLabelText, container } = render(
+        <TextArea label="My Label" />
+      )
+      const tArea = getByLabelText('My Label', { exact: false })
+      fireEvent.change(tArea, { target: { value: 'Updated Value' } })
+      expect(tArea.value).toBe('Updated Value')
+      expect(container.firstChild).toMatchSnapshot()
+    })
+  })
+})

src/textarea.js

@@ -9,24 +9,27 @@ export default class TextArea extends Component {
     this.setState({ value: event.target.value })
   }
   getValue() {
-    return this.state ? this.state.value : this.props.children
+    return this.state ? this.state.value : this.props.initialValue
   }
   render() {
+    const { label, initialValue, ...otherProps } = this.props
     return (
       <div className="form-row_container">
         <label>
-          {this.props.label || ''}
-          <textarea {...this.props} onChange={this.handleChange}>
-            {this.props.children}
-          </textarea>
+          {label || ''}
+          <textarea
+            {...otherProps}
+            onChange={this.handleChange}
+            value={this.getValue()}
+          />
         </label>
       </div>
     )
   }
 }
 
 TextArea.propTypes = {
-  defaultValue: PropTypes.string,
+  initialValue: PropTypes.string,
   label: PropTypes.string,
   type: PropTypes.string,
 }

wallaby.config.js

@@ -0,0 +1,16 @@
+module.exports = function(wallaby) {
+  return {
+    files: ['src/*.js'],
+
+    tests: ['src/**/*.test.js'],
+
+    env: {
+      type: 'node',
+      runner: 'node',
+    },
+    compilers: {
+      '**/*.js': wallaby.compilers.babel(),
+    },
+    testFramework: 'jest',
+  }
+}