@ukhomeoffice/cop-react-form-renderer 6.11.1 → 6.12.1

package/README.md

@@ -9,10 +9,18 @@ It uses components from [COP React Design System](https://github.com/UKHomeOffic
 - `@ukhomeoffice/cop-react-components` - and offers various styles of forms. These are showcased inside of
 a [yarn storybook](Storybook) within the project.
 
+To get started run `nvm use` to switch to currently supported node version (if your using node version manager). Otherwise, install node version specified in `.nvmrc`.
+
+This library uses the yarn package manager. To install this you will need to run `npm install --global yarn` on the supported version of node.
+
 ## Available Scripts
 
 In the project directory, you can run:
 
+### `yarn install`
+
+Installs the package.json dependencies.
+
 ### `yarn lint`
 
 Runs `eslint` against the project to check for coding issues.

package/dist/components/CheckYourAnswers/Answer.js

@@ -22,7 +22,7 @@ var Answer = function Answer(_ref) {
     formData = _ref.formData,
     placeholder = _ref.placeholder;
   if (!value) {
-    var placeholderValue = (component === null || component === void 0 ? void 0 : component.cyaPlaceholder) || placeholder;
+    var placeholderValue = Object.prototype.hasOwnProperty.call(component || {}, 'cyaPlaceholder') ? component === null || component === void 0 ? void 0 : component.cyaPlaceholder : placeholder;
     return placeholderValue || /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
   }
   if (!component) {

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -207,7 +207,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       isGroup: isGroup(page.id)
     }));
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
-    actions: actions,
+    actions: actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+      return _utils.default.Component.show(action, _pages[_pages.length - 1].formData);
+    }),
     onAction: function onAction(action) {
       return _onAction(action);
     }
@@ -223,7 +225,9 @@ CheckYourAnswers.propTypes = {
   noGroupAction: _propTypes.default.bool,
   onAction: _propTypes.default.func.isRequired,
   onRowAction: _propTypes.default.func.isRequired,
-  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({
+    formData: _propTypes.default.shape({}).isRequired
+  })).isRequired,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -13,6 +13,8 @@ var _userProfile = _interopRequireDefault(require("../../json/userProfile.json")
 var _groupData = _interopRequireDefault(require("../../json/group.data.json"));
 var _group = _interopRequireDefault(require("../../json/group.json"));
 var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
+var _actions = _interopRequireDefault(require("../../json/actions.json"));
+var _actionsNoSave = _interopRequireDefault(require("../../json/actionsNoSave.json"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
 var _utils = _interopRequireDefault(require("../../utils"));
@@ -673,12 +675,12 @@ describe('components', function () {
         }
       }, _callee26);
     })));
-    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
-      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+    it('should show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
       return _regeneratorRuntime().wrap(function _callee28$(_context28) {
         while (1) switch (_context28.prev = _context28.next) {
           case 0:
-            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
             _context28.next = 3;
             return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
               return _regeneratorRuntime().wrap(function _callee27$(_context27) {
@@ -686,8 +688,10 @@ describe('components', function () {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
                       groups: _groupOfRow.default.cya.groups,
-                      optionalFieldPlaceholder: "Not entered"
+                      actions: _actions.default
                     }), container);
                   case 1:
                   case "end":
@@ -695,6 +699,83 @@ describe('components', function () {
                 }
               }, _callee27);
             })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton.tagName).toEqual('BUTTON');
+            expect(saveButton.textContent).toEqual('Save and return later');
+          case 12:
+          case "end":
+            return _context28.stop();
+        }
+      }, _callee28);
+    })));
+    it('should not show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
+            _context30.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      groups: _groupOfRow.default.cya.groups,
+                      actions: _actionsNoSave.default
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context29.stop();
+                }
+              }, _callee29);
+            })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton).toEqual(undefined);
+          case 11:
+          case "end":
+            return _context30.stop();
+        }
+      }, _callee30);
+    })));
+    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            _context32.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      groups: _groupOfRow.default.cya.groups,
+                      optionalFieldPlaceholder: "Not entered"
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context31.stop();
+                }
+              }, _callee31);
+            })));
           case 3:
             cya = checkCYA(container);
             namesGroup = cya.childNodes[2];
@@ -712,14 +793,14 @@ describe('components', function () {
             expect(surname.childNodes[1].tagName).toEqual('DD');
           case 17:
           case "end":
-            return _context28.stop();
+            return _context32.stop();
         }
-      }, _callee28);
+      }, _callee32);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
-        while (1) switch (_context30.prev = _context30.next) {
+      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
+        while (1) switch (_context34.prev = _context34.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -733,10 +814,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context30.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+            _context34.next = 7;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
+              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -745,9 +826,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context33.stop();
                 }
-              }, _callee29);
+              }, _callee33);
             })));
           case 7:
             cya = checkCYA(container);
@@ -762,14 +843,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context30.stop();
+            return _context34.stop();
         }
-      }, _callee30);
+      }, _callee34);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
+      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
+        while (1) switch (_context36.prev = _context36.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -779,10 +860,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context32.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
-              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
-                while (1) switch (_context31.prev = _context31.next) {
+            _context36.next = 6;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
+              return _regeneratorRuntime().wrap(function _callee35$(_context35) {
+                while (1) switch (_context35.prev = _context35.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -791,9 +872,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context35.stop();
                 }
-              }, _callee31);
+              }, _callee35);
             })));
           case 6:
             cya = checkCYA(container);
@@ -807,14 +888,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context32.stop();
+            return _context36.stop();
         }
-      }, _callee32);
+      }, _callee36);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee38() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
-        while (1) switch (_context34.prev = _context34.next) {
+      return _regeneratorRuntime().wrap(function _callee38$(_context38) {
+        while (1) switch (_context38.prev = _context38.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -828,10 +909,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _context34.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
-              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
-                while (1) switch (_context33.prev = _context33.next) {
+            _context38.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee37() {
+              return _regeneratorRuntime().wrap(function _callee37$(_context37) {
+                while (1) switch (_context37.prev = _context37.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -843,9 +924,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context33.stop();
+                    return _context37.stop();
                 }
-              }, _callee33);
+              }, _callee37);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -859,21 +940,21 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context34.stop();
+            return _context38.stop();
         }
-      }, _callee34);
+      }, _callee38);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee40() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
-        while (1) switch (_context36.prev = _context36.next) {
+      return _regeneratorRuntime().wrap(function _callee40$(_context40) {
+        while (1) switch (_context40.prev = _context40.next) {
           case 0:
             ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
             GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
-            _context36.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
-              return _regeneratorRuntime().wrap(function _callee35$(_context35) {
-                while (1) switch (_context35.prev = _context35.next) {
+            _context40.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee39() {
+              return _regeneratorRuntime().wrap(function _callee39$(_context39) {
+                while (1) switch (_context39.prev = _context39.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -884,9 +965,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context35.stop();
+                    return _context39.stop();
                 }
-              }, _callee35);
+              }, _callee39);
             })));
           case 4:
             cya = checkCYA(container);
@@ -908,9 +989,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context36.stop();
+            return _context40.stop();
         }
-      }, _callee36);
+      }, _callee40);
     })));
   });
 });

package/dist/components/CollectionPage/CollectionPage.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DEFAULT_CLASS = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 var _FormPage2 = require("../FormPage/FormPage");
@@ -104,7 +105,7 @@ var CollectionPage = function CollectionPage(_ref) {
       // If there is no active entry in the collection, we create
       // a new entry and generate a new ID for it.
       // This ID becomes the active ID for the collection.
-      var newId = Date.now().toString();
+      var newId = (0, _uuid.v4)();
       reportActiveIdChange(newId);
       reportChange([].concat(data, [_defineProperty({
         id: newId

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -252,7 +252,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
       classModifiers: ['secondary']
     },
     onAction: onAction
-  }), data.map(function (entry, index) {
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "collection-summary-card-list"
+  }, data.map(function (entry, index) {
     var isInError = errors.filter(function (e) {
       return e.entryId === entry.id;
     }).length > 0;
@@ -260,7 +262,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
       focusOn: (toFocusOn === null || toFocusOn === void 0 ? void 0 : toFocusOn.id) === entry.id
     });
     var key = "".concat(config.fieldId, ".summaryCard").concat(entry.id);
-    return /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
+    return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
       entryId: entry.id,
       topLevelErrors: errors,
       clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {
@@ -296,8 +298,8 @@ var CollectionSummary = function CollectionSummary(_ref) {
       inError: errors.filter(function (e) {
         return e.entryId === entry.id;
       }).length > 0
-    }));
-  }), config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    })));
+  })), config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     id: "".concat(config.fieldId, ".addButton"),
     action: {
       collection: config.collectionName,

package/dist/components/CollectionSummary/CollectionSummary.scss

@@ -1,5 +1,10 @@
 @import "govuk-frontend/dist/govuk/_base";
 
+.collection-summary-card-list {
+  list-style-type: none;
+  padding-inline-start: 0;
+}
+
 .hods-form-summary-card.hods-form-summary-card--nested {
   box-shadow: none;
   border: none;

package/dist/components/CollectionSummary/CollectionSummary.test.js

@@ -57,9 +57,23 @@ describe('components.CollectionSummary.CollectionSummary', function () {
   }];
   var ON_ACTION = function ON_ACTION() {};
   var checkSetup = function checkSetup(container) {
+    var withAddButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var summaryDiv = container.children[0];
     expect(summaryDiv.tagName).toEqual('DIV');
-    return summaryDiv;
+    var cardList = withAddButton ? summaryDiv.children[1] : summaryDiv.children[0];
+    expect(cardList.tagName).toEqual('UL');
+    expect(cardList.classList).toContain('collection-summary-card-list');
+    var cards = Array.from(cardList.children, function (child) {
+      expect(child.tagName).toEqual('LI');
+      return child.children[0] || null;
+    }).filter(function (c) {
+      return !!c;
+    });
+    return {
+      summaryDiv: summaryDiv,
+      cardList: cardList,
+      cards: cards
+    };
   };
   it('should correctly render a CollectionSummary component', function () {
     var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
@@ -68,10 +82,11 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         onAction: ON_ACTION
       })),
       container = _renderWithValidation.container;
-    var summary = checkSetup(container);
-    expect(summary.children.length).toEqual(2);
-    expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
-    expect(summary.children[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
+    var _checkSetup = checkSetup(container),
+      cards = _checkSetup.cards;
+    expect(cards.length).toEqual(2);
+    expect(cards[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
+    expect(cards[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
   });
   it('should focus on the most recently duplicated item', function () {
     var customConfig = {
@@ -145,14 +160,16 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         onAction: ON_ACTION
       })),
       container = _renderWithValidation4.container;
-    var summary = checkSetup(container);
-    expect(summary.children.length).toEqual(2);
-    var card = summary.children[0];
+    var _checkSetup2 = checkSetup(container),
+      summaryDiv = _checkSetup2.summaryDiv,
+      cards = _checkSetup2.cards;
+    expect(cards.length).toEqual(2);
+    var card = cards[0];
     var deleteButton = card.children[0].children[1].children[0];
     _react2.fireEvent.click(deleteButton, {});
-    expect(summary.children.length).toEqual(3); // Now with a confirmation.
-    expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".confirmation"));
-    expect(summary.children[0].classList).toContain(_Confirmation.DEFAULT_CLASS);
+    expect(summaryDiv.children.length).toEqual(2); // Now with a confirmation.
+    expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG.fieldId, ".confirmation"));
+    expect(summaryDiv.children[0].classList).toContain(_Confirmation.DEFAULT_CLASS);
   });
   describe('Add Another button', function () {
     it('should render with an Add button if one is configured', function () {
@@ -174,11 +191,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation5.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(3); // The button and a card for each item.
-      expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
-      expect(summary.children[0].textContent).toEqual(CONFIG_WITH_BUTTON.addButton.label);
-      expect(summary.children[0].tagName).toEqual('BUTTON');
+      var _checkSetup3 = checkSetup(container, true),
+        summaryDiv = _checkSetup3.summaryDiv;
+      expect(summaryDiv.children.length).toEqual(2); // The button and card list.
+      expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
+      expect(summaryDiv.children[0].textContent).toEqual(CONFIG_WITH_BUTTON.addButton.label);
+      expect(summaryDiv.children[0].tagName).toEqual('BUTTON');
     });
     it('should use the default button label if none is provided', function () {
       var CONFIG_WITH_BUTTON = {
@@ -198,11 +216,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation6.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(3); // The button and a card for each item.
-      expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
-      expect(summary.children[0].textContent).toEqual(_CollectionSummary.DEFAULT_ADD_BUTTON_LABEL);
-      expect(summary.children[0].tagName).toEqual('BUTTON');
+      var _checkSetup4 = checkSetup(container, true),
+        summaryDiv = _checkSetup4.summaryDiv;
+      expect(summaryDiv.children.length).toEqual(2); // The button and card list.
+      expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
+      expect(summaryDiv.children[0].textContent).toEqual(_CollectionSummary.DEFAULT_ADD_BUTTON_LABEL);
+      expect(summaryDiv.children[0].tagName).toEqual('BUTTON');
     });
     it('should apply the expected class name to the summary card when delete button is pressed', function () {
       var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
@@ -211,9 +230,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation7.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup5 = checkSetup(container),
+        cards = _checkSetup5.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
@@ -227,9 +247,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation8.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup6 = checkSetup(container),
+        cards = _checkSetup6.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmButton = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS, " button.hods-button--warning"));
@@ -243,9 +264,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation9.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup7 = checkSetup(container),
+        cards = _checkSetup7.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
@@ -270,9 +292,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         })),
         container = _renderWithValidation10.container,
         getByText = _renderWithValidation10.getByText;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup8 = checkSetup(container),
+        cards = _checkSetup8.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.querySelector('.govuk-summary-card__actions li:last-child button');
       _react2.fireEvent.click(deleteButton);
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
@@ -302,9 +325,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         })),
         container = _renderWithValidation11.container,
         getByText = _renderWithValidation11.getByText;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup9 = checkSetup(container),
+        cards = _checkSetup9.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.querySelector('.govuk-summary-card__actions li:last-child button');
       _react2.fireEvent.click(deleteButton);
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));