Fixes nested fieldset validations

Author: danielcardoso5

v0/src/tests/createHeadlessForm.test.js

@@ -63,7 +63,7 @@ import {
   schemaForErrorMessageSpecificity,
   jsfConfigForErrorMessageSpecificity,
   schemaInputTypeFile,
-  schemaWithRootFieldsetsConditionals,
+  schemaWithNestedFieldsetsConditionals,
 } from './helpers';
 import { mockConsole, restoreConsoleAndEnsureItWasNotCalled } from './testUtils';
 import { createHeadlessForm } from '@/createHeadlessForm';
@@ -2202,44 +2202,78 @@ describe('createHeadlessForm', () => {
         });
       });
 
-      describe('supports root fieldsets conditionals', () => {
+      describe('supports fieldsets conditionals over nested fieldsets', () => {
         it('Given a basic retirement, the perks.has_pension is hidden', async () => {
           const { fields, handleValidation } = createHeadlessForm(
-            schemaWithRootFieldsetsConditionals,
+            schemaWithNestedFieldsetsConditionals,
             {}
           );
           const validateForm = (vals) => friendlyError(handleValidation(vals));
 
-          expect(validateForm({})).toEqual({
+          expect(validateForm({ perks: {} })).toEqual({
             perks: {
-              retirement: 'Required field',
+              benefits_package: 'Required field',
+            },
+          });
+
+          // retirement_plan is not visible
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(false);
+
+          // can submit without retirement_plan
+          expect(validateForm({ perks: { benefits_package: 'basic' } })).toBeUndefined();
+
+          expect(
+            validateForm({
+              perks: { benefits_package: 'plus', has_retirement_plan: 'yes' },
+            })
+          ).toEqual({
+            perks: {
+              retirement_plan: {
+                plan_name: 'Required field',
+                year: 'Required field',
+                amount: 'Required field',
+              },
             },
           });
 
-          // has_pension is not visible
-          expect(getField(fields, 'perks', 'has_pension').isVisible).toBe(false);
+          // retirement_plan becomes visible
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(true);
 
           expect(
             validateForm({
-              perks: { retirement: 'plus' },
+              perks: {
+                benefits_package: 'plus',
+                has_retirement_plan: 'yes',
+                retirement_plan: { plan_name: 'test', year: 2025 },
+              },
             })
           ).toEqual({
             perks: {
-              has_pension: 'Required field',
+              retirement_plan: {
+                amount: 'Required field',
+              },
             },
           });
 
-          // field becomes visible
-          expect(getField(fields, 'perks', 'has_pension').isVisible).toBe(true);
+          // submit with valid retirement_plan
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'plus',
+                has_retirement_plan: 'yes',
+                retirement_plan: { plan_name: 'test', year: 2025, amount: 1000 },
+              },
+            })
+          ).toBeUndefined();
 
           expect(
             validateForm({
-              perks: { retirement: 'basic' },
+              perks: { benefits_package: 'plus', has_retirement_plan: 'no' },
             })
           ).toBeUndefined();
 
-          // field becomes invisible
-          expect(getField(fields, 'perks', 'has_pension').isVisible).toBe(false);
+          // retirement_plan becomes invisible
+          expect(getField(fields, 'perks', 'retirement_plan').isVisible).toBe(false);
         });
       });
     });

v0/src/tests/helpers.js

@@ -1939,7 +1939,6 @@ export const schemaWithConditionalToFieldset = {
       then: {
         properties: {
           pto: {
-            $comment: '@BUG: This description does not disappear once activated.',
             description: 'Above 30 hours, the PTO needs to be at least 20 days.',
             minimum: 20,
           },
@@ -1972,14 +1971,14 @@ export const schemaWithConditionalToFieldset = {
   required: ['perks', 'work_hours_per_week'],
 };
 
-export const schemaWithRootFieldsetsConditionals = {
+export const schemaWithNestedFieldsetsConditionals = {
   additionalProperties: false,
   type: 'object',
   properties: {
     perks: {
       additionalProperties: false,
       properties: {
-        retirement: {
+        benefits_package: {
           oneOf: [
             {
               const: 'basic',
@@ -1990,13 +1989,13 @@ export const schemaWithRootFieldsetsConditionals = {
               title: 'Plus',
             },
           ],
-          title: 'Retirement',
+          title: 'Benefits package',
           type: 'string',
           'x-jsf-presentation': {
             inputType: 'radio',
           },
         },
-        has_pension: {
+        has_retirement_plan: {
           oneOf: [
             {
               const: 'yes',
@@ -2007,30 +2006,48 @@ export const schemaWithRootFieldsetsConditionals = {
               title: 'No',
             },
           ],
-          title: 'Has pension',
+          title: 'Has retirement plan?',
           type: 'string',
           'x-jsf-presentation': {
             inputType: 'radio',
           },
         },
+        retirement_plan: {
+          type: 'object',
+          title: 'Retirement plan',
+          properties: {
+            plan_name: {
+              type: 'string',
+              title: 'Plan name',
+            },
+            year: {
+              type: 'number',
+              title: 'Year',
+            },
+            amount: {
+              type: 'number',
+              title: 'Amount',
+            },
+          },
+          required: ['plan_name', 'year', 'amount'],
+        },
       },
-      required: ['retirement'],
+      required: ['benefits_package'],
       title: 'Perks',
       type: 'object',
       'x-jsf-presentation': {
         inputType: 'fieldset',
       },
     },
   },
-  required: ['perks'],
   allOf: [
     {
       if: {
         properties: {
           perks: {
             properties: {
-              retirement: {
-                const: 'basic',
+              has_retirement_plan: {
+                const: 'no',
               },
             },
           },
@@ -2040,18 +2057,11 @@ export const schemaWithRootFieldsetsConditionals = {
         properties: {
           perks: {
             properties: {
-              has_pension: false,
+              retirement_plan: false,
             },
           },
         },
       },
-      else: {
-        properties: {
-          perks: {
-            required: ['has_pension'],
-          },
-        },
-      },
     },
   ],
 };

v0/src/yupSchema.js

@@ -467,9 +467,9 @@ export function buildYupSchema(field, config, logic) {
     const fieldSetShape = {};
     innerFields.forEach((fieldSetfield) => {
       if (fieldSetfield.fields) {
-        fieldSetShape[fieldSetfield.name] = object().shape(
-          buildFieldSetSchema(fieldSetfield.fields)
-        );
+        fieldSetShape[fieldSetfield.name] = object()
+          .shape(buildFieldSetSchema(fieldSetfield.fields))
+          .nullable();
       } else {
         fieldSetShape[fieldSetfield.name] = buildYupSchema(
           {