@planning-inspectorate/dynamic-forms 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
@@ -9,7 +9,7 @@
     "url": "git+https://github.com/Planning-Inspectorate/dynamic-forms.git"
   },
   "scripts": {
-    "commitlint": "commitlint --from=$(git cherry origin/main | head -n 1 | cut -c 3-)",
+    "commitlint": "commitlint --from=$(git rev-parse $(git cherry origin/main | head -n 1 | cut -c 3-)^1)",
     "lint": "npx eslint .",
     "format": "prettier --write .",
     "format-check": "prettier --check .",

package/src/validator/address-validator.js

@@ -21,8 +21,8 @@ export const townCityMaxLength = 250;
 export const townCityMinLength = 0;
 export const countyMaxLength = 250;
 export const countyMinLength = 0;
-export const postcodeMaxLength = 10;
-export const postcodeMinLength = 1;
+export const postcodeMaxLength = 7;
+export const postcodeMinLength = 5;
 
 /**
  * enforces address fields are within allowed parameters
@@ -66,7 +66,7 @@ export default class AddressValidator extends BaseValidator {
 		if (!this.requiredFields?.addressLine1) {
 			validator.optional({ checkFalsy: true });
 		} else {
-			validator.notEmpty().withMessage(`Enter an address line 1`);
+			validator.notEmpty().withMessage(`Enter address line 1, typically the building and street`);
 		}
 
 		return validator
@@ -143,7 +143,7 @@ export default class AddressValidator extends BaseValidator {
 		return validator
 			.isLength({ min: postcodeMinLength, max: postcodeMaxLength })
 			.bail()
-			.withMessage(`Postcode must be less than ${postcodeMaxLength} characters`)
+			.withMessage(`Postcode must be between ${postcodeMinLength} and ${postcodeMaxLength} characters`)
 			.custom((postcode) => {
 				return validatePostcode(postcode);
 			});

package/src/validator/address-validator.test.js

@@ -6,6 +6,7 @@ import AddressValidator, {
 	addressLine1MaxLength,
 	addressLine2MaxLength,
 	postcodeMaxLength,
+	postcodeMinLength,
 	townCityMaxLength
 } from './address-validator.js';
 
@@ -74,7 +75,7 @@ describe('AddressValidator', () => {
 		const errors = await _validationMappedErrors(req, question);
 
 		assert.strictEqual(Object.keys(errors).length, 5);
-		assert.strictEqual(errors.testField_addressLine1.msg, 'Enter an address line 1');
+		assert.strictEqual(errors.testField_addressLine1.msg, 'Enter address line 1, typically the building and street');
 		assert.strictEqual(errors.testField_addressLine2.msg, 'Enter an address line 2');
 		assert.strictEqual(errors.testField_townCity.msg, 'Enter a town or city');
 		assert.strictEqual(errors.testField_county.msg, 'Enter a county');
@@ -107,7 +108,10 @@ describe('AddressValidator', () => {
 			`Address line 2 must be ${addressLine2MaxLength} characters or less`
 		);
 		assert.strictEqual(errors.testField_townCity.msg, `Town or city must be ${townCityMaxLength} characters or less`);
-		assert.strictEqual(errors.testField_postcode.msg, `Postcode must be less than ${postcodeMaxLength} characters`);
+		assert.strictEqual(
+			errors.testField_postcode.msg,
+			`Postcode must be between ${postcodeMinLength} and ${postcodeMaxLength} characters`
+		);
 	});
 });
 

package/src/validator/coordinates-validator.js

@@ -24,22 +24,22 @@ export default class CoordinatesValidator extends BaseValidator {
 			body(this.northing.fieldName)
 				.optional({ checkFalsy: true })
 				.isNumeric()
-				.withMessage(`Please a numeric value for the Grid reference ${this.northing.title}`)
+				.withMessage(`The ${this.northing.title} grid reference must be a number`)
 				.isLength({ min: requiredCoordinateLength, max: requiredCoordinateLength })
-				.withMessage(`Enter ${requiredCoordinateLength} digits for the Grid reference ${this.northing.title}`),
+				.withMessage(`The ${this.northing.title} grid reference must contain ${requiredCoordinateLength} digits`),
 
 			body(this.easting.fieldName)
 				.optional({ checkFalsy: true })
 				.isNumeric()
-				.withMessage(`Please a numeric value for the Grid reference ${this.easting.title}`)
+				.withMessage(`The ${this.easting.title} grid reference must be a number`)
 				.isLength({ min: requiredCoordinateLength, max: requiredCoordinateLength })
-				.withMessage(`Enter ${requiredCoordinateLength} digits for the Grid reference ${this.easting.title}`),
+				.withMessage(`The ${this.easting.title} grid reference must contain ${requiredCoordinateLength} digits`),
 
 			// validate northing has been populated if value for easting provided
 			body(this.northing.fieldName).custom((_, { req }) => {
 				const { siteNorthing, siteEasting } = req.body;
 				if (!siteNorthing && siteEasting) {
-					throw new Error(`Enter 6 digits for the Grid reference ${this.northing.title}`);
+					throw new Error(`The ${this.northing.title} grid reference must contain 6 digits`);
 				}
 				return true;
 			}),
@@ -48,7 +48,7 @@ export default class CoordinatesValidator extends BaseValidator {
 			body(this.easting.fieldName).custom((_, { req }) => {
 				const { siteNorthing, siteEasting } = req.body;
 				if (siteNorthing && !siteEasting) {
-					throw new Error(`Enter 6 digits for the Grid reference ${this.easting.title}`);
+					throw new Error(`The ${this.easting.title} grid reference must contain 6 digits`);
 				}
 				return true;
 			})

package/src/validator/coordinates-validator.test.js

@@ -30,13 +30,9 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const coordinatesValidator = new CoordinatesValidator(northing, easting);
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(
-			errors[northing.fieldName].msg,
-			`Please a numeric value for the Grid reference ${northing.title}`
-		);
-		assert.strictEqual(errors[easting.fieldName].msg, `Please a numeric value for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must be a number`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must be a number`);
 	});
-
 	it('should return an error message if coordinates are not the required length', async () => {
 		const req = {
 			body: {
@@ -49,8 +45,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if northing is populated but easting is not', async () => {
@@ -65,7 +61,7 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 1);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if easting is populated but northing is not', async () => {
@@ -80,7 +76,7 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 1);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if northing is populated but not required length and easting is not populated', async () => {
@@ -95,8 +91,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 
 	it('should return an error message if easting is populated but not required length and northing is not populated', async () => {
@@ -111,8 +107,8 @@ describe('./src/dynamic-forms/validator/coordinates-validator.js', () => {
 		const errors = await _validationMappedErrors(req, coordinatesValidator);
 
 		assert.strictEqual(Object.keys(errors).length, 2);
-		assert.strictEqual(errors[northing.fieldName].msg, `Enter 6 digits for the Grid reference ${northing.title}`);
-		assert.strictEqual(errors[easting.fieldName].msg, `Enter 6 digits for the Grid reference ${easting.title}`);
+		assert.strictEqual(errors[northing.fieldName].msg, `The ${northing.title} grid reference must contain 6 digits`);
+		assert.strictEqual(errors[easting.fieldName].msg, `The ${easting.title} grid reference must contain 6 digits`);
 	});
 });
 

package/src/validator/date-validator.js

@@ -184,8 +184,8 @@ export default class DateValidator extends BaseValidator {
 			noDayMonthErrorMessage: `${capitalisedInputLabel} must include a day and month`,
 			noDayYearErrorMessage: `${capitalisedInputLabel} must include a day and year`,
 			noMonthYearErrorMessage: `${capitalisedInputLabel} must include a month and year`,
-			invalidDateErrorMessage: `${capitalisedInputLabel} must be a real date`,
-			invalidMonthErrorMessage: `${capitalisedInputLabel} month must be a real month`,
+			invalidDateErrorMessage: `${capitalisedInputLabel} day must be a real day`,
+			invalidMonthErrorMessage: `${capitalisedInputLabel} month must be between 1 and 12`,
 			invalidYearErrorMessage: `${capitalisedInputLabel} year must include 4 numbers`,
 			futureDateErrorMessage: `${capitalisedInputLabel} must be today or in the past`,
 			pastDateErrorMessage: `${capitalisedInputLabel} must be today or in the future`

package/src/validator/date-validator.test.js

@@ -196,7 +196,7 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 1);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
 		});
 
 		it('throws error if invalid month provided', async () => {
@@ -215,7 +215,7 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 1);
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 		});
 
 		it('throws error if invalid year provided', async () => {
@@ -336,8 +336,8 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 3);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 			assert.strictEqual(errors[`${question.fieldName}_year`].msg, 'The required date year must include 4 numbers');
 		});
 
@@ -357,8 +357,8 @@ describe('./src/dynamic-forms/validator/date-validator.js', () => {
 			const errors = await _validationMappedErrors(req, question, 'the required date');
 
 			assert.strictEqual(Object.keys(errors).length, 3);
-			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date must be a real date');
-			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be a real month');
+			assert.strictEqual(errors[`${question.fieldName}_day`].msg, 'The required date day must be a real day');
+			assert.strictEqual(errors[`${question.fieldName}_month`].msg, 'The required date month must be between 1 and 12');
 			assert.strictEqual(errors[`${question.fieldName}_year`].msg, 'The required date year must include 4 numbers');
 		});
 

package/test/snapshots/add-insurance.html

@@ -3,26 +3,26 @@
             <form action="" method="post" novalidate>
                     <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        Do you want to add travel insurance to your holiday?
-      </h1>
-    </legend>
-    <div class="govuk-radios govuk-radios" data-module="govuk-radios">
-      <div class="govuk-radios__item">
-        <input class="govuk-radios__input" id="addInsurance" name="addInsurance" type="radio" value="yes" data-cy="answer-yes">
-        <label class="govuk-label govuk-radios__label" for="addInsurance">
-          Yes
-        </label>
-      </div>
-      <div class="govuk-radios__item">
-        <input class="govuk-radios__input" id="addInsurance-2" name="addInsurance" type="radio" value="no" data-cy="answer-no">
-        <label class="govuk-label govuk-radios__label" for="addInsurance-2">
-          No
-        </label>
-      </div>
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Do you want to add travel insurance to your holiday?
+    </h1>
+  </legend>
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="addInsurance" name="addInsurance" type="radio" value="yes" data-cy="answer-yes">
+      <label class="govuk-label govuk-radios__label" for="addInsurance">
+        Yes
+      </label>
     </div>
-  </fieldset>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="addInsurance-2" name="addInsurance" type="radio" value="no" data-cy="answer-no">
+      <label class="govuk-label govuk-radios__label" for="addInsurance-2">
+        No
+      </label>
+    </div>
+  </div>
+</fieldset>
 </div>
 
 

package/test/snapshots/holiday-activities.html

@@ -3,32 +3,32 @@
             <form action="" method="post" novalidate>
                 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        Which activities do you want to do on holiday?
-      </h1>
-    </legend>
-    <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
-      <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="holidayActivities" name="holidayActivities" type="checkbox" value="swimming" data-cy="answer-swimming">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities">
-          Swimming
-        </label>
-      </div>
-      <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="holidayActivities-2" name="holidayActivities" type="checkbox" value="hiking" data-cy="answer-hiking">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-2">
-          Hiking
-        </label>
-      </div>
-      <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="holidayActivities-3" name="holidayActivities" type="checkbox" value="sightseeing" data-cy="answer-sightseeing">
-        <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-3">
-          Sightseeing
-        </label>
-      </div>
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Which activities do you want to do on holiday?
+    </h1>
+  </legend>
+  <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="holidayActivities" name="holidayActivities" type="checkbox" value="swimming" data-cy="answer-swimming">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities">
+        Swimming
+      </label>
     </div>
-  </fieldset>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="holidayActivities-2" name="holidayActivities" type="checkbox" value="hiking" data-cy="answer-hiking">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-2">
+        Hiking
+      </label>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="holidayActivities-3" name="holidayActivities" type="checkbox" value="sightseeing" data-cy="answer-sightseeing">
+      <label class="govuk-label govuk-checkboxes__label" for="holidayActivities-3">
+        Sightseeing
+      </label>
+    </div>
+  </div>
+</fieldset>
 </div>
 
                 <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">