@ukhomeoffice/cop-react-form-renderer 4.22.3 → 4.22.4-charlie

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _models = require("../../models");
 
+var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
+
 var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
 var _getCYARowsForCollection = _interopRequireDefault(require("./getCYARowsForCollection"));
@@ -23,7 +25,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var getCYARowsForContainer = function getCYARowsForContainer(page, container, formData, onAction) {
   if ((0, _showComponentCYA.default)(container, page.formData)) {
-    return container.components.filter(function (c) {
+    var allComponents = (0, _elevateNestedComponents.default)(container.components, formData);
+    return allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
       var fd = formData ? formData[component.fieldId] : undefined;

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.test.js

@@ -320,4 +320,51 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     checkTitleRow(1, ROWS[2]);
     checkValueRow(1, ROWS[3], 'Charlie');
   });
+  it('should get the appropriate number for rows components with nested components inside a container', function () {
+    var FORM_DATA = {
+      container: {
+        a: 'B',
+        nested: 'Bravo'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var NESTED_COMPONENT = {
+      id: 'nested',
+      fieldId: 'nested',
+      type: _models.ComponentTypes.TEXT
+    };
+    var COMPONENT = {
+      type: 'radios',
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha',
+      data: {
+        options: [{
+          value: 'B',
+          label: 'B',
+          nested: [NESTED_COMPONENT]
+        }, {
+          value: 'A',
+          label: 'A'
+        }]
+      }
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT],
+      value: FORM_DATA.container,
+      formData: FORM_DATA
+    };
+
+    var ON_ACTION = function ON_ACTION() {};
+
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(2);
+  });
 });

package/dist/utils/Component/elevateNestedComponents.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _Data = _interopRequireDefault(require("../Data"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Iterates over an array of components and brings any nested 
  * components that should be visible into the top level array.
@@ -40,7 +44,9 @@ var elevateNestedComponents = function elevateNestedComponents(components, data)
     (_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) {
+      var sourceData = (data === null || data === void 0 ? void 0 : data[component.id]) || _Data.default.getSource(data, component.full_path);
+
+      if (Array.isArray(option.nested) && sourceData === option.value) {
         allComponents = allComponents.concat(option.nested);
       }
     });

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

@@ -89,4 +89,36 @@ describe('utils.Component.elevateNestedComponents', function () {
       id: 'nestedTwo'
     }]));
   });
+  it('should return the original array with elevated nested components when a component has a full_path', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }]
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      },
+      full_path: 'component.radiosComp'
+    }];
+    var DATA = {
+      component: {
+        radiosComp: 'yes'
+      }
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS, [{
+      id: 'nestedOne'
+    }, {
+      id: 'nestedTwo'
+    }]));
+  });
 });

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/package.json

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