@ukhomeoffice/cop-react-form-renderer 6.7.0-alpha → 6.11.1

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

@@ -4,16 +4,19 @@ var _react = _interopRequireDefault(require("react"));
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _setupTests = require("../../setupTests");
 var _SummaryCardDetails = _interopRequireWildcard(require("./SummaryCardDetails"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Global imports.
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
 // Local imports.
-
-describe('components.CollectionSummary.SummaryCardDetails', () => {
-  const classes = _copReactComponents.Utils.classBuilder(_SummaryCardDetails.DEFAULT_CLASS, [], '');
-  const ENTRY = {
+describe('components.CollectionSummary.SummaryCardDetails', function () {
+  var classes = _copReactComponents.Utils.classBuilder(_SummaryCardDetails.DEFAULT_CLASS, [], '');
+  var ENTRY = {
     id: '001',
     bannerText: 'A banner',
     titleText: 'A title',
@@ -30,8 +33,8 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
       childField2: 'bravo'
     }]
   };
-  it('should render sections and fields based on summaryLayout config', () => {
-    const CHILD_PAGES = [{
+  it('should render sections and fields based on summaryLayout config', function () {
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
@@ -55,35 +58,36 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {},
-      entryData: ENTRY
-    }));
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section titles
-    const section1Title = getByTextContent(container, 'Section 1');
-    const section2Title = getByTextContent(container, 'Section 2');
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
     expect(section1Title).not.toBeUndefined();
     expect(section2Title).not.toBeUndefined();
-    const section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-    const section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
-  it('should render sections containing containers based on summaryLayout config', () => {
-    const CHILD_PAGES = [{
+  it('should render sections containing containers based on summaryLayout config', function () {
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
@@ -108,7 +112,7 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         }]
       }]
     }];
-    const CONTAINER_ENTRY = {
+    var CONTAINER_ENTRY = {
       id: '001',
       bannerText: 'A banner',
       titleText: 'A title',
@@ -121,29 +125,30 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         subThree: 'charlie'
       }
     };
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {},
-      entryData: CONTAINER_ENTRY
-    }));
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CONTAINER_ENTRY
+      })),
+      container = _renderWithValidation2.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section title
-    const section1Title = getByTextContent(container, 'Section 1');
+    var section1Title = getByTextContent(container, 'Section 1');
     expect(section1Title).not.toBeUndefined();
 
     // All three subcomponents from the container should have labels and values displayed
-    const section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section1Content.textContent).toContain('subOneLabel');
     expect(section1Content.textContent).toContain('alpha');
     expect(section1Content.textContent).toContain('subTwoLabel');
@@ -151,8 +156,96 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
     expect(section1Content.textContent).toContain('subThreeLabel');
     expect(section1Content.textContent).toContain('charlie');
   });
-  it('should render sections if they have show_when checks and pass them', () => {
-    const CHILD_PAGES = [{
+  it('should render sections containing collections with dynamic titles based on summaryLayout config', function () {
+    var FORM_DATA = {
+      dummyTitleContent: "Kellogg's"
+    };
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          // eslint-disable-next-line no-template-curly-in-string
+          title: 'Section 1 - ${dummyTitleContent}',
+          columns: [{
+            fields: ['collectionComponent']
+          }]
+        }]
+      },
+      formData: FORM_DATA,
+      components: [{
+        fieldId: 'collectionComponent',
+        id: 'collectionComponent',
+        type: 'collection',
+        label: 'Collection',
+        labels: {
+          item: 'north'
+        },
+        item: [{
+          id: 'north',
+          fieldId: 'north',
+          type: 'text',
+          label: 'North',
+          required: true
+        }, {
+          id: 'east',
+          fieldId: 'east',
+          type: 'text',
+          label: 'East',
+          required: true
+        }, {
+          id: 'south',
+          fieldId: 'south',
+          type: 'text',
+          label: 'South',
+          required: true
+        }, {
+          id: 'west',
+          fieldId: 'west',
+          type: 'text',
+          label: 'West',
+          required: true
+        }]
+      }]
+    }];
+    var COLLECTION_ENTRY = {
+      summaryText: 'Full details',
+      collectionComponent: [{
+        north: 'Never',
+        east: 'Eat',
+        south: 'Shredded',
+        west: 'Wheat'
+      }]
+    };
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: COLLECTION_ENTRY
+      })),
+      container = _renderWithValidation3.container;
+
+    // Check for section title
+    var section1Title = container.querySelector(".".concat(classes('section-title')));
+    expect(section1Title).not.toBeUndefined();
+
+    // Check for embedded variables in title
+    expect(section1Title.textContent).toEqual("Section 1 - Kellogg's");
+
+    // All four subcomponents from the container should have labels and values displayed
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.textContent).toContain('North');
+    expect(section1Content.textContent).toContain('Never');
+    expect(section1Content.textContent).toContain('East');
+    expect(section1Content.textContent).toContain('Eat');
+    expect(section1Content.textContent).toContain('South');
+    expect(section1Content.textContent).toContain('Shredded');
+    expect(section1Content.textContent).toContain('West');
+    expect(section1Content.textContent).toContain('Wheat');
+  });
+  it('should render sections if they have show_when checks and pass them', function () {
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
@@ -181,39 +274,39 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const CUSTOM_ENTRY = {
-      ...ENTRY,
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: true
-    };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {},
-      entryData: CUSTOM_ENTRY
-    }));
+    });
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation4.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section titles
-    const section1Title = getByTextContent(container, 'Section 1');
-    const section2Title = getByTextContent(container, 'Section 2');
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
     expect(section1Title).not.toBeUndefined();
     expect(section2Title).not.toBeUndefined();
-    const section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-    const section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
-  it('should not render sections if they have show_when checks and fail them', () => {
-    const CHILD_PAGES = [{
+  it('should not render sections if they have show_when checks and fail them', function () {
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
@@ -242,37 +335,37 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const CUSTOM_ENTRY = {
-      ...ENTRY,
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: false
-    };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {},
-      entryData: CUSTOM_ENTRY
-    }));
+    });
+    var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation5.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section titles
-    const section1Title = getByTextContent(container, 'Section 1');
-    const section2Title = getByTextContent(container, 'Section 2');
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
     expect(section1Title).toBeUndefined();
     expect(section2Title).not.toBeUndefined();
-    const section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
-  it('should not render components that fail show_when checks', () => {
-    const CHILD_PAGES = [{
+  it('should not render components that fail show_when checks', function () {
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
@@ -301,36 +394,37 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {},
-      entryData: ENTRY
-    }));
+    var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation6.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section titles
-    const section1Title = getByTextContent(container, 'Section 1');
-    const section2Title = getByTextContent(container, 'Section 2');
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
     expect(section1Title).not.toBeUndefined();
     expect(section2Title).not.toBeUndefined();
-    const section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1); // Just Field A, Field B should be hidden.
 
-    const section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
-  it('should not render sections on pages that fail show_when checks', () => {
-    const CHILD_PAGES = [{
+  it('should not render sections on pages that fail show_when checks', function () {
+    var CHILD_PAGES = [{
       show_when: [{
         field: 'testField',
         op: '=',
@@ -364,37 +458,88 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    const CUSTOM_ENTRY = {
-      ...ENTRY,
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: false
-    };
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childMasterPages: [],
-      formData: {
-        testField: false
-      },
-      entryData: CUSTOM_ENTRY
-    }));
+    });
+    var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {
+          testField: false
+        },
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation7.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
 
     // Check for section titles
-    const section1Title = getByTextContent(container, 'Section 1');
-    const section2Title = getByTextContent(container, 'Section 2');
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
     expect(section1Title).toBeUndefined();
     expect(section2Title).toBeUndefined();
   });
-  it('should render child collections', () => {
-    const CHILD_MASTER_PAGES = [{
+  it('should not render columns that fail show_when checks', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['fieldA'],
+            show_when: [{
+              field: 'showSection1',
+              op: '=',
+              value: true
+            }]
+          }, {
+            fields: ['fieldB']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA',
+        label: 'fieldA'
+      }, {
+        fieldId: 'fieldB',
+        label: 'fieldB'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {
+          testField: false
+        },
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation8.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    expect(section1Title).toBeDefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should render child collections', function () {
+    var CHILD_MASTER_PAGES = [{
       collection: {
         name: 'childCollection'
       },
@@ -416,7 +561,7 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         }
       }]
     }];
-    const CHILD_PAGES = [{
+    var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           type: 'childCollection',
@@ -432,29 +577,87 @@ describe('components.CollectionSummary.SummaryCardDetails', () => {
         fieldId: 'fieldC'
       }]
     }];
-    const MASTER_PAGE = {
+    var MASTER_PAGE = {
       childPages: [].concat(CHILD_PAGES, CHILD_MASTER_PAGES)
     };
-    const CHILD_COLLECTIONS = ['childCollection'];
-    const {
-      container
-    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
-      masterPage: MASTER_PAGE,
-      childCollections: CHILD_COLLECTIONS,
-      formData: {},
-      entryData: ENTRY
-    }));
+    var CHILD_COLLECTIONS = ['childCollection'];
+    var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childCollections: CHILD_COLLECTIONS,
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation9.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(el => el.textContent === text);
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
     }
-    const childCollectionSectionTitle = getByTextContent(container, 'Children');
+    var childCollectionSectionTitle = getByTextContent(container, 'Children');
     expect(childCollectionSectionTitle).not.toBeUndefined();
-    const childSectionTitles = getByTextContent(container, 'Hidden Title');
+    var childSectionTitles = getByTextContent(container, 'Hidden Title');
     expect(childSectionTitles).toBeUndefined(); // Individual section title for child collections should be hidden.
 
-    const childFields = container.querySelectorAll(".".concat(classes('section')));
+    var childFields = container.querySelectorAll(".".concat(classes('section')));
     expect(childFields.length).toEqual(2); // One for each entry in the child collection.
   });
+
+  it('should render components if a component with the same ID has already failed a show_when', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB',
+        label: 'first',
+        show_when: [{
+          field: 'fieldA',
+          op: '=',
+          value: 'notTheRightValue'
+        }]
+      }, {
+        fieldId: 'fieldB',
+        label: 'second',
+        show_when: [{
+          field: 'fieldA',
+          op: '!=',
+          value: 'notTheRightValue'
+        }]
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
+          fieldA: 'notTheRightValue'
+        })
+      })),
+      container = _renderWithValidation10.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+    var section1Title = getByTextContent(container, 'Section 1');
+    expect(section1Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+  });
 });