@ukhomeoffice/cop-react-form-renderer 3.26.3 → 3.32.0

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

@@ -12,224 +12,370 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-describe('utils', function () {
-  describe('Validate', function () {
-    describe('page', function () {
-      var setup = function setup(id, type, label, required) {
-        return {
-          id: id,
-          fieldId: id,
-          type: type,
-          label: label,
-          required: required
-        };
+describe('utils.Validate.Page', function () {
+  describe('with FormPage', function () {
+    var setup = function setup(id, type, label, required) {
+      return {
+        id: id,
+        fieldId: id,
+        type: type,
+        label: label,
+        required: required
       };
+    };
 
-      it('should return no error when the components array is null', function () {
+    it('should return no error when the components array is null', function () {
+      var PAGE = {
+        components: null,
+        formData: null
+      };
+      expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+    });
+    it('should return no error when the components array is empty', function () {
+      var PAGE = {
+        components: [],
+        formData: null
+      };
+      expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+    });
+    describe('when there is no form data', function () {
+      it('should return no errors when no components are required', function () {
+        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', false), setup('b', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: null
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return an error for each required component', function () {
+        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false), // The only unrequired one
+        setup('d', _models.ComponentTypes.TEXT, 'Delta', true), setup('e', _models.ComponentTypes.TEXT, 'Echo', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: null
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(4);
+        expect(RESULT[0]).toEqual({
+          id: 'a',
+          error: 'Alpha is required'
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'b',
+          error: 'Bravo is required'
+        });
+        expect(RESULT[2]).toEqual({
+          id: 'd',
+          error: 'Delta is required'
+        });
+        expect(RESULT[3]).toEqual({
+          id: 'e',
+          error: 'Echo is required'
+        });
+      });
+      it('should return an error for each required component with interpolated label', function () {
+        var COMPONENTS = [// eslint-disable-next-line no-template-curly-in-string
+        setup('a', _models.ComponentTypes.TEXT, 'Alpha ${tiger}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('b', _models.ComponentTypes.EMAIL, 'Bravo ${panther}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('c', _models.ComponentTypes.AUTOCOMPLETE, 'Charlie ${eagle}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('d', _models.ComponentTypes.CHECKBOXES, 'Delta ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('e', _models.ComponentTypes.FILE, 'Echo ${zoo}', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: {
+            tiger: 'Tiger',
+            panther: 'Panther',
+            eagle: 'Eagle',
+            lion: 'Lion',
+            zoo: 'Zoo'
+          }
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(5);
+        expect(RESULT[0]).toEqual({
+          id: 'a',
+          error: "Alpha ".concat(PAGE.formData.tiger, " is required")
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'b',
+          error: "Bravo ".concat(PAGE.formData.panther, " is required")
+        });
+        expect(RESULT[2]).toEqual({
+          id: 'c',
+          error: "Charlie ".concat(PAGE.formData.eagle, " is required")
+        });
+        expect(RESULT[3]).toEqual({
+          id: 'd',
+          error: "Delta ".concat(PAGE.formData.lion, " is required")
+        });
+        expect(RESULT[4]).toEqual({
+          id: 'e',
+          error: "Echo ".concat(PAGE.formData.zoo, " is required")
+        });
+      });
+    });
+    describe('when the form data is fully valid', function () {
+      var DATA = {
+        alpha: 'alpha.smith@digital.homeoffice.gov.uk',
+        bravo: 'bravo.jones@digital.homeoffice.gov.uk'
+      };
+      it('should return no errors when none of the components are required or email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when all of the components are required but not email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when none of the components are required but are all email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when all of the components are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+    });
+    describe('when the form data has one field missing and includes an invalid email', function () {
+      var DATA = {
+        alpha: 'alpha.smith@digital.homeoffice.gov.uk',
+        bravo: 'bravo.jones@hotmail.com'
+      };
+      it('should return no errors when none of the components are required or email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
         var PAGE = {
-          components: null,
+          components: COMPONENTS,
           formData: null
         };
         expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
-      it('should return no error when the components array is empty', function () {
+      it('should return an error for the missing field when all are required but not email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(1);
+        expect(RESULT[0]).toEqual({
+          id: 'charlie',
+          error: 'Charlie is required'
+        });
+      });
+      it('should return an error for the invalid email field when none are required but all email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(1);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
+        });
+      });
+      it('should return an error for both invalid fields when all are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(2);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'charlie',
+          error: 'Charlie is required'
+        });
+      });
+      it('should return an interpolated error for both invalid fields when all are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie ${panther}', true)];
+        var PAGE = {
+          components: COMPONENTS,
+          formData: _objectSpread(_objectSpread({}, DATA), {}, {
+            lion: 'Lion',
+            panther: 'Panther'
+          })
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(2);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: "Enter bravo ".concat(PAGE.formData.lion, " in the correct format, like jane.doe@homeoffice.gov.uk")
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'charlie',
+          error: "Charlie ".concat(PAGE.formData.panther, " is required")
+        });
+      });
+    });
+  });
+  describe('with CollectionPage', function () {
+    var COLLECTION = {
+      name: 'pageCollection'
+    };
+
+    var setup = function setup(id, type, label, required) {
+      return {
+        id: id,
+        fieldId: id,
+        type: type,
+        label: label,
+        required: required
+      };
+    };
+
+    describe('when the form data is fully valid', function () {
+      var _DATA;
+
+      var DATA = (_DATA = {}, _defineProperty(_DATA, "".concat(COLLECTION.name, "ActiveId"), '01'), _defineProperty(_DATA, COLLECTION.name, [{
+        id: '01',
+        alpha: 'alpha.smith@digital.homeoffice.gov.uk',
+        bravo: 'bravo.jones@digital.homeoffice.gov.uk'
+      }]), _DATA);
+      it('should return no errors when none of the components are required or email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when all of the components are required but not email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when none of the components are required but are all email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
         var PAGE = {
-          components: [],
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+      it('should return no errors when all of the components are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
+      });
+    });
+    describe('when the form data has one field missing and includes an invalid email', function () {
+      var _DATA2;
+
+      var DATA = (_DATA2 = {}, _defineProperty(_DATA2, "".concat(COLLECTION.name, "ActiveId"), '01'), _defineProperty(_DATA2, COLLECTION.name, [{
+        id: '01',
+        alpha: 'alpha.smith@digital.homeoffice.gov.uk',
+        bravo: 'bravo.jones@hotmail.com'
+      }]), _DATA2);
+      it('should return no errors when none of the components are required or email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
           formData: null
         };
         expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
-      describe('when there is no form data', function () {
-        it('should return no errors when no components are required', function () {
-          var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', false), setup('b', _models.ComponentTypes.TEXT, 'Bravo', false)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: null
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-        it('should return an error for each required component', function () {
-          var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false), // The only unrequired one
-          setup('d', _models.ComponentTypes.TEXT, 'Delta', true), setup('e', _models.ComponentTypes.TEXT, 'Echo', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: null
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(4);
-          expect(RESULT[0]).toEqual({
-            id: 'a',
-            error: 'Alpha is required'
-          });
-          expect(RESULT[1]).toEqual({
-            id: 'b',
-            error: 'Bravo is required'
-          });
-          expect(RESULT[2]).toEqual({
-            id: 'd',
-            error: 'Delta is required'
-          });
-          expect(RESULT[3]).toEqual({
-            id: 'e',
-            error: 'Echo is required'
-          });
-        });
-        it('should return an error for each required component with interpolated label', function () {
-          var COMPONENTS = [// eslint-disable-next-line no-template-curly-in-string
-          setup('a', _models.ComponentTypes.TEXT, 'Alpha ${tiger}', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('b', _models.ComponentTypes.EMAIL, 'Bravo ${panther}', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('c', _models.ComponentTypes.AUTOCOMPLETE, 'Charlie ${eagle}', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('d', _models.ComponentTypes.CHECKBOXES, 'Delta ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('e', _models.ComponentTypes.FILE, 'Echo ${zoo}', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: {
-              tiger: 'Tiger',
-              panther: 'Panther',
-              eagle: 'Eagle',
-              lion: 'Lion',
-              zoo: 'Zoo'
-            }
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(5);
-          expect(RESULT[0]).toEqual({
-            id: 'a',
-            error: "Alpha ".concat(PAGE.formData.tiger, " is required")
-          });
-          expect(RESULT[1]).toEqual({
-            id: 'b',
-            error: "Bravo ".concat(PAGE.formData.panther, " is required")
-          });
-          expect(RESULT[2]).toEqual({
-            id: 'c',
-            error: "Charlie ".concat(PAGE.formData.eagle, " is required")
-          });
-          expect(RESULT[3]).toEqual({
-            id: 'd',
-            error: "Delta ".concat(PAGE.formData.lion, " is required")
-          });
-          expect(RESULT[4]).toEqual({
-            id: 'e',
-            error: "Echo ".concat(PAGE.formData.zoo, " is required")
-          });
-        });
-      });
-      describe('when the form data is fully valid', function () {
-        var DATA = {
-          alpha: 'alpha.smith@digital.homeoffice.gov.uk',
-          bravo: 'bravo.jones@digital.homeoffice.gov.uk'
-        };
-        it('should return no errors when none of the components are required or email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-        it('should return no errors when all of the components are required but not email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-        it('should return no errors when none of the components are required but are all email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-        it('should return no errors when all of the components are required and email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-      });
-      describe('when the form data has one field missing and includes an invalid email', function () {
-        var DATA = {
-          alpha: 'alpha.smith@digital.homeoffice.gov.uk',
-          bravo: 'bravo.jones@hotmail.com'
-        };
-        it('should return no errors when none of the components are required or email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: null
-          };
-          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
-        });
-        it('should return an error for the missing field when all are required but not email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(1);
-          expect(RESULT[0]).toEqual({
-            id: 'charlie',
-            error: 'Charlie is required'
-          });
-        });
-        it('should return an error for the invalid email field when none are required but all email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(1);
-          expect(RESULT[0]).toEqual({
-            id: 'bravo',
-            error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
-          });
-        });
-        it('should return an error for both invalid fields when all are required and email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: DATA
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(2);
-          expect(RESULT[0]).toEqual({
-            id: 'bravo',
-            error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
-          });
-          expect(RESULT[1]).toEqual({
-            id: 'charlie',
-            error: 'Charlie is required'
-          });
-        });
-        it('should return an interpolated error for both invalid fields when all are required and email types', function () {
-          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
-          setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie ${panther}', true)];
-          var PAGE = {
-            components: COMPONENTS,
-            formData: _objectSpread(_objectSpread({}, DATA), {}, {
-              lion: 'Lion',
-              panther: 'Panther'
-            })
-          };
-          var RESULT = (0, _validatePage.default)(PAGE);
-          expect(RESULT.length).toEqual(2);
-          expect(RESULT[0]).toEqual({
-            id: 'bravo',
-            error: "Enter bravo ".concat(PAGE.formData.lion, " in the correct format, like jane.doe@homeoffice.gov.uk")
-          });
-          expect(RESULT[1]).toEqual({
-            id: 'charlie',
-            error: "Charlie ".concat(PAGE.formData.panther, " is required")
-          });
+      it('should return an error for the missing field when all are required but not email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(1);
+        expect(RESULT[0]).toEqual({
+          id: 'charlie',
+          error: 'Charlie is required'
+        });
+      });
+      it('should return an error for the invalid email field when none are required but all email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(1);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
+        });
+      });
+      it('should return an error for both invalid fields when all are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: DATA
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(2);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: 'Enter bravo in the correct format, like jane.doe@homeoffice.gov.uk'
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'charlie',
+          error: 'Charlie is required'
+        });
+      });
+      it('should return an interpolated error for both invalid fields when all are required and email types', function () {
+        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+        setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie ${panther}', true)];
+        var PAGE = {
+          collection: COLLECTION,
+          components: COMPONENTS,
+          formData: _objectSpread(_objectSpread({}, DATA), {}, _defineProperty({}, COLLECTION.name, [_objectSpread(_objectSpread({}, DATA[COLLECTION.name][0]), {}, {
+            lion: 'Lion',
+            panther: 'Panther'
+          })]))
+        };
+        var RESULT = (0, _validatePage.default)(PAGE);
+        expect(RESULT.length).toEqual(2);
+        expect(RESULT[0]).toEqual({
+          id: 'bravo',
+          error: "Enter bravo ".concat(PAGE.formData[COLLECTION.name][0].lion, " in the correct format, like jane.doe@homeoffice.gov.uk")
+        });
+        expect(RESULT[1]).toEqual({
+          id: 'charlie',
+          error: "Charlie ".concat(PAGE.formData[COLLECTION.name][0].panther, " is required")
         });
       });
     });

package/dist/utils/index.js

@@ -11,6 +11,8 @@ var _CheckYourAnswers = _interopRequireDefault(require("./CheckYourAnswers"));
 
 var _Component = _interopRequireDefault(require("./Component"));
 
+var _CollectionPage = _interopRequireDefault(require("./CollectionPage"));
+
 var _Condition = _interopRequireDefault(require("./Condition"));
 
 var _Container = _interopRequireDefault(require("./Container"));
@@ -37,6 +39,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var Utils = _objectSpread({
   CheckYourAnswers: _CheckYourAnswers.default,
+  CollectionPage: _CollectionPage.default,
   Component: _Component.default,
   Condition: _Condition.default,
   Container: _Container.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.26.3",
+  "version": "3.32.0",
   "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": "1.13.4",
+    "@ukhomeoffice/cop-react-components": "1.14.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",