@remoteoss/json-schema-form 0.11.9-dev.20241210213029 → 0.11.10-beta.0

package/src/tests/conditions.test.js

@@ -1,58 +1,58 @@
 import { createHeadlessForm } from '../createHeadlessForm';
 
-it('Should allow check of a nested property in a conditional', () => {
-  const { handleValidation } = createHeadlessForm(
-    {
-      additionalProperties: false,
-      allOf: [
-        {
-          if: {
-            properties: {
-              parent: {
-                properties: {
-                  child: {
-                    const: 'yes',
+describe('Conditional attributes updated', () => {
+  it('Should allow check of a nested property in a conditional', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        allOf: [
+          {
+            if: {
+              properties: {
+                parent: {
+                  properties: {
+                    child: {
+                      const: 'yes',
+                    },
                   },
+                  required: ['child'],
                 },
-                required: ['child'],
               },
+              required: ['parent'],
             },
-            required: ['parent'],
+            then: { required: ['parent_sibling'] },
           },
-          then: { required: ['parent_sibling'] },
-        },
-      ],
-      properties: {
-        parent: {
-          additionalProperties: false,
-          properties: {
-            child: {
-              oneOf: [{ const: 'yes' }, { const: 'no' }],
-              type: 'string',
+        ],
+        properties: {
+          parent: {
+            additionalProperties: false,
+            properties: {
+              child: {
+                oneOf: [{ const: 'yes' }, { const: 'no' }],
+                type: 'string',
+              },
             },
+            required: ['child'],
+            type: 'object',
+          },
+          parent_sibling: {
+            type: 'integer',
           },
-          required: ['child'],
-          type: 'object',
-        },
-        parent_sibling: {
-          type: 'integer',
         },
+        required: ['parent'],
+        type: 'object',
       },
-      required: ['parent'],
-      type: 'object',
-    },
-    { strictInputType: false }
-  );
-  expect(handleValidation({ parent: { child: 'no' } }).formErrors).toEqual(undefined);
-  expect(handleValidation({ parent: { child: 'yes' } }).formErrors).toEqual({
-    parent_sibling: 'Required field',
+      { strictInputType: false }
+    );
+    expect(handleValidation({ parent: { child: 'no' } }).formErrors).toEqual(undefined);
+    expect(handleValidation({ parent: { child: 'yes' } }).formErrors).toEqual({
+      parent_sibling: 'Required field',
+    });
+    expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
+      undefined
+    );
   });
-  expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
-    undefined
-  );
-});
 
-describe('Conditional attributes updated', () => {
   it('Update basic case with const, default, maximum', () => {
     const { fields, handleValidation } = createHeadlessForm(
       {
@@ -480,116 +480,232 @@ describe('Conditional with a minimum value check', () => {
   });
 });
 
-describe('Multiple conditions affecting the same field', () => {
-  it('Should apply all conditions', () => {
+describe('Conditional with literal booleans', () => {
+  it('handles true case', () => {
     const schema = {
       properties: {
-        answer: { type: 'string' },
-        number: { type: 'number' },
-      },
-      allOf: [
-        {
-          if: { properties: { answer: { const: 'yes' } } },
-          then: { properties: { number: { minimum: 10 } } },
+        is_full_time: {
+          type: 'boolean',
         },
-        {
-          if: { properties: { answer: { const: 'yes' } } },
-          then: { properties: { number: { maximum: 20 } } },
+        salary: {
+          type: 'number',
         },
-      ],
+      },
+      required: [],
+      if: true,
+      then: {
+        required: ['is_full_time'],
+      },
+      else: {
+        required: ['salary'],
+      },
     };
+    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
 
-    const { handleValidation } = createHeadlessForm(schema, { strictInputType: false });
-    expect(handleValidation({ answer: 'yes', number: 15 }).formErrors).toEqual(undefined);
-    expect(handleValidation({ answer: 'yes', number: 9 }).formErrors).toEqual({
-      number: 'Must be greater or equal to 10',
+    handleValidation({});
+
+    expect(fields[0]).toMatchObject({
+      name: 'is_full_time',
+      required: true,
     });
-    expect(handleValidation({ answer: 'yes', number: 21 }).formErrors).toEqual({
-      number: 'Must be smaller or equal to 20',
+    expect(fields[1]).toMatchObject({
+      name: 'salary',
+      required: false,
     });
-    expect(handleValidation({ answer: 'no', number: 9 }).formErrors).toBeUndefined();
-    expect(handleValidation({ answer: 'no', number: 15 }).formErrors).toBeUndefined();
-    expect(handleValidation({ answer: 'no', number: 21 }).formErrors).toBeUndefined();
   });
 
-  it('Accepts unsatisfiable conflicting conditions', () => {
-    const unsatisfiableSchema = {
+  it('handles false case', () => {
+    const schema = {
       properties: {
-        has_books: { type: 'string' },
-        books: {
+        is_full_time: {
+          type: 'boolean',
+        },
+        salary: {
           type: 'number',
-          const: 4,
         },
       },
-      required: ['books'],
-      allOf: [
-        {
-          if: { properties: { has_books: { const: 'yes' } } },
-          then: {
-            properties: {
-              books: {
-                minimum: 5,
-              },
-            },
+      required: [],
+      if: false,
+      then: {
+        required: ['is_full_time'],
+      },
+      else: {
+        required: ['salary'],
+      },
+    };
+    const { fields, handleValidation } = createHeadlessForm(schema, { strictInputType: false });
+
+    handleValidation({});
+
+    expect(fields[0]).toMatchObject({
+      name: 'is_full_time',
+      required: false,
+    });
+    expect(fields[1]).toMatchObject({
+      name: 'salary',
+      required: true,
+    });
+  });
+});
+
+describe('Conditionals - bugs and code-smells', () => {
+  // Why do we have these bugs?
+  // To be honest we never realized it much later later.
+  // We will fix them in the next major version.
+
+  const schemaHasPet = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      has_pet: {
+        title: 'Has Pet',
+        description: 'Do you have a pet?',
+        oneOf: [
+          { title: 'Yes', const: 'yes' },
+          { title: 'No', const: 'no' },
+        ],
+        type: 'string',
+      },
+      pet_name: {
+        title: "Pet's name",
+        type: 'string',
+      },
+    },
+    required: ['has_pet'],
+    allOf: [
+      {
+        if: {
+          properties: {
+            has_pet: { const: 'yes' },
           },
+          required: ['has_pet'],
         },
-      ],
-    };
+        then: {
+          required: ['pet_name'],
+        },
+        else: {
+          properties: {
+            pet_name: false,
+          },
+        },
+      },
+    ],
+  };
 
-    // This is intentionally not able to be satisfied.
-    const { handleValidation } = createHeadlessForm(unsatisfiableSchema, {
+  it('Given values from hidden fields, it does not thrown an error (@bug)', () => {
+    const { fields, handleValidation } = createHeadlessForm(schemaHasPet, {
       strictInputType: false,
     });
-    expect(handleValidation({ has_books: 'yes', books: 4 }).formErrors).toEqual({
-      books: 'Must be greater or equal to 5',
+
+    const petNameField = fields[1];
+
+    const validation = handleValidation({ has_pet: 'no', pet_name: 'Max' });
+    expect(petNameField.isVisible).toBe(false);
+
+    // Bug: 🐛 It does not thrown an error,
+    // but it should to be compliant with JSON Schema specs.
+    expect(validation.formErrors).toBeUndefined();
+    // The error should be something like:
+    // expect(validation.formErrors).toEqual({ pet_name: 'Not allowed.'});
+  });
+
+  it('Given values from hidden fields, it mutates the values (@bug)', () => {
+    const { handleValidation } = createHeadlessForm(schemaHasPet, {
+      strictInputType: false,
     });
-    expect(handleValidation({ has_books: 'yes', books: 5 }).formErrors).toEqual({
-      books: 'The only accepted value is 4.',
+
+    const newValues = { has_pet: 'no', pet_name: 'Max' };
+
+    const validation = handleValidation(newValues);
+
+    expect(newValues).toEqual({
+      has_pet: 'no',
+      pet_name: null, // BUG! 🐛 Should still be "Max", should not be mutated.
     });
+
+    // Same bug as explained in the previous test.
+    expect(validation.formErrors).toBeUndefined();
   });
 
-  it('Computed attributes also get the same treatment for unsatisfiable conflicting conditions', () => {
-    const unsatisfiableSchema = {
-      properties: {
-        has_books: { type: 'string' },
-        books: {
-          type: 'number',
-          'x-jsf-logic-computedAttrs': {
-            const: 'book_space',
-          },
+  it('Given multiple conditionals to the same field, it only applies the last one (@bug) - case 1', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        properties: {
+          field_a: { type: 'string' },
+          field_b: { type: 'string' },
+          field_c: { type: 'number' },
         },
-      },
-      required: ['books'],
-      allOf: [
-        {
-          if: { properties: { has_books: { const: 'yes' } } },
-          then: {
-            properties: {
-              books: {
-                minimum: 5,
-              },
+        allOf: [
+          {
+            if: {
+              properties: { field_a: { const: 'yes' } },
+              required: ['field_a'],
             },
+            then: { properties: { field_c: { minimum: 30 } } },
           },
-        },
-      ],
-      'x-jsf-logic': {
-        computedValues: {
-          book_space: {
-            rule: {
-              '*': [2, 2],
+          {
+            if: {
+              properties: { field_b: { const: 'yes' } },
+              required: ['field_b'],
             },
+            then: { properties: { field_c: { minimum: 10 } } },
           },
-        },
+        ],
       },
-    };
-    const { handleValidation } = createHeadlessForm(unsatisfiableSchema, {
-      strictInputType: false,
-    });
-    expect(handleValidation({ has_books: 'yes', books: 4 }).formErrors).toEqual({
-      books: 'Must be greater or equal to 5',
+      {
+        strictInputType: false,
+      }
+    );
+
+    const validation = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 5 });
+    expect(validation.formErrors).toEqual({
+      // BUG: 🐛 it should be "Must be greater or equal to 30"
+      field_c: 'Must be greater or equal to 10',
     });
-    expect(handleValidation({ has_books: 'yes', books: 5 }).formErrors).toEqual({
-      books: 'The only accepted value is 4.',
+  });
+
+  it('Given multiple conditionals to the same field, it only applies the last one (@bug) - case 2', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        additionalProperties: false,
+        properties: {
+          field_a: { type: 'string' },
+          field_b: { type: 'string' },
+          field_c: { type: 'number' },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { field_a: { const: 'yes' } },
+              required: ['field_a'],
+            },
+            then: { properties: { field_c: { minimum: 5 } } },
+          },
+          {
+            if: {
+              properties: { field_b: { const: 'yes' } },
+              required: ['field_b'],
+            },
+            then: { properties: { field_c: { maximum: 10 } } },
+          },
+        ],
+      },
+      {
+        strictInputType: false,
+      }
+    );
+
+    const validation1 = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 12 });
+    expect(validation1.formErrors).toEqual({
+      field_c: 'Must be smaller or equal to 10',
     });
+
+    const validation2 = handleValidation({ field_a: 'yes', field_b: 'yes', field_c: 3 });
+    // BUG: 🐛 it should be "Must be greater or equal to 5"
+    expect(validation2.formErrors).toBeUndefined();
+    // expect(validation1.formErrors).toEqual({
+    //   field_c: 'Must be greater or equal to 5',
+    // });
   });
 });

package/src/tests/createHeadlessForm.customValidations.test.js

@@ -140,7 +140,8 @@ afterAll(() => {
   console.warn.mockRestore();
 });
 
-describe('createHeadlessForm() - custom validations', () => {
+// @deprecated - customProperties won't be supported in v2.
+describe('createHeadlessForm() - custom validations (deprecated)', () => {
   describe('simple validation (eg maximum)', () => {
     it('works as a number', () => {
       const { fields, validateForm } = createScenario({