@remoteoss/json-schema-form 0.7.1-dev.20231026204916 → 0.7.2-dev.20231106093837

package/src/tests/createHeadlessForm.test.js

@@ -15,6 +15,7 @@ import {
   schemaInputTypeRadioOptionsWithDetails,
   schemaInputTypeSelectSoloDeprecated,
   schemaInputTypeSelectSolo,
+  schemaInputTypeSelectString,
   schemaInputTypeSelectMultipleDeprecated,
   schemaInputTypeSelectMultiple,
   schemaInputTypeSelectMultipleOptional,
@@ -38,7 +39,6 @@ import {
   mockFileInput,
   mockRadioCardInput,
   mockRadioCardExpandableInput,
-  mockTelWithPattern,
   mockTextInput,
   mockTextInputDeprecated,
   mockNumberInput,
@@ -431,7 +431,7 @@ describe('createHeadlessForm', () => {
   });
 
   describe('field support', () => {
-    function assertOptionsAllowed({ handleValidation, fieldName, validOptions }) {
+    function assertOptionsAllowed({ handleValidation, fieldName, validOptions, isString = false }) {
       const validateForm = (vals) => friendlyError(handleValidation(vals));
 
       // All allowed options are valid
@@ -439,27 +439,34 @@ describe('createHeadlessForm', () => {
         expect(validateForm({ [fieldName]: value })).toBeUndefined();
       });
 
-      // Any other arbitrary value is not valid.
-      expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
-        [fieldName]: 'The option "blah-blah" is not valid.',
-      });
+      if (!isString) {
+        // Any other arbitrary value is not valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toEqual({
+          [fieldName]: 'The option "blah-blah" is not valid.',
+        });
 
-      // Given undefined, it says it's a  required field.
-      expect(validateForm({})).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // Given undefined, it says it's a required field.
+        expect(validateForm({})).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, empty string ("") is also considered empty. @BUG RMT-518
-      // Expectation: The error to be "The option '' is not valid."
-      expect(validateForm({ [fieldName]: '' })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, empty string ("") is also considered empty. @BUG RMT-518
+        // Expectation: The error to be "The option '' is not valid."
+        expect(validateForm({ [fieldName]: '' })).toEqual({
+          [fieldName]: 'Required field',
+        });
 
-      // As required field, null is also considered empty @BUG RMT-518
-      // Expectation: The error to be "The option null is not valid."
-      expect(validateForm({ [fieldName]: null })).toEqual({
-        [fieldName]: 'Required field',
-      });
+        // As required field, null is also considered empty @BUG RMT-518
+        // Expectation: The error to be "The option null is not valid."
+        expect(validateForm({ [fieldName]: null })).toEqual({
+          [fieldName]: 'Required field',
+        });
+      }
+
+      if (isString) {
+        // Any other arbitrary value is valid.
+        expect(validateForm({ [fieldName]: 'blah-blah' })).toBeUndefined();
+      }
     }
 
     it('support "text" field type', () => {
@@ -631,6 +638,41 @@ describe('createHeadlessForm', () => {
       });
     });
 
+    it('supports "select" field type with string option', () => {
+      const { fields, handleValidation } = createHeadlessForm(schemaInputTypeSelectString);
+      const fieldSelect = fields[0];
+      expect(fieldSelect).toMatchObject({
+        name: 'browsers',
+        label: 'Browsers (solo)',
+        description: 'This solo select also includes a disabled option.',
+        options: [
+          {
+            value: 'chr',
+            label: 'Chrome',
+          },
+          {
+            value: 'ff',
+            label: 'Firefox',
+          },
+          {
+            value: 'ie',
+            label: 'Internet Explorer',
+            disabled: true,
+          },
+          { value: undefined, type: 'string', label: '{Create another}' },
+        ],
+      });
+
+      expect(fieldSelect).not.toHaveProperty('multiple');
+
+      assertOptionsAllowed({
+        handleValidation,
+        fieldName: 'browsers',
+        validOptions: ['chr', 'ff', 'ie'],
+        isString: true,
+      });
+    });
+
     it('supports "select" field type with multiple options @deprecated', () => {
       const result = createHeadlessForm(schemaInputTypeSelectMultipleDeprecated);
       expect(result).toMatchObject({
@@ -813,6 +855,7 @@ describe('createHeadlessForm', () => {
           has_car: 'yes',
         })
       ).toBeUndefined();
+
       expect(validateForm({})).toEqual({
         has_siblings: 'Required field',
       });
@@ -1376,6 +1419,50 @@ describe('createHeadlessForm', () => {
           ],
         });
       });
+
+      it('can be a conditional field', () => {
+        const { fields, handleValidation } = createHeadlessForm({
+          properties: {
+            yes_or_no: {
+              title: 'Show the dependents or not?',
+              oneOf: [{ const: 'yes' }, { const: 'no' }],
+              'x-jsf-presentation': { inputType: 'radio' },
+            },
+            dependent_details: mockGroupArrayInput,
+          },
+          allOf: [
+            {
+              if: {
+                properties: {
+                  yes_or_no: { const: 'yes' },
+                },
+                required: ['yes_or_no'],
+              },
+              then: {
+                required: ['dependent_details'],
+              },
+              else: {
+                properties: {
+                  dependent_details: false,
+                },
+              },
+            },
+          ],
+        });
+
+        // By default is hidden but the fields are accessible
+        expect(getField(fields, 'dependent_details').isVisible).toBe(false);
+        expect(getField(fields, 'dependent_details').fields).toEqual(expect.any(Function));
+
+        // When the condition matches...
+        const { formErrors } = handleValidation({ yes_or_no: 'yes' });
+        expect(formErrors).toEqual({
+          dependent_details: 'Required field',
+        });
+        // it gets visible with its inner fields.
+        expect(getField(fields, 'dependent_details').isVisible).toBe(true);
+        expect(getField(fields, 'dependent_details').fields).toEqual(expect.any(Function));
+      });
     });
 
     it('supports "radio" field type with its "card" and "card-expandable" variants', () => {
@@ -1443,51 +1530,6 @@ describe('createHeadlessForm', () => {
       });
     });
 
-    it('supports oneOf pattern validation', () => {
-      const result = createHeadlessForm(mockTelWithPattern);
-
-      expect(result).toMatchObject({
-        fields: [
-          {
-            label: 'Phone number',
-            name: 'phone_number',
-            type: 'tel',
-            required: false,
-            options: [
-              {
-                label: 'Portugal',
-                pattern: '^(\\+351)[0-9]{9,}$',
-              },
-              {
-                label: 'United Kingdom (UK)',
-                pattern: '^(\\+44)[0-9]{1,}$',
-              },
-              {
-                label: 'Bolivia',
-                pattern: '^(\\+591)[0-9]{9,}$',
-              },
-              {
-                label: 'Canada',
-                pattern: '^(\\+1)(206|224)[0-9]{1,}$',
-              },
-              {
-                label: 'United States',
-                pattern: '^(\\+1)[0-9]{1,}$',
-              },
-            ],
-          },
-        ],
-      });
-
-      const fieldValidator = result.fields[0].schema;
-
-      expect(fieldValidator.isValidSync('+351123123123')).toBe(true);
-      expect(() => fieldValidator.validateSync('+35100')).toThrowError(
-        'The option "+35100" is not valid.'
-      );
-      expect(fieldValidator.isValidSync(undefined)).toBe(true);
-    });
-
     describe('supports "fieldset" field type', () => {
       it('supports basic case', () => {
         const result = createHeadlessForm({
@@ -1765,11 +1807,8 @@ describe('createHeadlessForm', () => {
           expect(foodField.options).toHaveLength(4);
           // ...Food description was back to the original
           expect(foodField.description).toBeUndefined();
-
-          // @BUG RMT-58 PTO description should disappear, but it didn't.
-          expect(getField(fields, 'pto').description).toBe(
-            'Above 30 hours, the PTO needs to be at least 20 days.'
-          );
+          // ...PTO Description is removed too.
+          expect(getField(fields, 'pto').description).toBeUndefined();
 
           // Given again "low perks", the form valid.
           expect(

package/src/tests/helpers.js

@@ -238,6 +238,11 @@ export const mockSelectInputSolo = {
   },
 };
 
+export const mockSelectInputSoloCreatable = {
+  ...mockSelectInputSolo,
+  oneOf: [...mockSelectInputSolo.oneOf, { type: 'string', title: '{Create another}' }],
+};
+
 export const mockSelectInputMultiple = {
   title: 'Browsers (multiple)',
   description: 'This multi-select also includes a disabled option.',
@@ -453,46 +458,6 @@ export const mockCheckboxInput = {
   type: 'string',
 };
 
-export const mockTelWithPattern = {
-  properties: {
-    phone_number: {
-      title: 'Phone number',
-      description: 'Enter your telephone number',
-      type: 'string',
-      'x-jsf-presentation': {
-        inputType: 'tel',
-      },
-      oneOf: [
-        {
-          title: 'Portugal',
-          pattern: '^(\\+351)[0-9]{9,}$',
-          'x-jsf-presentation': { meta: { countryCode: '351' } },
-        },
-        {
-          title: 'United Kingdom (UK)',
-          pattern: '^(\\+44)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '44' } },
-        },
-        {
-          title: 'Bolivia',
-          pattern: '^(\\+591)[0-9]{9,}$',
-          'x-jsf-presentation': { meta: { countryCode: '591' } },
-        },
-        {
-          title: 'Canada',
-          pattern: '^(\\+1)(206|224)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '1' } },
-        },
-        {
-          title: 'United States',
-          pattern: '^(\\+1)[0-9]{1,}$',
-          'x-jsf-presentation': { meta: { countryCode: '1' } },
-        },
-      ],
-    },
-  },
-};
-
 /**
  * Compose a schema with lower chance of human error
  * @param {Object} schema version
@@ -937,6 +902,10 @@ export const schemaInputTypeSelectSolo = JSONSchemaBuilder()
   .setRequiredFields(['browsers'])
   .build();
 
+export const schemaInputTypeSelectString = JSONSchemaBuilder().addInput({
+  browsers: mockSelectInputSoloCreatable,
+});
+
 /** @deprecated */
 export const schemaInputTypeSelectMultipleDeprecated = JSONSchemaBuilder()
   .addInput({