feat(useField) Add validation at field's level (#35)

* Add JEST

* Add validate function

* Add test checking field validation works

* Adding types to useField form

Author: apanizo

package-lock.json

@@ -16,7 +16,8 @@
     "doctoc": "doctoc README.md && doctoc docs/faq.md && prettier --write README.md && prettier --write docs/faq.md",
     "precommit": "lint-staged && npm start validate",
     "prepublish": "npm start validate",
-    "postinstall": "node ./scripts/postinstall.js || exit 0"
+    "postinstall": "node ./scripts/postinstall.js || exit 0",
+    "test": "NODE_ENV=test jest -i --detectOpenHandles"
   },
   "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
   "license": "MIT",
@@ -60,7 +61,7 @@
     "final-form": "^4.11.1",
     "hoek": ">=4.2.1",
     "husky": "^1.1.1",
-    "jest": "^24.1.0",
+    "jest": "^24.5.0",
     "lint-staged": "^8.1.3",
     "merge": ">=1.2.1",
     "nps": "^5.9.3",

package.json

@@ -4,7 +4,8 @@ import {
   FormState,
   FormSubscription,
   FieldSubscription,
-  FieldState
+  FieldState,
+  FieldValidator
 } from 'final-form'
 
 export interface FormRenderProps extends FormState {
@@ -46,6 +47,7 @@ declare module 'react-final-form-hooks' {
   export function useField<V = any>(
     name: string,
     form: FormApi,
+    validate?: FieldValidator,
     subscription?: FieldSubscription
   ): FieldRenderProps<V>
 }

src/index.d.ts

@@ -19,9 +19,14 @@ const eventValue = event => {
   return event.target.value
 }
 
-const useField = (name, form, subscription = all) => {
+const useField = (name, form, validate, subscription = all) => {
   const autoFocus = useRef(false)
   const [state, setState] = useState({})
+  const options = validate
+    ? {
+        getValidator: () => validate
+      }
+    : undefined
   useEffect(
     () =>
       form.registerField(
@@ -33,9 +38,10 @@ const useField = (name, form, subscription = all) => {
           }
           setState(newState)
         },
-        subscription
+        subscription,
+        options
       ),
-    [name, form, ...subscriptionToInputs(subscription)]
+    [name, form, validate, ...subscriptionToInputs(subscription)]
   )
   let { blur, change, focus, value, ...meta } = state || {}
   delete meta.name // it's in input

src/useField.js

@@ -1,14 +1,23 @@
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import { act } from 'react-dom/test-utils'
 import { renderHook, cleanup } from 'react-hooks-testing-library'
 import useField, { all } from './useField'
+import useForm from './useForm'
 
 describe('useField()', () => {
-  let form, name, subscription
+  let form, name, subscription, container
 
   beforeEach(() => {
     name = 'foo'
     subscription = { value: true }
+    container = document.createElement('div')
+  })
+  afterEach(() => {
+    document.body.removeChild(container)
+    container = null
+    cleanup()
   })
-  afterEach(cleanup)
 
   describe("form hook parameter's registerField", () => {
     beforeEach(() => {
@@ -51,7 +60,9 @@ describe('useField()', () => {
     beforeEach(() => {
       value = 'bar'
       blur = jest.fn()
-      change = jest.fn()
+      change = jest.fn(() => {
+        debugger
+      })
       focus = jest.fn()
 
       form = {
@@ -109,7 +120,7 @@ describe('useField()', () => {
       })
 
       describe('when event has a checked prop', () => {
-        const event = { target: { type: 'radio', checked: false } }
+        const event = { target: { type: 'checkbox', checked: false } }
 
         it('calls provided handler with value', () => {
           const { onChange } = setupHook()
@@ -154,4 +165,66 @@ describe('useField()', () => {
       expect(returnMeta).toEqual(meta)
     })
   })
+
+  describe('field level validation', () => {
+    it('should not call form validation if field validationallow validate field', () => {
+      const FIELD_NAME = 'firstName'
+
+      const onSubmit = jest.fn()
+      const validate = jest.fn(values => {
+        let errors = {}
+        if (values[FIELD_NAME] && values[FIELD_NAME].length <= 4) {
+          errors[FIELD_NAME] = 'Must be at least 4 chars'
+        }
+        return errors
+      })
+
+      const required = jest.fn(value => (value ? undefined : 'Required'))
+
+      const FormComponent = () => {
+        const { form, handleSubmit } = useForm({
+          onSubmit,
+          validate
+        })
+        const firstName = useField(FIELD_NAME, form, required)
+
+        return (
+          <form onSubmit={handleSubmit}>
+            <label>First Name</label>
+            <input {...firstName.input} placeholder="First Name" />
+            {firstName.meta.touched && firstName.meta.error && (
+              <span>{firstName.meta.error}</span>
+            )}
+            <button type="submit">Submit</button>
+          </form>
+        )
+      }
+
+      act(() => {
+        ReactDOM.render(<FormComponent />, container)
+      })
+
+      expect(validate).toHaveBeenCalledTimes(2)
+      expect(required).toHaveBeenCalledTimes(1)
+
+      // span is not in dom because field error is not raised
+      expect(container.querySelector('span')).toBe(null)
+
+      // submit
+      const button = container.querySelector('button')
+      act(() => {
+        button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      })
+
+      // span has required error
+      expect(container.querySelector('span').innerHTML).toBe('Required')
+      // form validate function has not been called
+      expect(validate).toHaveBeenCalledTimes(2)
+      // onSubmit has not been called in any moment
+      expect(onSubmit).not.toHaveBeenCalled()
+
+      // why this is not updated again?
+      expect(required).toHaveBeenCalledTimes(1)
+    })
+  })
 })