@planning-inspectorate/dynamic-forms 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/select/index.njk

@@ -44,6 +44,9 @@
                         classes: "govuk-label--l",
                         isPageHeading: true
                     },
+                    hint: {
+                        text: question.hint
+                    },
                     errorMessage: errors[question.fieldName] and {
                         text: errors[question.fieldName].msg
                     },

package/src/validator/same-answer-validator.js

@@ -0,0 +1,32 @@
+import { body } from 'express-validator';
+import BaseValidator from './base-validator.js';
+
+/**
+ * Universal validator to ensure the answer to the current question is not the same as another question's answer
+ */
+export default class SameAnswerValidator extends BaseValidator {
+	/**
+	 * @param {string[]} fieldNamesToCompare - field name to compare against
+	 * @param {string} [errorMessage]
+	 */
+
+	constructor(fieldNamesToCompare, errorMessage) {
+		super();
+		this.fieldNamesToCompare = fieldNamesToCompare || [];
+		this.errorMessage = errorMessage || 'This answer cannot be the same as another answer';
+	}
+
+	/**
+	 * validates the questionToCompare and compares it to the answer in the journeyResponse
+	 * @param questionObj
+	 */
+	validate(questionObj) {
+		return body(questionObj.fieldName).custom((value, { req }) => {
+			const answers = req?.res?.locals?.journeyResponse?.answers || {};
+			if (this.fieldNamesToCompare.some((field) => value === answers[field])) {
+				throw new Error(this.errorMessage);
+			}
+			return true;
+		});
+	}
+}

package/src/validator/same-answer-validator.test.js

@@ -0,0 +1,49 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { validationResult } from 'express-validator';
+import SameAnswerValidator from './same-answer-validator.js';
+
+describe('./src/dynamic-forms/validator/same-answer-validator.js', () => {
+	it('should return an error if the answer is the same as the compared field', async () => {
+		const req = {
+			body: { questionTwo: 'Test-answer' },
+			res: {
+				locals: {
+					journeyResponse: {
+						answers: { questionOne: 'Test-answer' }
+					}
+				}
+			}
+		};
+
+		const validator = new SameAnswerValidator(['questionOne'], 'Answers must be different');
+		const middleware = validator.validate({ fieldName: 'questionTwo' });
+
+		await middleware(req, {}, () => {});
+		const result = validationResult(req);
+
+		assert.strictEqual(result.isEmpty(), false);
+		assert.strictEqual(result.array()[0].msg, 'Answers must be different');
+	});
+	it('should continue if the answer is different to the compared field', async () => {
+		const req = {
+			body: { questionTwo: 'Test-answer' },
+			res: {
+				locals: {
+					journeyResponse: {
+						answers: { questionOne: 'Test-answer-different' }
+					}
+				}
+			}
+		};
+
+		const validator = new SameAnswerValidator(['questionOne'], 'Answers must be different');
+		const middleware = validator.validate({ fieldName: 'questionTwo' });
+
+		await middleware(req, {}, () => {});
+		const result = validationResult(req);
+
+		assert.strictEqual(result.isEmpty(), true);
+		assert.strictEqual(result.array().length, 0);
+	});
+});

package/test/snapshots/travel-class.html

@@ -16,7 +16,10 @@
       Which class do you want to travel in?
     </label>
   </h1>
-  <select class="govuk-select" id="travelClass" name="travelClass">
+  <div id="travelClass-hint" class="govuk-hint">
+    
+  </div>
+  <select class="govuk-select" id="travelClass" name="travelClass" aria-describedby="travelClass-hint">
     <option value="economy" data-cy="answer-economy">Economy</option>
     <option value="business" data-cy="answer-business">Business</option>
     <option value="first" data-cy="answer-first">First Class</option>