@ukhomeoffice/cop-react-form-renderer 6.0.6-peter → 6.7.0-alpha

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

@@ -3,55 +3,49 @@
 var _models = require("../../models");
 var _validatePage = _interopRequireDefault(require("./validatePage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); } // Local imports
-describe('utils.Validate.Page', function () {
-  var setup = function setup(id, type, label, required) {
-    return {
-      id: id,
-      fieldId: id,
-      type: type,
-      label: label,
-      required: required
-    };
-  };
-  describe('with FormPage', function () {
-    it('should return no error when the components array is null', function () {
-      var PAGE = {
+// Local imports
+
+describe('utils.Validate.Page', () => {
+  const setup = (id, type, label, required) => ({
+    id,
+    fieldId: id,
+    type,
+    label,
+    required
+  });
+  describe('with FormPage', () => {
+    it('should return no error when the components array is null', () => {
+      const 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 = {
+    it('should return no error when the components array is empty', () => {
+      const 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 = {
+    describe('when there is no form data', () => {
+      it('should return no errors when no components are required', () => {
+        const COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', false), setup('b', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        const 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),
+      it('should return an error for each required component', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           formData: null
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(4);
         expect(RESULT[0]).toEqual({
           id: 'a',
@@ -70,18 +64,18 @@ describe('utils.Validate.Page', function () {
           error: 'Echo is required'
         });
       });
-      it('should return an error for each required component on a collection page', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return an error for each required component on a collection page', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'testCollection'
           },
           formData: null
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(4);
         expect(RESULT[0]).toEqual({
           id: 'a',
@@ -100,18 +94,18 @@ describe('utils.Validate.Page', function () {
           error: 'Echo is required'
         });
       });
-      it('should return an error for each required component on a nested collection page', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return an error for each required component on a nested collection page', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'parent.child'
           },
           formData: null
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(4);
         expect(RESULT).toEqual([{
           id: 'a',
@@ -127,8 +121,8 @@ describe('utils.Validate.Page', function () {
           error: 'Echo is required'
         }]);
       });
-      it('should return an error for each required component with interpolated label', function () {
-        var COMPONENTS = [
+      it('should return an error for each required component with interpolated label', () => {
+        const 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
@@ -139,7 +133,7 @@ describe('utils.Validate.Page', function () {
         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 = {
+        const PAGE = {
           components: COMPONENTS,
           formData: {
             tiger: 'Tiger',
@@ -149,7 +143,7 @@ describe('utils.Validate.Page', function () {
             zoo: 'Zoo'
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(5);
         expect(RESULT).toEqual([{
           id: 'a',
@@ -169,90 +163,90 @@ describe('utils.Validate.Page', function () {
         }]);
       });
     });
-    describe('when the form data is fully valid', function () {
-      var DATA = {
+    describe('when the form data is fully valid', () => {
+      const 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 = {
+      it('should return no errors when none of the components are required or email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        const 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 = {
+      it('should return no errors when all of the components are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
+        const 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 = {
+      it('should return no errors when none of the components are required but are all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
+        const 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 = {
+      it('should return no errors when all of the components are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
+        const 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 = {
+    describe('when the form data has one field missing and includes an invalid email', () => {
+      const 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 = {
+      it('should return no errors when none of the components are required or email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
+        const 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 = {
+      it('should return an error for the missing field when all are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
+        const PAGE = {
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for the invalid email field when none are required but all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
+        const PAGE = {
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for both invalid fields when all are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
+        const PAGE = {
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -263,20 +257,21 @@ describe('utils.Validate.Page', function () {
           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),
+      it('should return an interpolated error for both invalid fields when all are required and email types', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
-          formData: _objectSpread(_objectSpread({}, DATA), {}, {
+          formData: {
+            ...DATA,
             lion: 'Lion',
             panther: 'Panther'
-          })
+          }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -289,58 +284,60 @@ describe('utils.Validate.Page', function () {
       });
     });
   });
-  describe('with CollectionPage', function () {
-    var COLLECTION = {
+  describe('with CollectionPage', () => {
+    const COLLECTION = {
       name: 'pageCollection'
     };
-    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 = {
+    describe('when the form data is fully valid', () => {
+      const DATA = {
+        ["".concat(COLLECTION.name, "ActiveId")]: '01',
+        [COLLECTION.name]: [{
+          id: '01',
+          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', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        const 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 = {
+      it('should return no errors when all of the components are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
+        const 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 = {
+      it('should return no errors when none of the components are required but are all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
+        const 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 and email types', function () {
-        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
-        var PAGE = {
+      it('should return no errors when all of the components are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
         expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
-      it('should return an error for each required component on a collection page with a show_when that is true', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return an error for each required component on a collection page with a show_when that is true', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'testCollection'
@@ -358,7 +355,7 @@ describe('utils.Validate.Page', function () {
             }]
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(4);
         expect(RESULT).toEqual([{
           id: 'a',
@@ -374,11 +371,11 @@ describe('utils.Validate.Page', function () {
           error: 'Echo is required'
         }]);
       });
-      it('should return no errors on a collection page with a show_when that is false', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return no errors on a collection page with a show_when that is false', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'testCollection'
@@ -396,62 +393,64 @@ describe('utils.Validate.Page', function () {
             }]
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.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 = {
+    describe('when the form data has one field missing and includes an invalid email', () => {
+      const DATA = {
+        ["".concat(COLLECTION.name, "ActiveId")]: '01',
+        [COLLECTION.name]: [{
+          id: '01',
+          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', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
+        const PAGE = {
           collection: COLLECTION,
           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 = {
+      it('should return an error for the missing field when all are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for the invalid email field when none are required but all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for both invalid fields when all are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -462,21 +461,25 @@ describe('utils.Validate.Page', function () {
           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),
+      it('should return an interpolated error for both invalid fields when all are required and email types', () => {
+        const 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 = {
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
-          formData: _objectSpread(_objectSpread({}, DATA), {}, _defineProperty({}, COLLECTION.name, [_objectSpread(_objectSpread({}, DATA[COLLECTION.name][0]), {}, {
-            lion: 'Lion',
-            panther: 'Panther'
-          })]))
+          formData: {
+            ...DATA,
+            [COLLECTION.name]: [{
+              ...DATA[COLLECTION.name][0],
+              lion: 'Lion',
+              panther: 'Panther'
+            }]
+          }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -489,12 +492,12 @@ describe('utils.Validate.Page', function () {
       });
     });
   });
-  describe('with a nested CollectionPage', function () {
-    var COLLECTION = {
+  describe('with a nested CollectionPage', () => {
+    const COLLECTION = {
       name: 'parent.child'
     };
-    describe('when the form data is fully valid', function () {
-      var DATA = {
+    describe('when the form data is fully valid', () => {
+      const DATA = {
         parentActiveId: '01',
         childActiveId: '01',
         parent: [{
@@ -506,47 +509,47 @@ describe('utils.Validate.Page', function () {
           }]
         }]
       };
-      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 = {
+      it('should return no errors when none of the components are required or email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
+        const 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 = {
+      it('should return no errors when all of the components are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
+        const 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 = {
+      it('should return no errors when none of the components are required but are all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
+        const 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 and email types', function () {
-        var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
-        var PAGE = {
+      it('should return no errors when all of the components are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
         expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
-      it('should return an error for each required component on a collection page with a show_when that is true', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return an error for each required component on a collection page with a show_when that is true', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'parent.child'
@@ -568,7 +571,7 @@ describe('utils.Validate.Page', function () {
             }]
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(4);
         expect(RESULT).toEqual([{
           id: 'a',
@@ -584,11 +587,11 @@ describe('utils.Validate.Page', function () {
           error: 'Echo is required'
         }]);
       });
-      it('should return no errors on a collection page with a show_when that is false', function () {
-        var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false),
+      it('should return no errors on a collection page with a show_when that is false', () => {
+        const 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 = {
+        const PAGE = {
           components: COMPONENTS,
           collection: {
             name: 'parent.child'
@@ -610,12 +613,12 @@ describe('utils.Validate.Page', function () {
             }]
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(0);
       });
     });
-    describe('when the form data has one field missing and includes an invalid email', function () {
-      var DATA = {
+    describe('when the form data has one field missing and includes an invalid email', () => {
+      const DATA = {
         parentActiveId: '01',
         childActiveId: '01',
         parent: [{
@@ -627,51 +630,51 @@ describe('utils.Validate.Page', function () {
           }]
         }]
       };
-      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 = {
+      it('should return no errors when none of the components are required or email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
+        const PAGE = {
           collection: COLLECTION,
           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 = {
+      it('should return an error for the missing field when all are required but not email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for the invalid email field when none are required but all email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const 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 = {
+      it('should return an error for both invalid fields when all are required and email types', () => {
+        const COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: DATA
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -682,13 +685,13 @@ describe('utils.Validate.Page', function () {
           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),
+      it('should return an interpolated error for both invalid fields when all are required and email types', () => {
+        const 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 = {
+        const PAGE = {
           collection: COLLECTION,
           components: COMPONENTS,
           formData: {
@@ -706,7 +709,7 @@ describe('utils.Validate.Page', function () {
             }]
           }
         };
-        var RESULT = (0, _validatePage.default)(PAGE);
+        const RESULT = (0, _validatePage.default)(PAGE);
         expect(RESULT.length).toEqual(2);
         expect(RESULT[0]).toEqual({
           id: 'bravo',
@@ -719,4 +722,82 @@ describe('utils.Validate.Page', function () {
       });
     });
   });
+  describe('when there are queued errors', () => {
+    it('should return any errors queued for a component as well as errors found during validation', () => {
+      const COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true)];
+      const PAGE = {
+        components: COMPONENTS,
+        formData: null
+      };
+      const QUEUED_ERRORS = [{
+        id: 'a',
+        error: 'Error queued for Alpha 1'
+      }, {
+        id: 'a',
+        error: 'Error queued for Alpha 2'
+      }];
+      const RESULT = (0, _validatePage.default)(PAGE, QUEUED_ERRORS);
+      expect(RESULT.length).toEqual(3);
+      expect(RESULT[0]).toEqual({
+        ...QUEUED_ERRORS[0]
+      });
+      expect(RESULT[1]).toEqual({
+        ...QUEUED_ERRORS[1]
+      });
+      expect(RESULT[2]).toEqual({
+        id: 'a',
+        error: 'Alpha is required'
+      });
+    });
+    it('should return any errors queued for a component even if no errors are found during validation', () => {
+      const COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true)];
+      const PAGE = {
+        components: COMPONENTS,
+        formData: {
+          a: 'Value'
+        }
+      };
+      const QUEUED_ERRORS = [{
+        id: 'a',
+        error: 'Error queued for Alpha 1'
+      }, {
+        id: 'a',
+        error: 'Error queued for Alpha 2'
+      }];
+      const RESULT = (0, _validatePage.default)(PAGE, QUEUED_ERRORS);
+      expect(RESULT.length).toEqual(2);
+      expect(RESULT[0]).toEqual({
+        ...QUEUED_ERRORS[0]
+      });
+      expect(RESULT[1]).toEqual({
+        ...QUEUED_ERRORS[1]
+      });
+    });
+    it('should return any queued errors if the component is not shown', () => {
+      const COMPONENTS = [{
+        ...setup('a', _models.ComponentTypes.TEXT, 'Alpha', true),
+        show_when: [{
+          field: 'b',
+          op: '=',
+          value: 'yes'
+        }]
+      }];
+      const PAGE = {
+        components: COMPONENTS,
+        formData: {
+          a: 'Value',
+          b: 'no'
+        }
+      };
+      const QUEUED_ERRORS = [{
+        id: 'a',
+        error: 'Error queued for Alpha 1'
+      }, {
+        id: 'a',
+        error: 'Error queued for Alpha 2'
+      }];
+      const RESULT = (0, _validatePage.default)(PAGE, QUEUED_ERRORS);
+      expect(RESULT.length).toEqual(0);
+    });
+  });
 });