fix(error initialisation): ensure array values in initialValues are represented in errors

re #79

Author: Larry Botha

lib/create-form.js

@@ -19,7 +19,7 @@ export const createForm = (config) => {
     values: () => util.cloneDeep(initialValues),
     errors: () =>
       validationSchema
-        ? util.getErrorsFromSchema(validationSchema.fields)
+        ? util.getErrorsFromSchema(initialValues, validationSchema.fields)
         : util.assignDeep(initialValues, NO_ERROR),
     touched: () => util.assignDeep(initialValues, !IS_TOUCHED),
   };

lib/util.js

@@ -35,19 +35,31 @@ function getValues(object) {
   return result;
 }
 
-function getErrorsFromSchema(schema, errors = {}) {
+// TODO: refactor this so as not to rely directly on yup's API
+// This should use dependency injection, with a default callback which may assume
+// yup as the validation schema
+function getErrorsFromSchema(initialValues, schema, errors = {}) {
   for (const key in schema) {
     switch (true) {
       case schema[key].type === 'object' && !isEmpty(schema[key].fields): {
         errors[key] = getErrorsFromSchema(
+          initialValues[key],
           schema[key].fields,
           Object.assign({}, errors[key]),
         );
         break;
       }
 
       case schema[key].type === 'array': {
-        errors[key] = [];
+        const values =
+          initialValues && initialValues[key] ? initialValues[key] : [];
+        errors[key] = values.map((value) =>
+          getErrorsFromSchema(
+            value,
+            schema[key].innerType.fields,
+            Object.assign({}, errors[key]),
+          ),
+        );
         break;
       }
 

test/library.spec.js

@@ -69,53 +69,68 @@ describe('createForm', () => {
       expect(instance.errors.subscribe).toBeDefined();
     });
 
-    it('should match the shape of validationSchema', (done) => {
-      const initialValues = {
-        objectWithPrimitives: {foo: '', bar: '', baz: ''},
-        arrayOfPrimitives: [],
-        arrayOfObjects: [],
-        objectWithMixedTypes: {
-          foo: '',
-          arrayOfPrimitives: [],
-        },
-      };
-      const validationSchema = yup.object().shape({
-        primitive: yup.string().required(),
-        arrayOfPrimitives: yup.array().of(yup.string()).required(),
-        objectWithMixedTypes: yup.object().shape({
-          foo: yup.string().required(),
-          arrayOfPrimitives: yup.array().of(yup.string()).required(),
-        }),
-        objectWithPrimitives: yup.object().shape({
+    describe('using validationSchema', () => {
+      it('initialises primitive properties to empty strings', async () => {
+        const initialValues = {foo: 'bar', baz: 'quux', nested: {foo: 'bar'}};
+        const validationSchema = yup.object().shape({
           foo: yup.string().required(),
-          bar: yup.string().required(),
-        }),
-        arrayOfObjects: yup.array().of(
-          yup.object({
-            foo: yup.string().required(),
-            bar: yup.string().required(),
-          }),
-        ),
-      });
-      instance = getInstance({
-        initialValues,
-        validationSchema,
+          baz: yup.string().required(),
+          nested: yup.object().shape({foo: yup.string().required()}),
+        });
+        const instance = getInstance({initialValues, validationSchema});
+        const $errors = await subscribeOnce(instance.errors);
+
+        expect($errors.foo).toBe('');
+        expect($errors.baz).toBe('');
+        expect($errors.nested.foo).toBe('');
       });
 
-      subscribeOnce(instance.errors).then((errors) => {
-        expect(errors.primitive).toBe('');
-        expect(errors.arrayOfPrimitives).toEqual([]);
+      it('does not initialise initialValues not defined in schema', async () => {
+        const initialValues = {notInSchema: ''};
+        const validationSchema = yup
+          .object()
+          .shape({foo: yup.string().required()});
+        const instance = getInstance({initialValues, validationSchema});
+        const $errors = await subscribeOnce(instance.errors);
+
+        expect($errors.notInSchema).toBeUndefined();
+      });
 
-        expect(errors.objectWithPrimitives.foo).toBe('');
-        expect(errors.objectWithPrimitives.bar).toBe('');
-        expect(errors.objectWithPrimitives.baz).not.toBeDefined();
+      it('contains an empty array when initialValues property is empty', async () => {
+        const initialValues = {foo: []};
+        const validationSchema = yup.object().shape({
+          stringArray: yup.array().of(yup.string().required()),
+          objectArray: yup
+            .array()
+            .of(
+              yup
+                .object()
+                .shape({foo: yup.array().of(yup.string().required())}),
+            ),
+          nested: yup
+            .object()
+            .shape({foo: yup.array().of(yup.string().required())}),
+        });
+        const instance = getInstance({initialValues, validationSchema});
+        const $errors = await subscribeOnce(instance.errors);
 
-        expect(errors.objectWithMixedTypes.foo).toBe('');
-        expect(errors.objectWithMixedTypes.arrayOfPrimitives).toEqual([]);
+        expect($errors.stringArray).toEqual([]);
+        expect($errors.objectArray).toEqual([]);
+        expect($errors.nested.foo).toEqual([]);
+      });
 
-        expect(errors.arrayOfObjects).toEqual([]);
+      it('preserves number of initial values for array properties', async () => {
+        const initialValues = {foo: [{name: 'foo'}, {name: 'bar'}]};
+        const validationSchema = yup.object().shape({
+          foo: yup
+            .array()
+            .of(yup.object().shape({name: yup.string().required()})),
+        });
+        const instance = getInstance({initialValues, validationSchema});
+        const $errors = await subscribeOnce(instance.errors);
+        const $form = await subscribeOnce(instance.form);
 
-        done();
+        expect($errors.foo.length).toEqual($form.foo.length);
       });
     });
   });