@ukhomeoffice/cop-react-form-renderer 4.22.2 → 4.22.4-beta

package/dist/utils/Component/getComponent.js

@@ -237,10 +237,15 @@ var getComponentByType = function getComponentByType(config) {
 
 
 var getChildJsx = function getChildJsx(parent, child) {
-  if (parent.formData) {
-    var _parent$formData;
+  if (parent.full_path) {
+    var pathParts = parent.full_path.split('.');
+    pathParts.pop();
+    pathParts.push(child.fieldId);
+    child.full_path = pathParts.join('.');
+  }
 
-    child.value = parent !== null && parent !== void 0 && (_parent$formData = parent.formData) !== null && _parent$formData !== void 0 && _parent$formData[child.fieldId] ? parent.formData[child.fieldId] : '';
+  if (parent.formData) {
+    child.value = parent.formData[child.fieldId] || _Data.default.getSource(parent.formData, child.full_path) || '';
   }
 
   if ('readonly' in child) delete child.readonly;

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

@@ -112,4 +112,90 @@ describe('utils.Component.get', function () {
       }
     }, _callee2);
   })));
+  it('should correctly set the value of the nested component within a container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var CONTAINER_ID, ID, FIELD_ID, LABEL, VALUE, PARENT_CONFIG, NESTED_CONFIG, _renderWithValidation2, container, child, label, input;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            CONTAINER_ID = 'container-id';
+            ID = 'testId';
+            FIELD_ID = 'fieldId';
+            LABEL = 'Test label';
+            VALUE = 'nestedValue';
+            PARENT_CONFIG = {
+              onChange: function onChange() {},
+              formData: _defineProperty({}, CONTAINER_ID, _defineProperty({}, FIELD_ID, VALUE)),
+              full_path: "".concat(CONTAINER_ID, ".").concat(FIELD_ID)
+            };
+            NESTED_CONFIG = [{
+              id: ID,
+              fieldId: FIELD_ID,
+              label: LABEL,
+              type: 'text'
+            }];
+            _renderWithValidation2 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation2.container;
+            child = container.childNodes[0];
+            expect(child.childNodes.length).toEqual(3);
+            expect(child.classList).toContain('govuk-form-group');
+            label = child.childNodes[0];
+            expect(label).toBeDefined();
+            expect(label.innerHTML).toContain(LABEL);
+            input = child.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual("".concat(CONTAINER_ID, ".").concat(FIELD_ID));
+            expect(input.value).toEqual(VALUE);
+
+          case 19:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should correctly set the value of the nested component within a collection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var COLLECTION_ID, ID, FIELD_ID, LABEL, VALUE, PARENT_CONFIG, NESTED_CONFIG, _renderWithValidation3, container, child, label, input;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            COLLECTION_ID = 'collection-id';
+            ID = 'testId';
+            FIELD_ID = 'fieldId';
+            LABEL = 'Test label';
+            VALUE = 'nestedValue';
+            PARENT_CONFIG = {
+              onChange: function onChange() {},
+              formData: _defineProperty({}, COLLECTION_ID, [_defineProperty({}, FIELD_ID, VALUE)]),
+              full_path: "".concat(COLLECTION_ID, "[0].").concat(FIELD_ID)
+            };
+            NESTED_CONFIG = [{
+              id: ID,
+              fieldId: FIELD_ID,
+              label: LABEL,
+              type: 'text'
+            }];
+            _renderWithValidation3 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation3.container;
+            child = container.childNodes[0];
+            expect(child.childNodes.length).toEqual(3);
+            expect(child.classList).toContain('govuk-form-group');
+            label = child.childNodes[0];
+            expect(label).toBeDefined();
+            expect(label.innerHTML).toContain(LABEL);
+            input = child.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual("".concat(COLLECTION_ID, "[0].").concat(FIELD_ID));
+            expect(input.value).toEqual(VALUE);
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

package/dist/utils/Validate/validateComponent.test.js

@@ -240,7 +240,7 @@ describe('utils.Validate.Component', function () {
         }
       };
       expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toEqual([{
-        id: "undefined.nestedId",
+        id: "nestedId",
         error: "Field is required"
       }]);
     });

package/dist/utils/Validate/validateContainer.js

@@ -44,7 +44,10 @@ var validateContainer = function validateContainer(container, outerData, formDat
   if (Array.isArray(container.components)) {
     var containerData = outerData && container.fieldId ? outerData[container.fieldId] : outerData;
     container.components.forEach(function (component) {
-      var full_path = "".concat(container.full_path || container.fieldId, ".").concat(component.fieldId);
+      // It is possible that the container being passed in is a
+      // dummy container just for validation. In that scenario we want 
+      // to ignore the full_path and just use the component's fieldId.
+      var full_path = container.full_path || container.fieldId ? "".concat(container.full_path || container.fieldId, ".").concat(component.fieldId) : component.fieldId;
       errors.push((0, _validateComponent.default)(_objectSpread(_objectSpread({}, component), {}, {
         full_path: full_path
       }), containerData, fd));

package/package.json

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