Simplifying batch fields validation action + unit tests

Author: davidkpiano

src/action-types.js

@@ -15,6 +15,7 @@ const actionTypes = {
   SET_TOUCHED: 'rrf/setTouched',
   SET_UNTOUCHED: 'rrf/setUntouched',
   SET_VALIDITY: 'rrf/setValidity',
+  SET_FIELDS_VALIDITY: 'rrf/setFieldsValidity',
   SET_VIEW_VALUE: 'rrf/setViewValue',
   RESET_VALIDITY: 'rrf/resetValidity',
   BATCH: 'rrf/batch',

src/actions/field-actions.js

@@ -1,9 +1,8 @@
 import _get from 'lodash/get';
-import map from 'lodash/map';
+import mapValues from 'lodash/mapValues';
 
-import batchActions from './batch-actions';
 import actionTypes from '../action-types';
-import { getValidity, getForm } from '../utils';
+import { getValidity, getForm, isValid } from '../utils';
 
 const focus = model => ({
   type: actionTypes.FOCUS,
@@ -42,6 +41,12 @@ const setValidity = (model, validity) => ({
   validity,
 });
 
+const setFieldsValidity = (model, fieldsValidity) => ({
+  type: actionTypes.SET_FIELDS_VALIDITY,
+  model,
+  fieldsValidity,
+});
+
 const setErrors = (model, errors) => ({
   type: actionTypes.SET_ERRORS,
   model,
@@ -129,30 +134,26 @@ const validateErrors = (model, errorValidators) => (dispatch, getState) => {
 const validateFields = (model, fieldValidators, callback) => (dispatch, getState) => {
   const value = _get(getState(), model);
 
-  const validationActions = map(fieldValidators, (validator, field) => {
-    const fieldModel = field
-      ? [model, field].join('.')
-      : model;
+  const fieldsValidity = mapValues(fieldValidators, (validator, field) => {
     const fieldValue = field
       ? _get(value, field)
       : value;
 
     const fieldValidity = getValidity(validator, fieldValue);
 
-    return setValidity(fieldModel, fieldValidity);
+    return fieldValidity;
   });
 
   if (callback) {
-    validationActions.push((_, _getState) => {
-      const form = getForm(_getState(), model);
+    const form = getForm(getState(), model);
+    const formValid = form ? form.valid : true;
 
-      if (form && form.valid) {
-        callback();
-      }
-    });
+    if (formValid && isValid(fieldsValidity)) {
+      callback();
+    }
   }
 
-  dispatch(batchActions.batch(model, validationActions));
+  dispatch(setFieldsValidity(model, fieldsValidity));
 };
 
 export default {

src/reducers/form-reducer.js

@@ -4,6 +4,7 @@ import icepick from 'icepick';
 import isBoolean from 'lodash/isBoolean';
 import isEqual from 'lodash/isEqual';
 import isPlainObject from 'lodash/isPlainObject';
+import map from 'lodash/map';
 import mapValues from 'lodash/mapValues';
 import toPath from 'lodash/toPath';
 import startsWith from 'lodash/startsWith';
@@ -258,6 +259,13 @@ function _createFormReducer(model, initialState) {
         });
       }
 
+      case actionTypes.SET_FIELDS_VALIDITY:
+        return map(action.fieldsValidity, (fieldValidity, field) => ({
+          type: actionTypes.SET_VALIDITY,
+          model: `${model}.${field}`,
+          validity: fieldValidity,
+        })).reduce(formReducer, state);
+
       case actionTypes.SET_ERRORS: {
         if (isPlainObject(action.errors)) {
           validity = {

test/field-actions-spec.js

@@ -1,6 +1,7 @@
 import { assert } from 'chai';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import sinon from 'sinon';
 
 import { actions, actionTypes, formReducer, initialFieldState } from '../src';
 import { initialFormState } from '../src/reducers/form-reducer';
@@ -1282,40 +1283,22 @@ describe('field actions', () => {
     it('should set the validity of multiple fields in the same form', (done) => {
       const store = mockStore(
         () => ({ test: { foo: 'bar' } }),
-        [{
-          actions: [
-            {
-              model: 'test',
-              type: 'rrf/setValidity',
-              validity: true,
-            },
-            {
-              model: 'test.foo',
-              type: 'rrf/setValidity',
-              validity: true,
-            },
-            {
-              model: 'test.foo_valid',
-              type: 'rrf/setValidity',
-              validity: true,
-            },
-            {
-              model: 'test.foo_invalid',
-              type: 'rrf/setValidity',
-              validity: false,
-            },
-            {
-              model: 'test.with_keys',
-              type: 'rrf/setValidity',
-              validity: {
+        [
+          {
+            fieldsValidity: {
+              '': true,
+              foo: true,
+              foo_invalid: false,
+              foo_valid: true,
+              with_keys: {
                 key_invalid: false,
                 key_valid: true,
               },
             },
-          ],
-          model: 'test',
-          type: 'rrf/batch',
-        }],
+            model: 'test',
+            type: actionTypes.SET_FIELDS_VALIDITY,
+          },
+        ],
         done);
 
       const action = actions.validateFields('test', {
@@ -1331,5 +1314,53 @@ describe('field actions', () => {
 
       store.dispatch(action);
     });
+
+    it('should call a callback if validation passes', (done) => {
+      const callback = sinon.spy((val) => console.log('hey', val));
+
+      const store = mockStore(
+        () => ({ test: { foo: 'bar' } }),
+        [{
+          model: 'test',
+          type: actionTypes.SET_FIELDS_VALIDITY,
+          fieldsValidity: {
+            foo: true,
+          },
+        }],
+        () => {
+          assert.isTrue(callback.calledOnce);
+          done();
+        });
+
+      const action = actions.validateFields('test', {
+        foo: (val) => val === 'bar',
+      }, callback);
+
+      store.dispatch(action);
+    });
+
+    it('should NOT call a callback if validation fails', (done) => {
+      const callback = sinon.spy((val) => console.log('hey', val));
+
+      const store = mockStore(
+        () => ({ test: { foo: 'bar' } }),
+        [{
+          model: 'test',
+          type: actionTypes.SET_FIELDS_VALIDITY,
+          fieldsValidity: {
+            foo: false,
+          },
+        }],
+        () => {
+          assert.isTrue(callback.notCalled);
+          done();
+        });
+
+      const action = actions.validateFields('test', {
+        foo: (val) => val === 'invalid',
+      }, callback);
+
+      store.dispatch(action);
+    });
   });
 });