Merge pull request #100 from tjinauyeung/feat/export-all-props-in-form-component

Author: Larry Botha

lib/components/Form.svelte

@@ -16,7 +16,10 @@
     handleChange,
     handleSubmit,
     updateField,
+    updateInitialValues,
     updateTouched,
+    updateValidateField,
+    validateField,
   } = createForm({
     initialValues,
     validationSchema,
@@ -32,7 +35,10 @@
     handleChange,
     handleSubmit,
     updateField,
+    updateInitialValues,
     updateTouched,
+    updateValidateField,
+    validateField,
   });
 </script>
 
@@ -45,6 +51,9 @@
     {handleChange}
     {handleSubmit}
     {updateField}
+    {updateInitialValues}
     {updateTouched}
+    {updateValidateField}
+    {validateField}
   />
 </form>

test/config/jest.test.js

@@ -7,7 +7,11 @@ module.exports = {
 
   moduleFileExtensions: ['js', 'svelte'],
 
-  testMatch: ['<rootDir>/test/*.spec.js'],
+  moduleNameMapper: {
+    '^lib/(.*)': '<rootDir>/lib/$1',
+  },
+
+  testMatch: ['<rootDir>/test/specs/**/*.spec.js'],
 
   transform: {
     '^.+\\.svelte$': 'svelte-jester',

test/specs/components/fixtures/input.svelte

@@ -0,0 +1,14 @@
+<script>
+  import {getContext} from 'svelte';
+  import {key} from '../../../../lib';
+
+  export let field;
+
+  const context = getContext(key);
+  const form = context.form;
+</script>
+
+<label for={field}>
+  {field}
+  <input type="text" id={field} name={field} bind:value={$form[field]} />
+</label>

test/specs/components/form.spec.js

@@ -0,0 +1,93 @@
+import {render, fireEvent, waitFor} from '@testing-library/svelte';
+import {writable, get as svelteGet} from 'svelte/store';
+
+import Input from './fixtures/input.svelte';
+
+import Form from 'lib/components/Form.svelte';
+
+const defaultProps = {
+  initialValues: {foo: ''},
+  onSubmit() {},
+};
+
+const get = (store) => {
+  /**
+   * not sure why we need to invoke `get` twice, but we do
+   */
+  return svelteGet(svelteGet(store));
+};
+
+describe('Form', () => {
+  test('-> exposes `form` prop via slot properties', async () => {
+    const inputId = 'foo';
+    const props = {
+      ...defaultProps,
+      initialValues: {[inputId]: ''},
+    };
+    let form = writable({});
+    const {getByLabelText} = render(
+      <Form {...props} let_form={form}>
+        <Input field={inputId} />
+      </Form>,
+    );
+    const input = getByLabelText(inputId);
+
+    expect(get(form)).toHaveProperty('foo', '');
+
+    const value = 'bar';
+
+    await fireEvent.input(input, {target: {value}});
+
+    expect(get(form)).toHaveProperty('foo', value);
+  });
+
+  test('-> exposes `state` prop via slot properties', async () => {
+    const inputId = 'foo';
+    const props = {
+      ...defaultProps,
+      initialValues: {[inputId]: ''},
+    };
+    let state = writable({});
+    const {getByLabelText} = render(
+      <Form {...props} let_state={state}>
+        <Input field={inputId} />
+      </Form>,
+    );
+    const input = getByLabelText(inputId);
+
+    expect(get(state)).toHaveProperty('isModified', false);
+
+    const value = 'bar';
+
+    await fireEvent.input(input, {target: {value}});
+
+    expect(get(state)).toHaveProperty('isModified', true);
+  });
+
+  test.each`
+    methodName
+    ${'handleChange'}
+    ${'handleSubmit'}
+    ${'updateField'}
+    ${'updateInitialValues'}
+    ${'updateTouched'}
+    ${'updateValidateField'}
+    ${'validateField'}
+  `('-> exposes $methodName via slot properties', ({methodName}) => {
+    const inputId = 'foo';
+    const methodSetter = jest.fn();
+    const props = {
+      ...defaultProps,
+      initialValues: {[inputId]: ''},
+      [`let_${methodName}`]: methodSetter,
+    };
+    render(
+      <Form {...props}>
+        <Input field={inputId} />
+      </Form>,
+    );
+
+    expect(methodSetter.mock.calls[0][0]).toBeInstanceOf(Function);
+    expect(methodSetter.mock.calls[0][0]).toHaveProperty('name', methodName);
+  });
+});

test/textarea.spec.js renamed to test/specs/components/textarea.spec.js

@@ -1,7 +1,7 @@
 import {render as renderTl, fireEvent, waitFor} from '@testing-library/svelte';
 
-import Form from '../lib/components/Form.svelte';
-import Textarea from '../lib/components/Textarea.svelte';
+import Form from 'lib/components/Form.svelte';
+import Textarea from 'lib/components/Textarea.svelte';
 
 const defaultProps = {
   initialValues: {

test/library.spec.js renamed to test/specs/library.spec.js

@@ -1,8 +1,9 @@
 /* globals beforeEach, console, describe, expect, it, require, jest */
-const {createForm} = require('../lib');
 const yup = require('yup');
 const Chance = require('chance');
 
+const {createForm} = require('../../lib');
+
 const chance = new Chance();
 
 function nonEmpty(array) {