fix(shape of initial errors)

tjinauyeung · Dec 9, 2020 · 704f461 · 704f461
1 parent b87046a
commit 704f461
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/lib/create-form.js b/lib/create-form.js
@@ -21,7 +21,7 @@ export const createForm = (config) => {
 
   const getInitial = {
     values: () => util.cloneDeep(initialValues),
-    errors: () => util.assignDeep(initialValues, NO_ERROR),
+    errors: () => validationSchema ? util.getErrorsFromSchema(validationSchema.fields) : util.assignDeep(initialValues, NO_ERROR),
     touched: () => util.assignDeep(initialValues, !IS_TOUCHED),
   };
 
@@ -167,7 +167,7 @@ export const createForm = (config) => {
 
   function clearErrorsAndSubmit(values) {
     return Promise.resolve()
-      .then(() => errors.set(util.assignDeep(values, '')))
+      .then(() => errors.set(getInitial.errors()))
       .then(() => onSubmit(values, form, errors))
       .finally(() => isSubmitting.set(false));
   }

diff --git a/lib/util.js b/lib/util.js
@@ -35,6 +35,20 @@ function getValues(object) {
   return result;
 }
 
+function getErrorsFromSchema(schema, errors = {}) {
+  for (const key in schema) {
+    if(schema[key].type === 'object') {
+      errors[key] = getErrorsFromSchema(schema[key].fields, Object.assign({}, errors));
+    }
+
+    if(schema[key].type !== 'object') {
+      errors[key] = '';
+    }
+  }
+
+  return errors;
+}
+
 function assignDeep(object, value) {
   if (Array.isArray(object)) {
     return object.map((o) => assignDeep(o, value));
@@ -124,6 +138,7 @@ function getIn(schema, path, value, context) {
 }
 
 export const util = {
+  getErrorsFromSchema,
   assignDeep,
   cloneDeep,
   getValues,

diff --git a/test/lib.spec.js → test/library.spec.js b/test/lib.spec.js → test/library.spec.js
@@ -1,11 +1,12 @@
+/* globals beforeEach, console, describe, expect, it, require, jest */
 const {createForm} = require('../lib');
 const yup = require('yup');
 const Chance = require('chance');
 
 const chance = new Chance();
 
 function nonEmpty(array) {
-  return array.filter((str) => str !== '');
+  return array.filter((string) => string !== '');
 }
 
 function subscribeOnce(observable) {
@@ -72,11 +73,30 @@ describe('createForm', () => {
       expect(instance.errors.subscribe).toBeDefined();
     });
 
-    it('contains the current values which are accessed by subscription', () => {
+    it('should match the shape of validationSchema', () => {
+      instance = getInstance({
+        initialValues: {
+          name: '',
+          address: {
+            street: '',
+            city: '',
+            country: ''
+          },
+        },
+        validationSchema: yup.object().shape({
+          name: yup.string().required(),
+          address: yup.object().shape({
+            street: yup.string().required(),
+            city: yup.string().required()
+          })
+        })
+      });
+
       subscribeOnce(instance.errors).then((errors) => {
         expect(errors.name).toBe('');
-        expect(errors.email).toBe('');
-        expect(errors.country).toBe('');
+        expect(errors.address.street).toBe('');
+        expect(errors.address.city).toBe('');
+        expect(errors.address.country).not.toBeDefined();
       });
     });
   });