Add tests for checkbox–radio components

- Test for Components.getComponentPath() with a checkbox–radio component as input
- Test for required validation of checkbox–radio component in a form

test/forms/formWithCheckboxRadioTypeAndValidation.js

@@ -0,0 +1,35 @@
+export default {
+    title: 'test checkbox',
+    name: 'testCheckbox',
+    path: 'testcheckbox',
+    type: 'form',
+    display: 'form',
+    components: [
+      {
+        label: 'Checkbox 1',
+        inputType: 'radio',
+        tableView: false,
+        defaultValue: false,
+        key: 'checkbox1',
+        type: 'checkbox',
+        name: 'radio',
+        value: 'value1',
+        input: true,
+        radio: false,
+        validate: {
+            required: true
+        },
+      },
+      {
+        input: true,
+        label: 'Submit',
+        tableView: false,
+        key: 'submit',
+        type: 'button',
+        disableOnInvalid: true,
+      }
+    ],
+    created: '2022-09-01T09:12:45.581Z',
+    modified: '2022-09-05T08:51:16.048Z',
+    machineName: 'uubnbosxacwjzbk:testCheckbox',
+  };

test/unit/NestedComponent.unit.js

@@ -4,7 +4,7 @@ import Harness from '../harness';
 import assert from 'power-assert';
 import each from 'lodash/each';
 import { expect } from 'chai';
-import { comp1, comp2, comp3 } from './fixtures/nested';
+import { comp1, comp2, comp3, comp4 } from './fixtures/nested';
 import { nestedForm } from '../fixtures';
 import _map from 'lodash/map';
 import Webform from '../../src/Webform';
@@ -257,6 +257,18 @@ describe('NestedComponent class', () => {
         })
         .catch(done);
     });
+    // see these functions in core to see how component path is derived for checkbox components of inputType radio
+    // - https://github.com/formio/core/blob/master/src/utils/formUtil.ts#L228-L240
+    // - https://github.com/formio/core/blob/master/src/utils/formUtil.ts#L418-L427
+    it('returns the right path (i.e. name) for checkbox components with an inputType of radio', (done) => {
+      Harness.testCreate(NestedComponent, comp4)
+        .then((nested) => {
+          assert(nested.components[0].path === 'radio');
+          assert(nested.components[1].path === 'radio');
+          done();
+        })
+        .catch(done);
+    });
   });
 
   describe('getComponent', () => {

test/unit/Webform.unit.js

@@ -71,6 +71,7 @@ import optionalSanitize from '../forms/optionalSanitize.js';
 import formsWithNewSimpleConditions from '../forms/formsWithNewSimpleConditions.js';
 import formWithRadioInsideDataGrid from '../forms/formWithRadioInsideDataGrid.js';
 import formWithCheckboxRadioType from '../forms/formWithCheckboxRadioType.js';
+import formWithCheckboxRadioTypeAndValidation from '../forms/formWithCheckboxRadioTypeAndValidation.js';
 import formWithFormController from '../forms/formWithFormController.js';
 import calculateValueOnServerForEditGrid from '../forms/calculateValueOnServerForEditGrid.js';
 import formsWithAllowOverride from '../forms/formsWithAllowOverrideComps.js';
@@ -5149,6 +5150,20 @@ describe('Webform tests', function() {
       .catch((err) => done(err));
   });
 
+  it('Should show validation errors for checkbox component with inputType of radio', (done) => {
+    const formElement = document.createElement('div');
+    const form = new Webform(formElement);
+    form.setForm(formWithCheckboxRadioTypeAndValidation).then(() => {
+      const submitButton = form.getComponent('submit');
+      assert.ok(submitButton.disabled, 'Submit button should be disabled');
+      const errors = form.validate(); 
+      assert.strictEqual(errors.length, 1, 'Should return 1 error for the checkbox');
+      assert.strictEqual(errors[0].component.label, 'Checkbox 1', 'The error should be for the checkbox component');
+      assert.strictEqual(errors[0].errorKeyOrMessage, 'required', 'Should show required validation error');
+      done();
+    }).catch(done);
+  });
+
   for (const formTest of FormTests) {
     const useDoneInsteadOfPromise = formTest.useDone;
 

test/unit/fixtures/nested/comp4.js

@@ -0,0 +1,8 @@
+import comp from '../checkbox/comp2';
+
+export default {
+    components: [
+        { ...comp },
+        { ...comp, value: 'false' }
+    ]
+};

test/unit/fixtures/nested/index.js

@@ -1,3 +1,4 @@
 export { default as comp1 } from './comp1';
 export { default as comp2 } from './comp2';
 export { default as comp3 } from './comp3';
+export { default as comp4 } from './comp4';