@ukhomeoffice/cop-react-form-renderer 4.15.0-alpha → 4.15.1-alpha

package/dist/components/CollectionPage/CollectionPage.js

@@ -120,6 +120,7 @@ var CollectionPage = function CollectionPage(_ref) {
     }),
     onAction: onInnerPageAction,
     onWrapperChange: onInnerPageChange,
+    onTopLevelChange: onPageChange,
     classBlock: classBlock,
     classModifiers: classModifiers,
     className: className

package/dist/components/FormComponent/Collection.js

@@ -57,6 +57,7 @@ var Collection = function Collection(_ref) {
       _value = _ref.value,
       formData = _ref.formData,
       onChange = _ref.onChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       wrap = _ref.wrap;
 
   var _useState = (0, _react.useState)(_value),
@@ -195,6 +196,7 @@ var Collection = function Collection(_ref) {
       value: item,
       formData: formData,
       onChange: onCollectionChange,
+      onTopLevelChange: onTopLevelChange,
       wrap: wrap
     }));
   }), !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {

package/dist/components/FormComponent/Container.js

@@ -15,7 +15,7 @@ var _utils = _interopRequireDefault(require("../../utils"));
 
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
-var _excluded = ["container", "value", "formData", "onChange", "wrap"];
+var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,6 +40,7 @@ var Container = function Container(_ref) {
       formData = _ref.formData,
       onChange = _ref.onChange,
       wrap = _ref.wrap,
+      onTopLevelChange = _ref.onTopLevelChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
   var onComponentChange = function onComponentChange(_ref2) {
@@ -88,7 +89,8 @@ var Container = function Container(_ref) {
       formData: formData,
       value: val || defaultValue,
       wrap: wrap,
-      onChange: onComponentChange
+      onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange
     }));
   }));
 };

package/dist/components/FormComponent/Container.test.js

@@ -212,7 +212,7 @@ describe('components.FormComponent.Container', function () {
     }, _callee3);
   })));
   it('should handle a change to a file type component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _renderWithValidation4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
+    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, ON_TOP_LEVEL_CHANGE_EVENTS, ON_TOP_LEVEL_CHANGE, CONTAINER, _renderWithValidation4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
 
     return regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -225,6 +225,12 @@ describe('components.FormComponent.Container', function () {
               ON_CHANGE_EVENTS.push(e);
             };
 
+            ON_TOP_LEVEL_CHANGE_EVENTS = [];
+
+            ON_TOP_LEVEL_CHANGE = function ON_TOP_LEVEL_CHANGE(e) {
+              ON_TOP_LEVEL_CHANGE_EVENTS.push(e);
+            };
+
             CONTAINER = {
               id: ID,
               fieldId: ID,
@@ -241,7 +247,8 @@ describe('components.FormComponent.Container', function () {
               component: CONTAINER,
               value: FORM_DATA[ID],
               formData: FORM_DATA,
-              onChange: ON_CHANGE
+              onChange: ON_CHANGE,
+              onTopLevelChange: ON_TOP_LEVEL_CHANGE
             })), container = _renderWithValidation4.container; // Get hold of the text input.
 
             c = container.childNodes[0];
@@ -258,22 +265,25 @@ describe('components.FormComponent.Container', function () {
               type: FILE_TYPE
             });
 
-            _userEvent.default.upload(input, FILE); // And confirm the formData has been changed.
+            _userEvent.default.upload(input, FILE); // Expect one call for the regular onChange event, this can change
+            // depending on whether the Container is on a normal page or regular page.
 
 
-            expect(ON_CHANGE_EVENTS.length).toEqual(2); // One for the file, another for the meta.
+            expect(ON_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID); // Expect one call for changing the meta data at top level formData.
+            // Meta changes should occur at top-level regardless of where the component is.
 
-            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
-            expect(ON_CHANGE_EVENTS[1].target.name).toEqual(_constants.META_PROPERTY);
+            expect(ON_TOP_LEVEL_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_TOP_LEVEL_CHANGE_EVENTS[0].target.name).toEqual(_constants.META_PROPERTY);
             containerChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[0].target.value));
-            metaChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[1].target.value));
+            metaChangeValue = JSON.parse(JSON.stringify(ON_TOP_LEVEL_CHANGE_EVENTS[0].target.value));
             expect(metaChangeValue.documents.length).toEqual(2); // Existing one, plus this new one.
 
             expect(metaChangeValue.documents[1]).toMatchObject(_objectSpread(_objectSpread({}, containerChangeValue[FILE_ID]), {}, {
               field: "".concat(ID, ".").concat(FILE_ID)
             }));
 
-          case 22:
+          case 25:
           case "end":
             return _context4.stop();
         }

package/dist/components/FormComponent/FormComponent.js

@@ -25,7 +25,7 @@ var _Container = _interopRequireDefault(require("./Container"));
 
 var _helpers = require("./helpers");
 
-var _excluded = ["component", "value", "formData", "wrap", "onChange"];
+var _excluded = ["component", "value", "formData", "wrap", "onChange", "onTopLevelChange"];
 
 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); }
 
@@ -63,6 +63,7 @@ var FormComponent = function FormComponent(_ref) {
       formData = _ref.formData,
       wrap = _ref.wrap,
       onChange = _ref.onChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
   var _useHooks = (0, _hooks.useHooks)(),
@@ -103,6 +104,7 @@ var FormComponent = function FormComponent(_ref) {
       container: component,
       wrap: wrap,
       onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange,
       value: value || _utils.default.Component.defaultValue(component),
       formData: formData
     }));
@@ -119,16 +121,17 @@ var FormComponent = function FormComponent(_ref) {
       config: component,
       wrap: wrap,
       onChange: onComponentChange,
+      onTopLevelChange: onTopLevelChange,
       value: value || _utils.default.Component.defaultValue(component),
       formData: formData
     }));
   }
 
   var changeMetaDocuments = function changeMetaDocuments(document) {
-    onChange({
+    onTopLevelChange({
       target: {
         name: _utils.default.Meta.name,
-        value: _utils.default.Meta.documents.setForField(document, formData, component.full_path)
+        value: _utils.default.Meta.documents.setForField(document, formData, component.full_path, component.allowMultiple)
       }
     });
   };
@@ -174,7 +177,8 @@ FormComponent.propTypes = {
   value: _propTypes.default.any,
   formData: _propTypes.default.any,
   wrap: _propTypes.default.bool,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  onTopLevelChange: _propTypes.default.func
 };
 FormComponent.defaultProps = {
   wrap: true

package/dist/components/FormPage/FormPage.js

@@ -56,6 +56,7 @@ var FormPage = function FormPage(_ref) {
   var page = _ref.page,
       _onAction = _ref.onAction,
       onWrapperChange = _ref.onWrapperChange,
+      onTopLevelChange = _ref.onTopLevelChange,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className;
@@ -102,6 +103,7 @@ var FormPage = function FormPage(_ref) {
       key: index,
       component: component,
       onChange: onWrapperChange || onPageChange,
+      onTopLevelChange: onTopLevelChange || onPageChange,
       value: page.formData[component.fieldId] || patch[component.fieldId],
       formData: page.formData
     });

package/dist/components/FormRenderer/FormRenderer.js

@@ -434,7 +434,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         }
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
         var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-        onPageChange(_models.FormPages.CYA || currentTask.pages[0]);
+        onPageChange(_currentPage || currentTask.pages[0]);
       } else {
         onPageChange(currentTask.pages[0]);
       }

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
+var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
+
 var _models = require("../../models");
 
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
@@ -24,13 +26,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var getContainerForPage = function getContainerForPage(page, item, labelCount, full_path) {
+  var allComponents = (0, _elevateNestedComponents.default)(page.components, item);
   return {
     id: item.id,
     fieldId: item.id,
     type: _models.ComponentTypes.CONTAINER,
     required: true,
     full_path: full_path,
-    components: page.components.map(function (component) {
+    components: allComponents.map(function (component) {
       return _objectSpread(_objectSpread({}, component), {}, {
         label: _copReactComponents.Utils.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
           index: labelCount

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
+
 var _models = require("../../models");
 
 var _FormPage = _interopRequireDefault(require("../FormPage"));
@@ -41,7 +43,8 @@ var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
       return (0, _getCYARowsForCollectionPage.default)(page, onAction);
     }
 
-    var rows = page.components.filter(function (c) {
+    var allComponents = (0, _elevateNestedComponents.default)(page.components, page.formData);
+    var rows = allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
       switch (component.type) {

package/dist/utils/Component/elevateNestedComponents.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Iterates over an array of components and brings any nested 
+ * components that should be visible into the top level array.
+ * The values provided in data are used to determine if any
+ * nested components should be visible.
+ * 
+ * Given this structure in the components array:
+ *  - Radios
+ *    - Radio Option 1 (Not selected)
+ *      - Nested 1
+ *      - Nested 2
+ *    - Radio Option 2 (Selected)
+ *      - Nested 3
+ *  - Text Input
+ * 
+ * The result will be the following array:
+ *  - Radios
+ *  - Nested 3
+ *  - Text Input
+ * 
+ * @param {*} components An array of components.
+ * @param {*} data A chunk of form data used to determine if 
+ *                 any nested components are visible or not.
+ * @returns A new array consisting of components interspersed
+ *          with any visible nested components.
+ */
+var elevateNestedComponents = function elevateNestedComponents(components, data) {
+  var allComponents = [];
+  components === null || components === void 0 ? void 0 : components.forEach(function (component) {
+    var _component$data, _component$data$optio;
+
+    allComponents.push(component);
+    (_component$data = component.data) === null || _component$data === void 0 ? void 0 : (_component$data$optio = _component$data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {
+      // If this option has nested components and is
+      // selected, then add its nested components to the array.
+      if (Array.isArray(option.nested) && data[component.id] === option.value) {
+        allComponents = allComponents.concat(option.nested);
+      }
+    });
+  });
+  return allComponents;
+};
+
+var _default = elevateNestedComponents;
+exports.default = _default;

package/dist/utils/Component/elevateNestedComponents.test.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _elevateNestedComponents = _interopRequireDefault(require("./elevateNestedComponents"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils.Component.elevateNestedComponents', function () {
+  it('should return an empty array if components is undefined', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(undefined, DATA)).toEqual([]);
+  });
+  it('should return an empty array if components is null', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(null, DATA)).toEqual([]);
+  });
+  it('should return an empty array if components is empty', function () {
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)([], DATA)).toEqual([]);
+  });
+  it('should return the original components if none have nested components', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes'
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      alpha: 'abc'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual(COMPONENTS);
+  });
+  it('should return the original components if data is null', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes'
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, null)).toEqual(COMPONENTS);
+  });
+  it('should return the original array with elevated nested components when they are visible', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }]
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS, [{
+      id: 'nestedOne'
+    }, {
+      id: 'nestedTwo'
+    }]));
+  });
+});

package/dist/utils/Component/getComponent.js

@@ -55,16 +55,22 @@ var getCheckboxes = function getCheckboxes(config) {
 };
 
 var getCalculation = function getCalculation(config) {
-  var calculatedValue = _Data.default.applyFormula(config);
-
-  if (!!calculatedValue) {
-    config.value = calculatedValue;
-    config.formData[config.fieldId] = "" + calculatedValue;
+  var value = _Data.default.applyFormula(config);
+
+  if (typeof config.onChange === 'function') {
+    if (value !== config.value) {
+      config.onChange({
+        target: {
+          name: config.fieldId,
+          value: value
+        }
+      });
+    }
   }
 
   var attrs = (0, _cleanAttributes.default)(config, ['formula']);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, _extends({}, attrs, {
-    readOnly: true
+    readonly: true
   }));
 };
 

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

@@ -26,6 +26,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 describe('utils.Component.get', function () {
   var ID = 'test-id';
   var FIELD_ID = 'field-id';
@@ -134,28 +138,39 @@ describe('utils.Component.get', function () {
     },
     result: '266.67'
   }].forEach(function (test) {
-    it("should render 'calculation' component with formula to given calculated value: ".concat(test.result), function () {
-      var _render = (0, _react.render)((0, _getComponent.default)(_objectSpread(_objectSpread({}, COMPONENT), test.config))),
-          container = _render.container;
+    test.config.onChange = function (_ref) {
+      var target = _ref.target;
+      COMPONENT.formData[target.name] = target.value;
+    };
 
-      var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
-          _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
-          formGroup = _getAllByTestId2[0],
-          input = _getAllByTestId2[1];
+    it("should render 'calculation' component with formula to given calculated value: ".concat(test.result), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render, container, _getAllByTestId, _getAllByTestId2, formGroup, input, label;
 
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.childNodes[0];
-      expect(label.tagName).toEqual('LABEL');
-      expect(label.classList).toContain('govuk-label');
-      expect(label.textContent).toContain(LABEL);
-      expect(formGroup.classList).toContain('govuk-form-group');
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.classList).toContain('govuk-input');
-      expect(input.id).toEqual(ID);
-      expect(input.getAttribute('readonly')).not.toBeNull();
-      expect(input.getAttribute('value')).toEqual(test.result);
-    });
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render = (0, _react.render)((0, _getComponent.default)(_objectSpread(_objectSpread({}, COMPONENT), test.config))), container = _render.container;
+              _getAllByTestId = (0, _react.getAllByTestId)(container, ID), _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2), formGroup = _getAllByTestId2[0], input = _getAllByTestId2[1];
+              expect(formGroup.tagName).toEqual('DIV');
+              expect(formGroup.classList).toContain('govuk-form-group');
+              label = formGroup.childNodes[0];
+              expect(label.tagName).toEqual('LABEL');
+              expect(label.classList).toContain('govuk-label');
+              expect(label.textContent).toContain(LABEL);
+              expect(formGroup.classList).toContain('govuk-form-group');
+              expect(input.tagName).toEqual('DIV');
+              expect(input.classList).toContain('hods-readonly');
+              expect(input.id).toEqual(ID);
+              expect("".concat(COMPONENT.formData[FIELD_ID])).toEqual(test.result);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
   });
   /**
    * Iteratively test collction of negative test data objects each containing:
@@ -258,10 +273,9 @@ describe('utils.Component.get', function () {
       expect(label.classList).toContain('govuk-label');
       expect(label.textContent).toContain(LABEL);
       expect(formGroup.classList).toContain('govuk-form-group');
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.classList).toContain('govuk-input');
+      expect(input.tagName).toEqual('DIV');
+      expect(input.classList).toContain('hods-readonly');
       expect(input.id).toEqual(ID);
-      expect(input.getAttribute('readonly')).not.toBeNull();
       expect(error).toBeCalledTimes(1);
       expect(error).toBeCalledWith(test.error);
     });

package/dist/utils/Component/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
 
+var _elevateNestedComponents = _interopRequireDefault(require("./elevateNestedComponents"));
+
 var _getComponent = _interopRequireDefault(require("./getComponent"));
 
 var _getDefaultValue = _interopRequireDefault(require("./getDefaultValue"));
@@ -23,6 +25,7 @@ var Component = {
   clean: _cleanAttributes.default,
   defaultValue: _getDefaultValue.default,
   editable: _isEditable.default,
+  elevateNested: _elevateNestedComponents.default,
   get: _getComponent.default,
   show: _showComponent.default,
   wrap: _wrapInFormGroup.default

package/dist/utils/Meta/documents/setDocumentForField.js

@@ -17,10 +17,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var setDocumentForField = function setDocumentForField(document, formData, field) {
-  var documents = (0, _getDocuments.default)(formData).filter(function (d) {
-    return d.field !== field;
-  });
+var setDocumentForField = function setDocumentForField(document, formData, field, allowMultiple) {
+  var documents = (0, _getDocuments.default)(formData);
+
+  if (!allowMultiple) {
+    documents = documents.filter(function (d) {
+      return d.field !== field;
+    });
+  }
 
   if (document) {
     documents.push(_objectSpread(_objectSpread({}, document), {}, {

package/dist/utils/Meta/documents/setDocumentForField.test.js

@@ -36,6 +36,17 @@ describe('Utils.Meta.documents.add', function () {
 
     expect((0, _setDocumentForField.default)(NEW_ALPHA, FORM_DATA, NEW_ALPHA.field)).toEqual(_defineProperty({}, _constants.META_DOCUMENTS_PROPERTY, [NEW_ALPHA]));
   });
+  it('should add a document with the same field if allowMultiple is true', function () {
+    var NEW_URL = 'http://replacement.com/files/alpha';
+    var NEW_ALPHA = {
+      field: ALPHA_DOCUMENT.field,
+      url: NEW_URL
+    };
+
+    var FORM_DATA = _defineProperty({}, _constants.META_PROPERTY, _defineProperty({}, _constants.META_DOCUMENTS_PROPERTY, [ALPHA_DOCUMENT]));
+
+    expect((0, _setDocumentForField.default)(NEW_ALPHA, FORM_DATA, NEW_ALPHA.field, true)).toEqual(_defineProperty({}, _constants.META_DOCUMENTS_PROPERTY, [ALPHA_DOCUMENT, NEW_ALPHA]));
+  });
   it('should handle a null document being passed where a document with that field already exists', function () {
     var FORM_DATA = _defineProperty({}, _constants.META_PROPERTY, _defineProperty({}, _constants.META_DOCUMENTS_PROPERTY, [ALPHA_DOCUMENT]));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.15.0-alpha",
+  "version": "4.15.1-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "2.2.2",
+    "@ukhomeoffice/cop-react-components": "2.2.4",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",