fix(next): DEVXP-2802: add some simple unit tests that highlight the wrong visibility behavior

## Description

This MR aims to fix some of the problems our _visibility_ calculation had, which happened when evaluating conditional (inside an `if/then/else` statement) visibility of fields inside a `fieldset`:

- tests were added to `visibility.test.ts` to highlight the main behavior we should implement
- a fix was added, and the main logic is:
  - fields are visible by default
  - a field is not visible if a schema for that field is has a `false` boolean value

Some quality of life improvements:
- a `dev` script that runs `tsup` in watch mode
- this script also sets an env variable that disables minification in the final build. This makes setting breakpoints in the consumer app way easier 🤓

Author: lukad

next/package.json

@@ -28,6 +28,7 @@
   },
   "scripts": {
     "build": "tsup",
+    "dev": "NODE_ENV=development tsup --watch",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "test:file": "jest --runTestsByPath",

next/src/form.ts

@@ -294,12 +294,19 @@ export function createHeadlessForm(
 ): FormResult {
   const initialValues = options.initialValues || {}
   const fields = buildFields({ schema })
+
+  // Making sure visibility is set correctly upon form creation, for initial values
   updateFieldVisibility(fields, initialValues, schema)
+
+  // TODO: check if we need this isError variable exposed
   const isError = false
 
   const handleValidation = (value: SchemaValue) => {
     const result = validate(value, schema, options.validationOptions)
+
+    // Updating field visibility based on the new value
     updateFieldVisibility(fields, value, schema, options.validationOptions)
+
     return result
   }
 

next/src/validation/schema.ts

@@ -143,7 +143,13 @@ export function validateSchema(
   }
 
   if (typeof schema === 'boolean') {
-    return schema ? [] : [{ path, validation: 'valid' }]
+    // It means the property does not exist in the payload
+    if (!schema && typeof value !== 'undefined') {
+      return [{ path, validation: 'valid' }]
+    }
+    else {
+      return []
+    }
   }
 
   const typeValidationErrors = validateType(value, schema, path)

next/src/visibility.ts

@@ -1,9 +1,21 @@
 import type { Field } from './field/type'
-import type { JsfObjectSchema, JsfSchema, NonBooleanJsfSchema, SchemaValue } from './types'
+import type { JsfObjectSchema, JsfSchema, NonBooleanJsfSchema, ObjectValue, SchemaValue } from './types'
 import type { ValidationOptions } from './validation/schema'
 import { validateSchema } from './validation/schema'
 import { isObjectValue } from './validation/util'
 
+/**
+ * Resets the visibility of all fields to true
+ * @param fields - The fields to reset
+ */
+function resetVisibility(fields: Field[]) {
+  for (const field of fields) {
+    field.isVisible = true
+    if (field.fields) {
+      resetVisibility(field.fields)
+    }
+  }
+}
 /**
  * Updates field visibility based on JSON schema conditional rules
  * @param fields - The fields to update
@@ -21,41 +33,59 @@ export function updateFieldVisibility(
     return
   }
 
+  // Reseting fields visibility to the default before re-calculating it
+  resetVisibility(fields)
+
   // Apply rules to current level of fields
   applySchemaRules(fields, values, schema, options)
 
   // Process nested object fields that have conditional logic
   for (const fieldName in schema.properties) {
     const fieldSchema = schema.properties[fieldName]
+    const field = fields.find(field => field.name === fieldName)
 
-    // Only process object schemas with conditional logic (allOf)
-    if (typeof fieldSchema !== 'object' || fieldSchema === null
-      || Array.isArray(fieldSchema) || !fieldSchema.allOf) {
-      continue
-    }
-
-    const objectField = fields.find(field => field.name === fieldSchema.title || field.name === fieldName)
-    if (!objectField || !objectField.fields || objectField.fields.length === 0) {
-      continue
+    if (field?.fields) {
+      applySchemaRules(field.fields, values[fieldName], fieldSchema as JsfObjectSchema, options)
     }
+  }
+}
 
-    const fieldValues = isObjectValue(values[fieldName])
-      ? values[fieldName]
-      : isObjectValue(values[objectField.name]) ? values[objectField.name] : {}
-
-    // Apply rules to nested fields
-    applySchemaRules(objectField.fields, fieldValues, fieldSchema as JsfObjectSchema, options)
-
-    // Only process nested fields if parent is visible
-    if (objectField.isVisible) {
-      updateFieldVisibility(
-        objectField.fields,
-        fieldValues,
-        fieldSchema as JsfObjectSchema,
-        options,
-      )
-    }
+/**
+ * Evaluates the conditional rules for a field
+ * @param values - The current field values
+ * @param schema - The JSON schema definition
+ * @param rule - Schema identifying the conditional rule
+ * @param options - Validation options
+ * @returns An object containing the rule and whether it matches
+ */
+function evaluateConditional(
+  values: ObjectValue,
+  schema: JsfObjectSchema,
+  rule: NonBooleanJsfSchema,
+  options: ValidationOptions = {},
+) {
+  const ifErrors = validateSchema(values, rule.if!, options)
+  const matches = ifErrors.length === 0
+
+  // Prevent fields from being shown when required fields have type errors
+  let hasTypeErrors = false
+  if (matches
+    && typeof rule.if === 'object'
+    && rule.if !== null
+    && Array.isArray(rule.if.required)) {
+    const requiredFields = rule.if.required
+    hasTypeErrors = requiredFields.some((fieldName) => {
+      if (!schema.properties || !schema.properties[fieldName]) {
+        return false
+      }
+      const fieldSchema = schema.properties[fieldName]
+      const fieldValue = values[fieldName]
+      const fieldErrors = validateSchema(fieldValue, fieldSchema, options)
+      return fieldErrors.some(error => error.validation === 'type')
+    })
   }
+
+  return { rule, matches: matches && !hasTypeErrors }
 }
 
 /**
@@ -65,99 +95,71 @@ export function updateFieldVisibility(
  * @param schema - The JSON schema containing the rules
  * @param options - Validation options
  *
- * Fields start with visibility based on their required status.
- * Conditional rules in the schema's allOf property can then:
- * - Make fields visible by including them in a required array
- * - Make fields hidden by setting them to false in properties
+ * Fields start visible by default, and they're set to hidden if their schema is
+ * set to false (a falsy schema means the schema fails whenever a value is sent for that field)
+ *
  */
 function applySchemaRules(
   fields: Field[],
   values: SchemaValue,
   schema: JsfObjectSchema,
   options: ValidationOptions = {},
 ) {
-  if (!schema.allOf || !Array.isArray(schema.allOf) || !isObjectValue(values)) {
+  if (!isObjectValue(values)) {
     return
   }
 
-  const conditionalRules = schema.allOf
-    .filter(rule => typeof rule === 'object' && rule !== null && 'if' in rule)
-    .map((rule) => {
-      const ruleObj = rule as NonBooleanJsfSchema
-
-      const ifErrors = validateSchema(values, ruleObj.if!, options)
-      const matches = ifErrors.length === 0
+  const conditionalRules: { rule: NonBooleanJsfSchema, matches: boolean }[] = []
 
-      // Prevent fields from being shown when required fields have type errors
-      let hasTypeErrors = false
-      if (matches
-        && typeof ruleObj.if === 'object'
-        && ruleObj.if !== null
-        && Array.isArray(ruleObj.if.required)) {
-        const requiredFields = ruleObj.if.required
-        hasTypeErrors = requiredFields.some((fieldName) => {
-          if (!schema.properties || !schema.properties[fieldName]) {
-            return false
-          }
-          const fieldSchema = schema.properties[fieldName]
-          const fieldValue = values[fieldName]
-          const fieldErrors = validateSchema(fieldValue, fieldSchema, options)
-          return fieldErrors.some(error => error.validation === 'type')
-        })
-      }
+  // If the schema has an if property, evaluate it and add it to the conditional rules array
+  if (schema.if) {
+    conditionalRules.push(evaluateConditional(values, schema, schema, options))
+  }
 
-      return { rule: ruleObj, matches: matches && !hasTypeErrors }
+  // If the schema has an allOf property, evaluate each rule and add it to the conditional rules array
+  (schema.allOf ?? [])
+    .filter(rule => typeof rule === 'object' && rule !== null && 'if' in rule)
+    .forEach((rule) => {
+      const result = evaluateConditional(values, schema, rule as NonBooleanJsfSchema, options)
+      conditionalRules.push(result)
     })
 
-  for (const field of fields) {
-    // Default visibility is based on required status
-    let isVisible = field.required
-
-    for (const { rule, matches } of conditionalRules) {
-      if (matches && rule.then) {
-        isVisible = isFieldVisible(field.name, rule.then, isVisible)
-      }
-      else if (!matches && rule.else) {
-        isVisible = isFieldVisible(field.name, rule.else, isVisible)
-      }
+  // Process the conditional rules
+  for (const { rule, matches } of conditionalRules) {
+    // If the rule matches, process the then branch
+    if (matches && rule.then) {
+      processBranch(fields, rule.then)
+    }
+    // If the rule doesn't match, process the else branch
+    else if (!matches && rule.else) {
+      processBranch(fields, rule.else)
     }
-
-    field.isVisible = isVisible
   }
 }
 
 /**
- * Determines whether a field should be visible based on a schema branch
- * @param fieldName - The name of the field
- * @param branch - The schema clause (either 'then' or 'else')
- * @param currentVisibility - The current visibility state
- * @returns The updated visibility state
- *
- * Visibility logic:
- * - If the field is in the required array → make visible
- * - If the field is explicitly false in properties → make hidden
- * - Otherwise, preserve current visibility
+ * Processes a branch of a conditional rule, updating the visibility of fields based on the branch's schema
+ * @param fields - The fields to process
+ * @param branch - The branch (schema representing and then/else) to process
  */
-function isFieldVisible(
-  fieldName: string,
-  branch: JsfSchema,
-  currentVisibility: boolean,
-): boolean {
-  let isVisible = currentVisibility
-
-  if (typeof branch === 'object' && branch !== null) {
-    if (Array.isArray(branch.required)) {
-      if (branch.required.includes(fieldName)) {
-        isVisible = true
-      }
-    }
-
-    if (branch.properties !== undefined) {
-      if (fieldName in branch.properties && branch.properties[fieldName] === false) {
-        isVisible = false
+function processBranch(fields: Field[], branch: JsfSchema) {
+  if (branch.properties) {
+    // Cycle through each property in the schema and search for any (possibly nested)
+    // fields that have a false boolean schema. If found, set the field's visibility to false
+    for (const fieldName in branch.properties) {
+      const fieldSchema = branch.properties[fieldName]
+      const field = fields.find(e => e.name === fieldName)
+      if (field) {
+        if (field?.fields) {
+          processBranch(field.fields, fieldSchema)
+        }
+        else if (fieldSchema === false) {
+          field.isVisible = false
+        }
+        else {
+          field.isVisible = true
+        }
       }
     }
   }
-
-  return isVisible
 }