@remoteoss/json-schema-form 0.5.0-dev.20230719162322 → 0.5.0-dev.20230901130231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.5.0-dev.20230719162322",
+  "version": "0.5.0-dev.20230901130231",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",
@@ -47,6 +47,7 @@
     ]
   },
   "dependencies": {
+    "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "randexp": "^0.5.3",
     "yup": "^0.30.0"

package/src/tests/checkIfConditionMatches.test.js

@@ -0,0 +1,51 @@
+import { checkIfConditionMatches } from '../checkIfConditionMatches';
+
+it('Empty if is always going to be true', () => {
+  expect(checkIfConditionMatches({ if: { properties: {} } })).toBe(true);
+});
+
+it('Basic if check passes with correct value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { a: { const: 'hello' } } } },
+      {
+        a: 'hello',
+      }
+    )
+  ).toBe(true);
+});
+
+it('Basic if check fails with incorrect value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { a: { const: 'hello' } } } },
+      {
+        a: 'goodbye',
+      }
+    )
+  ).toBe(false);
+});
+
+it('Nested properties check passes with correct value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
+      {
+        parent: { child: 'hello from child' },
+      },
+      [{ name: 'parent', fields: [] }]
+    )
+  ).toBe(true);
+});
+
+it('Nested properties check passes with correct value', () => {
+  expect(
+    checkIfConditionMatches(
+      { if: { properties: { parent: { properties: { child: { const: 'hello from child' } } } } } },
+      {
+        parent: { child: 'goodbye from child' },
+      },
+      [{ name: 'parent', fields: [] }]
+    )
+  ).toBe(false);
+});

package/src/tests/conditions.test.js

@@ -0,0 +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',
+                  },
+                },
+                required: ['child'],
+              },
+            },
+            required: ['parent'],
+          },
+          then: { required: ['parent_sibling'] },
+        },
+      ],
+      properties: {
+        parent: {
+          additionalProperties: false,
+          properties: {
+            child: {
+              oneOf: [
+                {
+                  const: 'yes',
+                },
+                { const: 'no' },
+              ],
+              type: 'string',
+            },
+          },
+          required: ['child'],
+          type: 'object',
+        },
+        parent_sibling: {
+          type: 'integer',
+        },
+      },
+      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',
+  });
+  expect(handleValidation({ parent: { child: 'yes' }, parent_sibling: 1 }).formErrors).toEqual(
+    undefined
+  );
+});

package/src/tests/const.test.js

@@ -0,0 +1,86 @@
+import { createHeadlessForm } from '../createHeadlessForm';
+
+describe('validations: const', () => {
+  it('Should work for number', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          ten_only: { type: 'number', const: 10 },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ ten_only: 1 }).formErrors).toEqual({
+      ten_only: 'The only accepted value is 10.',
+    });
+    expect(handleValidation({ ten_only: 10 }).formErrors).toBeUndefined();
+    // null is also considered valid until we fix @BUG RMT-518
+    // Expectation: To fail with error "The only accepted value is 10."
+    expect(handleValidation({ ten_only: null }).formErrors).toBeUndefined();
+  });
+
+  it('Should work for text', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          hello_only: { type: 'string', const: 'hello' },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ hello_only: 'what' }).formErrors).toEqual({
+      hello_only: 'The only accepted value is hello.',
+    });
+    expect(handleValidation({ hello_only: 'hello' }).formErrors).toEqual(undefined);
+  });
+
+  it('Should work for a conditionally applied const', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          answer: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          amount: {
+            description: 'If you select yes, this needs to be exactly 10.',
+            type: 'number',
+          },
+        },
+        allOf: [
+          {
+            if: { properties: { answer: { const: 'yes' } }, required: ['answer'] },
+            then: { properties: { amount: { const: 10 } }, required: ['amount'] },
+          },
+        ],
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ answer: 'no' }).formErrors).toEqual(undefined);
+    expect(handleValidation({ answer: 'yes' }).formErrors).toEqual({ amount: 'Required field' });
+    expect(handleValidation({ answer: 'yes', amount: 1 }).formErrors).toEqual({
+      amount: 'The only accepted value is 10.',
+    });
+    expect(handleValidation({ answer: 'yes', amount: 10 }).formErrors).toEqual(undefined);
+  });
+
+  it('Should show the custom error message', () => {
+    const { handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          string: {
+            type: 'string',
+            const: 'hello',
+            'x-jsf-errorMessage': { const: 'You must say hello!!!' },
+          },
+        },
+      },
+      { strictInputType: false }
+    );
+    expect(handleValidation({}).formErrors).toEqual(undefined);
+    expect(handleValidation({ string: 'hi' }).formErrors).toEqual({
+      string: 'You must say hello!!!',
+    });
+    expect(handleValidation({ string: 'hello' }).formErrors).toEqual(undefined);
+  });
+});

package/src/tests/createHeadlessForm.test.js

@@ -18,6 +18,7 @@ import {
   schemaInputTypeSelectMultipleDeprecated,
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
+  schemaInputTypeFieldset,
   schemaInputTypeNumber,
   schemaInputTypeNumberZeroMaximum,
   schemaInputTypeDate,
@@ -92,12 +93,15 @@ const getField = (fields, name, ...subNames) => {
 };
 
 beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {});
   jest.spyOn(console, 'error').mockImplementation(() => {});
 });
 
 afterEach(() => {
   expect(console.error).not.toHaveBeenCalled();
   console.error.mockRestore();
+  expect(console.warn).not.toHaveBeenCalled();
+  console.warn.mockRestore();
 });
 
 describe('createHeadlessForm', () => {
@@ -1020,7 +1024,7 @@ describe('createHeadlessForm', () => {
         schema: expect.any(Object),
         type: 'date',
         minDate: '1922-03-01',
-        maxDate: '2022-03-01',
+        maxDate: '2022-03-17',
       });
 
       const todayDateHint = new Date().toISOString().substring(0, 10);
@@ -1047,17 +1051,15 @@ describe('createHeadlessForm', () => {
         schema: expect.any(Object),
         type: 'date',
         minDate: '1922-03-01',
-        maxDate: '2022-03-01',
+        maxDate: '2022-03-17',
       });
 
       expect(validateForm({})).toEqual({
         birthdate: 'Required field',
       });
 
-      const todayDateHint = new Date().toISOString().substring(0, 10);
-
       expect(validateForm({ birthdate: '' })).toEqual({
-        birthdate: `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`,
+        birthdate: `Required field`,
       });
 
       expect(validateForm({ birthdate: '1922-02-01' })).toEqual({
@@ -1081,19 +1083,17 @@ describe('createHeadlessForm', () => {
         schema: expect.any(Object),
         type: 'date',
         minDate: '1922-03-01',
-        maxDate: '2022-03-01',
+        maxDate: '2022-03-17',
       });
 
-      const todayDateHint = new Date().toISOString().substring(0, 10);
-
       expect(validateForm({ birthdate: '' })).toEqual({
-        birthdate: `Must be a valid date in yyyy-mm-dd format. e.g. ${todayDateHint}`,
+        birthdate: `Required field`,
       });
 
       expect(validateForm({ birthdate: '2022-02-01' })).toBeUndefined();
       expect(validateForm({ birthdate: '2022-03-01' })).toBeUndefined();
       expect(validateForm({ birthdate: '2022-04-01' })).toEqual({
-        birthdate: 'The date must be 2022-03-01 or before.',
+        birthdate: 'The date must be 2022-03-17 or before.',
       });
     });
 
@@ -3450,6 +3450,27 @@ describe('createHeadlessForm', () => {
           ],
         });
       });
+
+      it('should ignore initial values that do not match the field type (eg string vs object)', () => {
+        const result = createHeadlessForm(schemaInputTypeFieldset, {
+          initialValues: {
+            a_fieldset: 'foo', // should be an object instead of string
+          },
+        });
+
+        // It returns fields without errors
+        expect(result.fields).toBeDefined();
+        expect(result.fields[0].fields[0].name).toBe('id_number');
+        expect(result.fields[0].fields[1].name).toBe('tabs');
+
+        // Warn about those missmatched values
+        expect(console.warn).toHaveBeenCalledWith(
+          `Field "a_fieldset"'s value is "foo", but should be type object.`
+        );
+        console.warn.mockClear();
+
+        expect(console.error).not.toHaveBeenCalled();
+      });
     });
   });
 

package/src/tests/helpers.custom.js

@@ -207,7 +207,6 @@ export const schemaInputTypeHidden = {
       title: 'Select multi hidden',
       default: ['Albania, Algeria'],
       'x-jsf-presentation': { inputType: 'hidden' },
-      const: ['Albania, Algeria'],
       type: 'array',
     },
   },

package/src/tests/helpers.js

@@ -991,7 +991,7 @@ export const schemaInputTypeDate = {
   additionalProperties: false,
   properties: {
     birthdate: {
-      'x-jsf-presentation': { inputType: 'date', maxDate: '2022-03-01', minDate: '1922-03-01' },
+      'x-jsf-presentation': { inputType: 'date', maxDate: '2022-03-17', minDate: '1922-03-01' },
       title: 'Birthdate',
       type: 'string',
       format: 'date',
@@ -1020,12 +1020,12 @@ export const schemaInputTypeFileWithSkippable = JSONSchemaBuilder()
   })
   .build();
 
-export const schemaInputTypeFieldset = JSONSchemaBuilder()
-  .addInput({
+export const schemaInputTypeFieldset = {
+  properties: {
     a_fieldset: mockFieldset,
-  })
-  .setRequiredFields(['a_fieldset'])
-  .build();
+  },
+  required: ['a_fieldset'],
+};
 
 export const schemaInputTypeFocusedFieldset = JSONSchemaBuilder()
   .addInput({

package/src/tests/jsonLogic.fixtures.js

@@ -0,0 +1,162 @@
+export function createSchemaWithRulesOnFieldA(rules) {
+  return {
+    properties: {
+      field_a: {
+        type: 'number',
+        'x-jsf-logic-validations': Object.keys(rules),
+      },
+      field_b: {
+        type: 'number',
+      },
+    },
+    required: ['field_a', 'field_b'],
+    'x-jsf-logic': { validations: rules },
+  };
+}
+
+export function createSchemaWithThreePropertiesWithRuleOnFieldA(rules) {
+  return {
+    properties: {
+      field_a: {
+        type: 'number',
+        'x-jsf-logic-validations': Object.keys(rules),
+      },
+      field_b: {
+        type: 'number',
+      },
+      field_c: {
+        type: 'number',
+      },
+    },
+    'x-jsf-logic': { validations: rules },
+    required: ['field_a', 'field_b', 'field_c'],
+  };
+}
+
+export const schemaWithNonRequiredField = {
+  properties: {
+    field_a: {
+      type: 'number',
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_greater_than_field_b'],
+    },
+  },
+  'x-jsf-logic': {
+    validations: {
+      a_greater_than_field_b: {
+        errorMessage: 'Must be greater than field_a',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+    },
+  },
+  required: [],
+};
+
+export const schemaWithNativeAndJSONLogicChecks = {
+  properties: {
+    field_a: {
+      type: 'number',
+      minimum: 100,
+      'x-jsf-logic-validations': ['a_multiple_of_ten'],
+    },
+  },
+  'x-jsf-logic': {
+    validations: {
+      a_multiple_of_ten: {
+        errorMessage: 'Must be a multiple of 10',
+        rule: {
+          '===': [{ '%': [{ var: 'field_a' }, 10] }, 0],
+        },
+      },
+    },
+  },
+  required: ['field_a'],
+};
+
+export const multiRuleSchema = {
+  properties: {
+    field_a: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_bigger_than_b', 'is_even_number'],
+    },
+    field_b: {
+      type: 'number',
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    validations: {
+      a_bigger_than_b: {
+        errorMessage: 'A must be bigger than B',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+      is_even_number: {
+        errorMessage: 'A must be even',
+        rule: {
+          '===': [{ '%': [{ var: 'field_a' }, 2] }, 0],
+        },
+      },
+    },
+  },
+};
+
+export const schemaWithTwoRules = {
+  properties: {
+    field_a: {
+      type: 'number',
+      'x-jsf-logic-validations': ['a_bigger_than_b'],
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-validations': ['is_even_number'],
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    validations: {
+      a_bigger_than_b: {
+        errorMessage: 'A must be bigger than B',
+        rule: {
+          '>': [{ var: 'field_a' }, { var: 'field_b' }],
+        },
+      },
+      is_even_number: {
+        errorMessage: 'B must be even',
+        rule: {
+          '===': [{ '%': [{ var: 'field_b' }, 2] }, 0],
+        },
+      },
+    },
+  },
+};
+
+export const schemaWithComputedAttributes = {
+  properties: {
+    field_a: {
+      type: 'number',
+    },
+    field_b: {
+      type: 'number',
+      'x-jsf-logic-computedAttrs': {
+        const: 'a_times_two',
+        default: 'a_times_two',
+      },
+    },
+  },
+  required: ['field_a', 'field_b'],
+  'x-jsf-logic': {
+    computedValues: {
+      a_times_two: {
+        rule: {
+          '*': [{ var: 'field_a' }, 2],
+        },
+      },
+    },
+  },
+};