feat(textarea): add component and tests

closes #86

lib/components/Textarea.svelte

@@ -0,0 +1,12 @@
+<script>
+  import {getContext} from 'svelte';
+  import {key} from './key';
+
+  export let name;
+
+  const {form, handleChange} = getContext(key);
+</script>
+
+<textarea {name} on:change={handleChange} on:blur={handleChange} {...$$props}>
+  {$form[name]}
+</textarea>

lib/index.js

@@ -1,5 +1,6 @@
 export {createForm} from './create-form';
 export {default as Form} from './components/Form.svelte';
+export {default as Textarea} from './components/Textarea.svelte';
 export {default as Field} from './components/Field.svelte';
 export {default as Select} from './components/Select.svelte';
 export {default as ErrorMessage} from './components/ErrorMessage.svelte';

test/textarea.spec.js

@@ -0,0 +1,38 @@
+import {render as renderTl, fireEvent, waitFor} from '@testing-library/svelte';
+
+import Form from '../lib/components/Form.svelte';
+import Textarea from '../lib/components/Textarea.svelte';
+
+const defaultProps = {
+  initialValues: {
+    description: '',
+  },
+  ['onSubmit']: () => {},
+};
+
+const render = (ui, props = defaultProps) => {
+  return renderTl(<Form {...props}>{ui}</Form>, {props});
+};
+
+describe('Textarea', () => {
+  test('-> updates value on change', async () => {
+    const label = 'description';
+    const props = {...defaultProps};
+    const {getByLabelText} = render(
+      <>
+        <label for={label}>{label}</label>
+        <Textarea id={label} name={label} />
+      </>,
+      props,
+    );
+
+    const textarea = getByLabelText(label);
+    expect(textarea.value.trim()).toBe(props.initialValues.description);
+
+    const value = 'foo';
+
+    await fireEvent.change(textarea, {target: {value}});
+
+    expect(textarea.value).toContain(value);
+  });
+});