@@ -63,6 +63,7 @@ import {
6363 schemaForErrorMessageSpecificity ,
6464 jsfConfigForErrorMessageSpecificity ,
6565 schemaInputTypeFile ,
66+ schemaWithNestedFieldsetsConditionals ,
6667} from './helpers' ;
6768import { mockConsole , restoreConsoleAndEnsureItWasNotCalled } from './testUtils' ;
6869import { createHeadlessForm } from '@/createHeadlessForm' ;
@@ -2200,6 +2201,191 @@ describe('createHeadlessForm', () => {
22002201 ) . toBeUndefined ( ) ;
22012202 } ) ;
22022203 } ) ;
2204+
2205+ describe ( 'supports conditionals over nested fieldsets' , ( ) => {
2206+ it ( 'retirement_plan fieldset is hidden when no values are provided' , ( ) => {
2207+ const { fields, handleValidation } = createHeadlessForm (
2208+ schemaWithNestedFieldsetsConditionals ,
2209+ { }
2210+ ) ;
2211+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2212+
2213+ expect ( getField ( fields , 'perks' , 'retirement_plan' ) . isVisible ) . toBe ( false ) ;
2214+
2215+ expect ( validateForm ( { perks : { } } ) ) . toEqual ( {
2216+ perks : {
2217+ benefits_package : 'Required field' ,
2218+ has_retirement_plan : 'Required field' ,
2219+ } ,
2220+ } ) ;
2221+
2222+ expect ( getField ( fields , 'perks' , 'retirement_plan' ) . isVisible ) . toBe ( false ) ;
2223+ } ) ;
2224+
2225+ it ( "submits without retirement_plan when user selects 'no' for has_retirement_plan" , ( ) => {
2226+ const { fields, handleValidation } = createHeadlessForm (
2227+ schemaWithNestedFieldsetsConditionals ,
2228+ { }
2229+ ) ;
2230+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2231+
2232+ expect (
2233+ validateForm ( { perks : { benefits_package : 'basic' , has_retirement_plan : 'no' } } )
2234+ ) . toBeUndefined ( ) ;
2235+
2236+ expect ( getField ( fields , 'perks' , 'retirement_plan' ) . isVisible ) . toBe ( false ) ;
2237+ } ) ;
2238+
2239+ it ( "retirement_plan fieldset is visible when user selects 'yes' for has_retirement_plan" , ( ) => {
2240+ const { fields, handleValidation } = createHeadlessForm (
2241+ schemaWithNestedFieldsetsConditionals ,
2242+ { }
2243+ ) ;
2244+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2245+
2246+ expect (
2247+ validateForm ( {
2248+ perks : {
2249+ benefits_package : 'basic' ,
2250+ has_retirement_plan : 'yes' ,
2251+ declare_amount : 'yes' ,
2252+ retirement_plan : { plan_name : 'test' , year : 2025 } ,
2253+ } ,
2254+ } )
2255+ ) . toEqual ( {
2256+ perks : {
2257+ retirement_plan : {
2258+ amount : 'Required field' ,
2259+ } ,
2260+ } ,
2261+ } ) ;
2262+
2263+ expect ( getField ( fields , 'perks' , 'retirement_plan' ) . isVisible ) . toBe ( true ) ;
2264+ expect ( getField ( fields , 'perks' , 'declare_amount' ) . isVisible ) . toBe ( true ) ;
2265+ expect ( getField ( fields , 'perks' , 'declare_amount' ) . default ) . toBe ( 'yes' ) ;
2266+ expect ( getField ( fields , 'perks' , 'retirement_plan' , 'amount' ) . isVisible ) . toBe ( true ) ;
2267+ } ) ;
2268+
2269+ it ( "retirement_plan's amount field is hidden when user selects 'no' for declare_amount" , ( ) => {
2270+ const { fields, handleValidation } = createHeadlessForm (
2271+ schemaWithNestedFieldsetsConditionals ,
2272+ { }
2273+ ) ;
2274+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2275+
2276+ expect (
2277+ validateForm ( {
2278+ perks : {
2279+ benefits_package : 'basic' ,
2280+ has_retirement_plan : 'yes' ,
2281+ declare_amount : 'no' ,
2282+ retirement_plan : { plan_name : 'test' , year : 2025 } ,
2283+ } ,
2284+ } )
2285+ ) . toBeUndefined ( ) ;
2286+
2287+ expect ( getField ( fields , 'perks' , 'retirement_plan' ) . isVisible ) . toBe ( true ) ;
2288+ expect ( getField ( fields , 'perks' , 'declare_amount' ) . isVisible ) . toBe ( true ) ;
2289+ expect ( getField ( fields , 'perks' , 'retirement_plan' , 'amount' ) . isVisible ) . toBe ( false ) ;
2290+ } ) ;
2291+
2292+ it ( 'submits with valid retirement_plan' , async ( ) => {
2293+ const { handleValidation } = createHeadlessForm (
2294+ schemaWithNestedFieldsetsConditionals ,
2295+ { }
2296+ ) ;
2297+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2298+
2299+ expect (
2300+ validateForm ( {
2301+ perks : {
2302+ benefits_package : 'plus' ,
2303+ has_retirement_plan : 'yes' ,
2304+ retirement_plan : { plan_name : 'test' , year : 2025 , amount : 1000 } ,
2305+ } ,
2306+ } )
2307+ ) . toBeUndefined ( ) ;
2308+ } ) ;
2309+ } ) ;
2310+
2311+ describe ( 'supports computed values based on values from nested fieldsets' , ( ) => {
2312+ it ( "computed value for total_contributions is calculated correctly with defaults when user selects 'yes' for has_retirement_plan" , ( ) => {
2313+ const { fields, handleValidation } = createHeadlessForm (
2314+ schemaWithNestedFieldsetsConditionals ,
2315+ { }
2316+ ) ;
2317+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2318+
2319+ expect (
2320+ validateForm ( {
2321+ perks : {
2322+ benefits_package : 'basic' ,
2323+ has_retirement_plan : 'yes' ,
2324+ declare_amount : 'no' ,
2325+ retirement_plan : {
2326+ plan_name : 'test' ,
2327+ create_plan : 'no' ,
2328+ } ,
2329+ } ,
2330+ } )
2331+ ) . toEqual ( { perks : { retirement_plan : { year : 'Required field' } } } ) ;
2332+
2333+ expect ( getField ( fields , 'total_contributions' ) . isVisible ) . toBe ( true ) ;
2334+ expect ( getField ( fields , 'total_contributions' ) . default ) . toBe ( 0 ) ;
2335+ expect ( getField ( fields , 'total_contributions' ) . const ) . toBe ( 0 ) ;
2336+ } ) ;
2337+
2338+ it ( 'computed value for total_contributions is calculated correctly based on the selected months' , ( ) => {
2339+ const { fields, handleValidation } = createHeadlessForm (
2340+ schemaWithNestedFieldsetsConditionals ,
2341+ { }
2342+ ) ;
2343+ const validateForm = ( vals ) => friendlyError ( handleValidation ( vals ) ) ;
2344+
2345+ expect (
2346+ validateForm ( {
2347+ perks : {
2348+ benefits_package : 'basic' ,
2349+ has_retirement_plan : 'yes' ,
2350+ declare_amount : 'no' ,
2351+ retirement_plan : {
2352+ plan_name : 'test' ,
2353+ year : 2025 ,
2354+ create_plan : 'yes' ,
2355+ planned_contributions : {
2356+ months : [ 'january' , 'february' , 'march' , 'april' , 'may' ] ,
2357+ } ,
2358+ } ,
2359+ } ,
2360+ } )
2361+ ) . toBeUndefined ( ) ;
2362+
2363+ expect ( getField ( fields , 'total_contributions' ) . isVisible ) . toBe ( true ) ;
2364+ expect ( getField ( fields , 'total_contributions' ) . default ) . toBe ( 5 ) ;
2365+ expect ( getField ( fields , 'total_contributions' ) . const ) . toBe ( 5 ) ;
2366+
2367+ expect (
2368+ validateForm ( {
2369+ perks : {
2370+ benefits_package : 'basic' ,
2371+ has_retirement_plan : 'yes' ,
2372+ declare_amount : 'no' ,
2373+ retirement_plan : {
2374+ plan_name : 'test' ,
2375+ year : 2025 ,
2376+ create_plan : 'yes' ,
2377+ planned_contributions : {
2378+ months : [ 'january' , 'february' , 'march' ] ,
2379+ } ,
2380+ } ,
2381+ } ,
2382+ } )
2383+ ) . toBeUndefined ( ) ;
2384+
2385+ expect ( getField ( fields , 'total_contributions' ) . default ) . toBe ( 3 ) ;
2386+ expect ( getField ( fields , 'total_contributions' ) . const ) . toBe ( 3 ) ;
2387+ } ) ;
2388+ } ) ;
22032389 } ) ;
22042390
22052391 it ( 'support "email" field type' , ( ) => {
0 commit comments