@ukhomeoffice/cop-react-form-renderer 5.27.0 → 5.27.2

package/dist/components/FormComponent/Collection.js

@@ -193,7 +193,9 @@ var Collection = function Collection(_ref) {
       onChange: onCollectionChange,
       onTopLevelChange: onTopLevelChange,
       wrap: wrap
-    }), removeStyle === 'end' && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    }), removeStyle === 'end' && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, {
+      className: "govuk-!-margin-top-1"
+    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
       onClick: function onClick() {
         return onRemoveItem(item);
       },

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -33,6 +33,27 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global imports
 // Local imports
 // JSON
+var setDate = function setDate(element, date) {
+  var items = element.children;
+  _react.fireEvent.change(items[0].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-day',
+      value: date[0]
+    }
+  });
+  _react.fireEvent.change(items[1].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-month',
+      value: date[1]
+    }
+  });
+  _react.fireEvent.change(items[2].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-year',
+      value: date[2]
+    }
+  });
+};
 describe('components', function () {
   describe('FormRenderer', function () {
     var mockAxios = new _axiosMockAdapter.default(_axios.default);
@@ -414,7 +435,7 @@ describe('components', function () {
         }
       }, _callee14);
     })));
-    it('should render a tasklist', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+    it('should render a task list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
       var taskList;
       return _regeneratorRuntime().wrap(function _callee16$(_context16) {
         while (1) switch (_context16.prev = _context16.next) {
@@ -466,7 +487,7 @@ describe('components', function () {
         }
       }, _callee18);
     })));
-    it('should load tasklist with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+    it('should load task list with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_WITH_NOTES, taskList;
       return _regeneratorRuntime().wrap(function _callee20$(_context20) {
         while (1) switch (_context20.prev = _context20.next) {
@@ -514,7 +535,7 @@ describe('components', function () {
         }
       }, _callee20);
     })));
-    it('should not load tasklist with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+    it('should not load task list with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_WITH_NOTES, taskList;
       return _regeneratorRuntime().wrap(function _callee22$(_context22) {
         while (1) switch (_context22.prev = _context22.next) {
@@ -567,7 +588,7 @@ describe('components', function () {
       }, _callee22);
     })));
     it('should handle navigating between task list pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
+      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, fieldset, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
       return _regeneratorRuntime().wrap(function _callee24$(_context24) {
         while (1) switch (_context24.prev = _context24.next) {
           case 0:
@@ -608,24 +629,8 @@ describe('components', function () {
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
             expect(newPage.childNodes[0].textContent).toEqual('Event Date');
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0]; // child nodes of fieldset are legend and date
+            setDate(fieldset.children[1], ['7', '7', '2022']);
             continueButton = newPage.childNodes[2].childNodes[0];
             _react.fireEvent.click(continueButton, {});
 
@@ -676,14 +681,14 @@ describe('components', function () {
             expect(finalSubmit.date).toEqual('7-7-2022');
             expect(finalSubmit.mode).toEqual('air');
             expect(finalSubmit.formStatus.tasks['Date, location and mode details'].complete).toEqual(true);
-          case 54:
+          case 53:
           case "end":
             return _context24.stop();
         }
       }, _callee24);
     })));
     it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-      var ON_SUBMIT, HOOKS, taskList, newPage;
+      var ON_SUBMIT, HOOKS, taskList, newPage, fieldset;
       return _regeneratorRuntime().wrap(function _callee26$(_context26) {
         while (1) switch (_context26.prev = _context26.next) {
           case 0:
@@ -713,24 +718,10 @@ describe('components', function () {
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0];
+            setDate(fieldset.children[1], ['7', '7', '2022']);
+            // child nodes of fieldset are legend and date
+
             _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {});
 
             // Fill second page and navigate
@@ -746,7 +737,7 @@ describe('components', function () {
 
             // Should be at CYA page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');
-          case 17:
+          case 16:
           case "end":
             return _context26.stop();
         }
@@ -803,7 +794,7 @@ describe('components', function () {
       }, _callee28);
     })));
     it('should go to the first page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
-      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
+      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage, fieldset;
       return _regeneratorRuntime().wrap(function _callee30$(_context30) {
         while (1) switch (_context30.prev = _context30.next) {
           case 0:
@@ -839,24 +830,8 @@ describe('components', function () {
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0];
+            setDate(fieldset.children[1], ['7', '7', '2022']);
             _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {});
 
             // Fill second page
@@ -870,7 +845,7 @@ describe('components', function () {
 
             // Should be on the first page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Date');
-          case 19:
+          case 18:
           case "end":
             return _context30.stop();
         }

package/dist/utils/Component/elevateNestedComponents.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Data = _interopRequireDefault(require("../Data"));
+var _showComponent = _interopRequireDefault(require("./showComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Iterates over an array of components and brings any nested 
@@ -35,16 +36,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var elevateNestedComponents = function elevateNestedComponents(components, data) {
   var allComponents = [];
   components === null || components === void 0 ? void 0 : components.forEach(function (component) {
-    var _component$data;
     allComponents.push(component);
-    (_component$data = component.data) === null || _component$data === void 0 || (_component$data = _component$data.options) === null || _component$data === void 0 ? void 0 : _component$data.forEach(function (option) {
-      // If this option has nested components and is
-      // selected, then add its nested components to the array.
-      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);
-      }
-    });
+    // If the component wasn't shown we shouldn't elevate anything nested under it
+    if ((0, _showComponent.default)(component, data)) {
+      var _component$data;
+      (_component$data = component.data) === null || _component$data === void 0 || (_component$data = _component$data.options) === null || _component$data === void 0 ? void 0 : _component$data.forEach(function (option) {
+        // If this option has nested components and is
+        // selected, then add its nested components to the array.
+        var sourceData = (data === null || data === void 0 ? void 0 : data[component.id]) || _Data.default.getSource(data, component.full_path);
+        // If the specific option wasn't shown we shouldn't elevate anything nested under it
+        if (Array.isArray(option.nested) && sourceData === option.value && (0, _showComponent.default)(option, data)) {
+          allComponents = allComponents.concat(option.nested);
+        }
+      });
+    }
   });
   return allComponents;
 };

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

@@ -119,4 +119,148 @@ describe('utils.Component.elevateNestedComponents', function () {
       id: 'nestedTwo'
     }]));
   });
+  it('should not elevate nested components under a component which is hidden with a show_when', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      show_when: {
+        field: 'testField',
+        op: 'eq',
+        value: 'blue'
+      },
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }]
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes',
+      testField: 'red'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS));
+  });
+  it('should elevate nested components under a component which is shown with a show_When', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      show_when: {
+        field: 'testField',
+        op: 'eq',
+        value: 'red'
+      },
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }]
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes',
+      testField: 'red'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS, [{
+      id: 'nestedOne'
+    }, {
+      id: 'nestedTwo'
+    }]));
+  });
+  it('should elevate nested components under an option which is shown with a show_When', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      show_when: {
+        field: 'testField',
+        op: 'eq',
+        value: 'red'
+      },
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }],
+          show_when: {
+            field: 'testFieldTwo',
+            op: 'eq',
+            value: 'purple'
+          }
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes',
+      testField: 'red',
+      testFieldTwo: 'purple'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS, [{
+      id: 'nestedOne'
+    }, {
+      id: 'nestedTwo'
+    }]));
+  });
+  it('should not elevate nested components under an option which is hidden with a show_When', function () {
+    var COMPONENTS = [{
+      id: 'textComp'
+    }, {
+      id: 'radiosComp',
+      show_when: {
+        field: 'testField',
+        op: 'eq',
+        value: 'red'
+      },
+      data: {
+        options: [{
+          label: 'Yes',
+          value: 'yes',
+          nested: [{
+            id: 'nestedOne'
+          }, {
+            id: 'nestedTwo'
+          }],
+          show_when: {
+            field: 'testFieldTwo',
+            op: 'eq',
+            value: 'purple'
+          }
+        }, {
+          label: 'No',
+          value: 'no'
+        }]
+      }
+    }];
+    var DATA = {
+      radiosComp: 'yes',
+      testField: 'red',
+      testFieldTwo: 'orange'
+    };
+    expect((0, _elevateNestedComponents.default)(COMPONENTS, DATA)).toEqual([].concat(COMPONENTS));
+  });
 });

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

@@ -28,53 +28,53 @@ describe('utils.Component.get', function () {
       onChange: ON_CHANGE,
       'data-testid': ID
     };
+    var checkDateField = function checkDateField(node, option) {
+      expect(node.tagName).toEqual('DIV');
+      expect(node.classList).toContain('govuk-date-input__item');
+      var group = node.childNodes[0]; // form group
+      var _group$childNodes = _slicedToArray(group.childNodes, 2),
+        label = _group$childNodes[0],
+        input = _group$childNodes[1];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(option.label);
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.id).toEqual(option.id);
+      return input;
+    };
     var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
       container = _render.container;
     var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
       _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
       formGroup = _getAllByTestId2[0],
-      dateinput = _getAllByTestId2[1];
+      dateInput = _getAllByTestId2[1];
     expect(formGroup.tagName).toEqual('DIV');
     expect(formGroup.classList).toContain('govuk-form-group');
     var label = formGroup.childNodes[0];
     expect(label.innerHTML).toContain(LABEL);
     expect(label.getAttribute('for')).toEqual(ID);
-    expect(dateinput.tagName).toEqual('DIV');
-    expect(dateinput.classList).toContain('govuk-date-input');
-    expect(dateinput.id).toEqual(ID);
-    var dayitem = dateinput.childNodes[0];
-    expect(dayitem.tagName).toEqual('DIV');
-    expect(dayitem.classList).toContain('govuk-date-input__item');
-    var daylabel = dayitem.childNodes[0];
-    expect(daylabel.tagName).toEqual('LABEL');
-    expect(daylabel.classList).toContain('govuk-label');
-    expect(daylabel.textContent).toEqual('Day');
-    var dayinput = dayitem.childNodes[1];
-    expect(dayinput.tagName).toEqual('INPUT');
-    expect(dayinput.id).toEqual("".concat(ID, "-day"));
-    var monthitem = dateinput.childNodes[1];
-    expect(monthitem.tagName).toEqual('DIV');
-    expect(monthitem.classList).toContain('govuk-date-input__item');
-    var monthlabel = monthitem.childNodes[0];
-    expect(monthlabel.tagName).toEqual('LABEL');
-    expect(monthlabel.classList).toContain('govuk-label');
-    expect(monthlabel.textContent).toEqual('Month');
-    var monthinput = monthitem.childNodes[1];
-    expect(monthinput.tagName).toEqual('INPUT');
-    expect(monthinput.id).toEqual("".concat(ID, "-month"));
-    var yearitem = dateinput.childNodes[2];
-    expect(yearitem.tagName).toEqual('DIV');
-    expect(yearitem.classList).toContain('govuk-date-input__item');
-    var yearlabel = yearitem.childNodes[0];
-    expect(yearlabel.tagName).toEqual('LABEL');
-    expect(yearlabel.classList).toContain('govuk-label');
-    expect(yearlabel.textContent).toEqual('Year');
-    var yearinput = yearitem.childNodes[1];
-    expect(yearinput.tagName).toEqual('INPUT');
-    expect(yearinput.id).toEqual("".concat(ID, "-year"));
+    expect(dateInput.tagName).toEqual('DIV');
+    expect(dateInput.classList).toContain('govuk-date-input');
+    expect(dateInput.id).toEqual(ID);
+    var _dateInput$childNodes = _slicedToArray(dateInput.childNodes, 3),
+      dayItem = _dateInput$childNodes[0],
+      monthItem = _dateInput$childNodes[1],
+      yearItem = _dateInput$childNodes[2];
+    var dayInput = checkDateField(dayItem, {
+      id: "".concat(ID, "-day"),
+      label: 'Day'
+    });
+    var monthInput = checkDateField(monthItem, {
+      id: "".concat(ID, "-month"),
+      label: 'Month'
+    });
+    var yearInput = checkDateField(yearItem, {
+      id: "".concat(ID, "-year"),
+      label: 'Year'
+    });
 
     // Add something to the day and make sure it fires.
-    _react.fireEvent.change(dayinput, {
+    _react.fireEvent.change(dayInput, {
       target: {
         name: "".concat(FIELD_ID, "-day"),
         value: '5'
@@ -86,7 +86,7 @@ describe('utils.Component.get', function () {
       value: '5--'
     });
     // And now the month...
-    _react.fireEvent.change(monthinput, {
+    _react.fireEvent.change(monthInput, {
       target: {
         name: "".concat(FIELD_ID, "-month"),
         value: '11'
@@ -98,7 +98,7 @@ describe('utils.Component.get', function () {
       value: '5-11-'
     });
     // And finally the year.
-    _react.fireEvent.change(yearinput, {
+    _react.fireEvent.change(yearInput, {
       target: {
         name: "".concat(FIELD_ID, "-year"),
         value: '2022'

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

@@ -63,9 +63,9 @@ describe('utils.Component.get', function () {
           expect(input2.tagName).toEqual('DIV');
           expect(input2.classList).toContain('govuk-date-input');
           expect(input2.id).toEqual(ID2);
-          expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
-          expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
-          expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
+          expect(input2.childNodes[0].childNodes[0].childNodes[1].value).toEqual('1');
+          expect(input2.childNodes[1].childNodes[0].childNodes[1].value).toEqual('2');
+          expect(input2.childNodes[2].childNodes[0].childNodes[1].value).toEqual('2022');
         case 35:
         case "end":
           return _context.stop();

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

@@ -61,7 +61,7 @@ describe('utils.Component.get', function () {
     }].forEach(function (part) {
       expect(part.item.tagName).toEqual('DIV');
       expect(part.item.classList).toContain('govuk-date-input__item');
-      var _part$item$childNodes = _slicedToArray(part.item.childNodes, 2),
+      var _part$item$childNodes = _slicedToArray(part.item.childNodes[0].childNodes, 2),
         inputLabel = _part$item$childNodes[0],
         input = _part$item$childNodes[1];
       expect(inputLabel.tagName).toEqual('LABEL');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.27.0",
+  "version": "5.27.2",
   "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": "^3.9.0",
+    "@ukhomeoffice/cop-react-components": "^3.14.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",