@ukhomeoffice/cop-react-form-renderer 4.77.0 → 4.79.0

package/dist/context/HooksContext/HooksContext.js

@@ -41,6 +41,10 @@ var DEFAULT_HOOKS = {
   onSubmit: function onSubmit(type, payload, onSuccess, onError) {
     if (typeof onSuccess === 'function') onSuccess();
   },
+  onValidate: function onValidate(page) {
+    return [];
+  },
+  // Consuming application must provide functionality, otherwise this reports no errors.
   onCancel: function onCancel() {} // Consuming application must provide function to action, else this does nothing.
 };
 
@@ -61,6 +65,7 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
       onPageChange: (overrides === null || overrides === void 0 ? void 0 : overrides.onPageChange) || DEFAULT_HOOKS.onPageChange,
       onRequest: (overrides === null || overrides === void 0 ? void 0 : overrides.onRequest) || DEFAULT_HOOKS.onRequest,
       onSubmit: (overrides === null || overrides === void 0 ? void 0 : overrides.onSubmit) || DEFAULT_HOOKS.onSubmit,
+      onValidate: (overrides === null || overrides === void 0 ? void 0 : overrides.onValidate) || DEFAULT_HOOKS.onValidate,
       onCancel: (overrides === null || overrides === void 0 ? void 0 : overrides.onCancel) || DEFAULT_HOOKS.onCancel
     }),
     _useState2 = _slicedToArray(_useState, 2),
@@ -102,7 +107,8 @@ HooksContextProvider.propTypes = {
     onGoingBack: _propTypes.default.func,
     onPageChange: _propTypes.default.func,
     onRequest: _propTypes.default.func,
-    onSubmit: _propTypes.default.func
+    onSubmit: _propTypes.default.func,
+    onValidate: _propTypes.default.func
   })
 };
 HooksContextProvider.defaultProps = {
@@ -117,6 +123,7 @@ HooksContextProvider.defaultProps = {
     onGoingBack: undefined,
     onPageChange: undefined,
     onRequest: undefined,
-    onSubmit: undefined
+    onSubmit: undefined,
+    onValidate: undefined
   }
 };

package/dist/context/ValidationContext/ValidationContext.js

@@ -8,6 +8,7 @@ exports.default = exports.ValidationContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = _interopRequireDefault(require("../../utils"));
+var _hooks = require("../../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,6 +25,8 @@ var ValidationContext = /*#__PURE__*/(0, _react.createContext)();
 exports.ValidationContext = ValidationContext;
 var ValidationContextProvider = function ValidationContextProvider(_ref) {
   var children = _ref.children;
+  var _useHooks = (0, _hooks.useHooks)(),
+    hooks = _useHooks.hooks;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     errors = _useState2[0],
@@ -67,15 +70,21 @@ var ValidationContextProvider = function ValidationContextProvider(_ref) {
   var validate = {
     page: function page(_page) {
       var pageErrors = _utils.default.Validate.page(_page);
-      setErrors(pageErrors);
-      return pageErrors;
+      var hookPageErrors = hooks.onValidate(_page);
+      var allErrors = Array.isArray(hookPageErrors) ? pageErrors.concat(hookPageErrors) : pageErrors;
+      setErrors(allErrors);
+      return allErrors;
     },
     pages: function pages(_pages) {
       var pagesErrors = _pages.flatMap(function (page) {
         return _utils.default.Validate.page(page);
       });
-      setErrors(pagesErrors);
-      return pagesErrors;
+      var hookPagesErrors = _pages.flatMap(function (page) {
+        return hooks.onValidate(page);
+      });
+      var allErrors = Array.isArray(hookPagesErrors) ? pagesErrors.concat(hookPagesErrors) : pagesErrors;
+      setErrors(allErrors);
+      return allErrors;
     }
   };
   return /*#__PURE__*/_react.default.createElement(ValidationContext.Provider, {

package/dist/context/ValidationContext/ValidationContext.test.js

@@ -7,6 +7,7 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _ValidationContext = _interopRequireDefault(require("./ValidationContext"));
+var _HooksContext = _interopRequireDefault(require("../HooksContext"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,7 +36,7 @@ describe('context.ValidationContext', function () {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ValidationContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, null))), container = _render.container;
+          _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_HooksContext.default, null, /*#__PURE__*/_react2.default.createElement(_ValidationContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, null)))), container = _render.container;
           expect(container.childNodes.length).toEqual(4);
           expect(container.textContent).toContain('addErrors is a function');
           expect(container.textContent).toContain('clearErrors is a function');
@@ -56,9 +57,9 @@ describe('context.ValidationContext', function () {
             id: 'alpha',
             error: 'Alpha is required'
           }];
-          _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ValidationContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, {
+          _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_HooksContext.default, null, /*#__PURE__*/_react2.default.createElement(_ValidationContext.default, null, /*#__PURE__*/_react2.default.createElement(TestComponent, {
             customErrors: CUSTOM_ERRORS
-          }))), container = _render2.container;
+          })))), container = _render2.container;
           expect(container.childNodes.length).toEqual(5);
           expect(container.textContent).toContain('addErrors is a function');
           expect(container.textContent).toContain('clearErrors is a function');

package/dist/utils/Component/getComponent.js

@@ -50,12 +50,13 @@ var getCheckboxes = function getCheckboxes(config) {
   _Data.default.getOptions(config, function (val) {
     options = val;
   });
-  options.forEach(function (paramOption) {
-    var option = _objectSpread({}, paramOption);
-    if (!Array.isArray(option.nested)) {
-      return;
+  options = options.map(function (paramOption) {
+    if (!Array.isArray(paramOption.nested)) {
+      return paramOption;
     }
-    option.children = getChildrenJsx(config, option.nested);
+    return _objectSpread(_objectSpread({}, paramOption), {}, {
+      children: getChildrenJsx(config, paramOption.nested)
+    });
   });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Checkboxes, _extends({}, attrs, {
@@ -138,12 +139,13 @@ var getRadios = function getRadios(config) {
   _Data.default.getOptions(config, function (val) {
     options = val;
   });
-  options.forEach(function (paramOption) {
-    var option = _objectSpread({}, paramOption);
-    if (!Array.isArray(option.nested)) {
-      return;
+  options = options.map(function (paramOption) {
+    if (!Array.isArray(paramOption.nested)) {
+      return paramOption;
     }
-    option.children = getChildrenJsx(config, option.nested);
+    return _objectSpread(_objectSpread({}, paramOption), {}, {
+      children: getChildrenJsx(config, paramOption.nested)
+    });
   });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {

package/dist/utils/Component/getComponentTests/getComponent.checkboxes.test.js

@@ -2,6 +2,7 @@
 
 var _react = require("@testing-library/react");
 var _models = require("../../../models");
+var _setupTests = require("../../../setupTests");
 var _getComponent = _interopRequireDefault(require("../getComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -100,4 +101,65 @@ describe('utils.Component.get', function () {
       value: [OPTIONS[1].value]
     });
   });
+  it('should return an appropriately rendered checkboxes component with a nested component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var NESTED = {
+      id: 'charle',
+      fieldId: 'charle',
+      type: 'text'
+    };
+    var OPTIONS = [{
+      value: 'a',
+      label: 'Alpha',
+      nested: [NESTED]
+    }, {
+      value: 'b',
+      label: 'Bravo'
+    }];
+    var ON_CHANGE_CALLS = [];
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+    var COMPONENT = {
+      type: _models.ComponentTypes.CHECKBOXES,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      data: {
+        options: OPTIONS
+      },
+      value: 'a',
+      onChange: ON_CHANGE,
+      'data-testid': ID
+    };
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getComponent.default)(COMPONENT)),
+      container = _renderWithValidation.container;
+    var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
+      _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
+      formGroup = _getAllByTestId4[0],
+      checkboxes = _getAllByTestId4[1];
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var fieldSet = formGroup.childNodes[0];
+    var label;
+    fieldSet.childNodes.forEach(function (node) {
+      // Check if it's an element.
+      if (node instanceof Element) {
+        if (node.tagName === 'LEGEND') {
+          label = node.childNodes[0];
+        }
+      }
+    });
+    expect(label).toBeDefined();
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(checkboxes.tagName).toEqual('DIV');
+    expect(checkboxes.classList).toContain('govuk-checkboxes');
+    expect(checkboxes.childNodes.length).toEqual(OPTIONS.length + 1); // +1 for nested component
+    expect(checkboxes.childNodes[0].classList).toContain('govuk-checkboxes__item');
+    expect(checkboxes.childNodes[1].classList).toContain('govuk-checkboxes__conditional');
+    expect(checkboxes.childNodes[2].classList).toContain('govuk-checkboxes__item');
+  });
 });

package/dist/utils/Component/getComponentTests/getComponent.radios.test.js

@@ -2,6 +2,7 @@
 
 var _react = require("@testing-library/react");
 var _models = require("../../../models");
+var _setupTests = require("../../../setupTests");
 var _getComponent = _interopRequireDefault(require("../getComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -95,4 +96,53 @@ describe('utils.Component.get', function () {
     _react.fireEvent.click(radioItems[1].childNodes[0]); // bravo (already selected, above)
     expect(ON_CHANGE_CALLS.length).toEqual(2); // No change, so no new event should have fired.
   });
+
+  it('should return an appropriately rendered radios component with nested components', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var NESTED = {
+      id: 'charle',
+      fieldId: 'charle',
+      type: 'text'
+    };
+    var OPTIONS = [{
+      value: 'a',
+      label: 'Alpha',
+      nested: [NESTED]
+    }, {
+      value: 'b',
+      label: 'Bravo'
+    }];
+    var ON_CHANGE_CALLS = [];
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+    var COMPONENT = {
+      type: _models.ComponentTypes.RADIOS,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      data: {
+        options: OPTIONS
+      },
+      value: 'a',
+      onChange: ON_CHANGE,
+      'data-testid': ID
+    };
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getComponent.default)(COMPONENT)),
+      container = _renderWithValidation.container;
+    var _getAllByTestId3 = (0, _react.getAllByTestId)(container, ID),
+      _getAllByTestId4 = _slicedToArray(_getAllByTestId3, 2),
+      formGroup = _getAllByTestId4[0],
+      radios = _getAllByTestId4[1];
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    expect(radios.tagName).toEqual('DIV');
+    expect(radios.classList).toContain('govuk-radios');
+    expect(radios.childNodes.length).toEqual(OPTIONS.length + 1); // +1 for nested component
+    expect(radios.childNodes[0].classList).toContain('govuk-radios__item');
+    expect(radios.childNodes[1].classList).toContain('govuk-radios__conditional');
+    expect(radios.childNodes[2].classList).toContain('govuk-radios__item');
+  });
 });

package/dist/utils/Validate/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
+var _validateContainer = _interopRequireDefault(require("./validateContainer"));
 var _validateDate = _interopRequireDefault(require("./validateDate"));
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 var _validateMultifile = _interopRequireDefault(require("./validateMultifile"));
@@ -18,6 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Validate = {
   component: _validateComponent.default,
+  container: _validateContainer.default,
   email: _validateEmail.default,
   date: _validateDate.default,
   multifile: _validateMultifile.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.77.0",
+  "version": "4.79.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",