fix(useForm): update form handling for missing configuration

aprendendofelipe · Nov 7, 2024 · 1f3ce99 · 1f3ce99
1 parent 566a28f
commit 1f3ce99
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/examples/form/components/Checkout.jsx b/examples/form/components/Checkout.jsx
@@ -39,7 +39,7 @@ export function Checkout({ fields, product, store }) {
 
       <FormField {...getFieldProps('fullName')} />
       <ResponsiveFormRow>
-        <FormField {...getFieldProps('email')} sx={{ flex: 1, minWidth: '240px' }} />
+        <FormField {...getFieldProps('emailConfirmable')} sx={{ flex: 1, minWidth: '240px' }} />
         <FormField {...getFieldProps('emailConfirmation')} sx={{ flex: 1, minWidth: '240px' }} />
       </ResponsiveFormRow>
       <ResponsiveFormRow>

diff --git a/examples/form/form-config.js b/examples/form/form-config.js
@@ -60,7 +60,7 @@ const installmentField = {
 
 export const checkoutFields = {
   fullName,
-  email,
+  emailConfirmable,
   emailConfirmation,
   document: brDocs,
   phone,

diff --git a/packages/forms/src/useForm.js b/packages/forms/src/useForm.js
@@ -29,8 +29,9 @@ export function useForm(initialConfig, { submitDisabled = true, submitHidden = f
       const errors = {};
       let hasErrors = false;
 
-      for (const [fieldName, fieldState] of Object.entries(state)) {
-        const { validateOnBlurAndSubmit, prepare } = processors[fieldName];
+      for (const [fieldName, processor] of Object.entries(processors)) {
+        const { validateOnBlurAndSubmit, prepare } = processor;
+        const fieldState = state[fieldName];
 
         if (!submitDisabled && fieldState.disabled === true) {
           continue;
@@ -61,6 +62,14 @@ export function useForm(initialConfig, { submitDisabled = true, submitHidden = f
 
   const getFieldProps = useCallback(
     (name) => {
+      if (!processors[name]) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error(`Field "${name}" not found in config.`);
+        } else {
+          return { hidden: true };
+        }
+      }
+
       const fieldState = state[name];
       const { format, prepare, onValidChange, validateOnBlurAndSubmit, validateOnChange } = processors[name];
       let onBlurError = null;

diff --git a/packages/forms/src/useForm.test.js b/packages/forms/src/useForm.test.js
@@ -84,6 +84,23 @@ describe('useForm', () => {
       const empty = renderHook(() => useForm({})).result.current;
       expect(empty).toStrictEqual(expectedResult);
     });
+
+    describe('Missing configuration', () => {
+      it('should throw new Error("Field not found in config.")', () => {
+        const { result } = renderHook(() => useForm(initialConfig));
+        expect(() => result.current.getFieldProps('notFound')).toThrowError('Field "notFound" not found in config.');
+      });
+
+      it('should return hidden field', () => {
+        const originalEnv = process.env.NODE_ENV;
+        process.env.NODE_ENV = 'production';
+        const { result } = renderHook(() => useForm(initialConfig));
+        const hiddenField = result.current.getFieldProps('notFound');
+        process.env.NODE_ENV = originalEnv;
+
+        expect(hiddenField).toStrictEqual({ hidden: true });
+      });
+    });
   });
 
   describe('update state', () => {