@planning-inspectorate/dynamic-forms 1.14.0 → 1.15.0

package/.prettierignore

@@ -3,4 +3,5 @@ package.json
 package-lock.json
 README.md
 *.njk
-.env*
+.env*
+test/snapshots/*

package/README.md

@@ -142,4 +142,12 @@ When contributing to this package, ensure changes are generic and not service-sp
 
 Commits must follow conventional commits, and the commit types will be used by semantic-release to determine the next version number. For example `feat` commits will result in a minor version bump, while `fix` commits will result in a patch version bump. Major version bumps should be reserved for breaking changes, and should be discussed with the R&D team before being made.
 
-The package will be released automatically using semantic-release, on merge to main. This will include a git tag for the release, and publishing to NPM.
+The package will be released automatically using semantic-release, on merge to main. This will include a git tag for the release, and publishing to NPM.
+
+### Tests
+
+There are some lightweight tests in the `test` directory which sets up a basic journey and checks the rendering for each question as well as redirect logic.
+
+When adding a new question type, be sure to add an example question into `test/questions.js`, and mock answers into `test/questions.test.js#mockAnswerBody` and `test/questions.test.js#mockAnswer`. Also, the question should be added to the journey in `test/journey.js`.
+
+To update any snapshots with rendering changes (or new questions), run `node --test --test-update-snapshots`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
@@ -25,13 +25,18 @@
     "nunjucks": "^3.2.4"
   },
   "imports": {
-    "#question-types": "./src/questions/question-types.d.ts"
+    "#question-types": "./src/questions/question-types.d.ts",
+    "#test/*": "./test/*"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "body-parser": "^2.2.0",
+    "cookie-parser": "^1.4.7",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
+    "express": "^5.1.0",
+    "express-session": "^1.18.2",
     "govuk-frontend": "^5.11.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",

package/src/components/address/question.js

@@ -24,7 +24,7 @@ export default class AddressQuestion extends Question {
 			viewFolder: 'address'
 		});
 
-		for (const validator of params.validators) {
+		for (const validator of params.validators || []) {
 			if (validator instanceof AddressValidator) {
 				this.requiredFields = validator.requiredFields;
 			}

package/src/components/address/question.test.js

@@ -3,7 +3,7 @@ import assert from 'node:assert';
 import AddressQuestion from './question.js';
 import { Address } from '../../lib/address.js';
 import AddressValidator from '../../validator/address-validator.js';
-import { configureNunjucks } from '../../lib/test-utils.js';
+import { configureNunjucksTestEnv } from '../../../test/utils/nunjucks.js';
 
 describe('AddressQuestion', () => {
 	const TITLE = 'What is the site address?';
@@ -132,12 +132,12 @@ describe('AddressQuestion', () => {
 			const model = await question.prepQuestionForRendering(
 				{},
 				{ getBackLink: mock.fn(), response },
-				{ layoutTemplate: 'lib/test-layout.njk' }
+				{ layoutTemplate: 'views/layout-question.njk' }
 			);
 
 			assert.strictEqual(model.question.hint, hintText);
 
-			const nunjucks = configureNunjucks();
+			const nunjucks = configureNunjucksTestEnv();
 			const mockRes = {
 				render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 			};

package/src/components/multi-field-input/index.njk

@@ -39,11 +39,11 @@
                     describedBy: question.hint and "multi-field-hint"
                 }) %}
 
-                    {% if question.hint %}
+                    {%- if question.hint -%}
                         <div id="multi-field-hint" class="govuk-hint">
                             {{ question.hint }}
                         </div>
-                    {% endif %}
+                    {%- endif %}
 
                     {% if question.description %}
                         <p class="govuk-body">

package/src/components/multi-field-input/question.js

@@ -88,7 +88,11 @@ export default class MultiFieldInputQuestion extends Question {
 		let responseToSave = { answers: {} };
 
 		for (const inputField of this.inputFields) {
-			responseToSave.answers[inputField.fieldName] = req.body[inputField.fieldName]?.trim();
+			let value = req.body[inputField.fieldName];
+			if (typeof value === 'string') {
+				value = value.trim();
+			}
+			responseToSave.answers[inputField.fieldName] = value;
 			journeyResponse.answers[inputField.fieldName] = responseToSave.answers[inputField.fieldName];
 		}
 

package/src/components/radio/index.njk

@@ -39,7 +39,7 @@
                         classes: "govuk-radios",
                         idPrefix: question.fieldName,
                         name: question.fieldName,
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
@@ -72,7 +72,7 @@
                             classes: "govuk-radios",
                             idPrefix: question.fieldName,
                             name: question.fieldName,
-                            hint: { text: question.hint },
+                            hint: question.hint and { text: question.hint },
                             errorMessage: errors[question.fieldName] and {
                                 text: errors[question.fieldName].msg
                             },

package/src/components/select/index.njk

@@ -84,10 +84,10 @@
                     let input = document.querySelector('#{{ question.fieldName }}');
                     let select = document.querySelector('#{{ question.fieldName }}-select');
                     let options = Array.from(select.options);
-                    if (!input.value || !options.some(option => option.value === input.value)) {
+                    if (!input.value || !options.some(option => option.innerText === input.value)) {
                         select.options.selectedIndex = -1;
                     } else {
-                        select.options.selectedIndex = options.findIndex(option => option.value === input.value);
+                        select.options.selectedIndex = options.findIndex(option => option.innerText === input.value);
                     }
                 }
             })

package/src/components/text-entry-redact/question.test.js

@@ -1,7 +1,7 @@
 import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
 import TextEntryRedactQuestion from './question.js';
-import { configureNunjucks } from '../../lib/test-utils.js';
+import { configureNunjucksTestEnv } from '../../../test/utils/nunjucks.js';
 
 describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 	const TITLE = 'title';
@@ -55,7 +55,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'lib/test-layout.njk',
+			layoutTemplate: 'views/layout-question.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -63,7 +63,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				valueRedacted: 'value-redacted'
 			}
 		};
-		const nunjucks = configureNunjucks();
+		const nunjucks = configureNunjucksTestEnv();
 		const mockRes = {
 			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 		};
@@ -94,7 +94,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'lib/test-layout.njk',
+			layoutTemplate: 'views/layout-question.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -102,7 +102,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				valueRedacted: 'value-redacted'
 			}
 		};
-		const nunjucks = configureNunjucks();
+		const nunjucks = configureNunjucksTestEnv();
 		const mockRes = {
 			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 		};
@@ -134,7 +134,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'lib/test-layout.njk',
+			layoutTemplate: 'views/layout-question.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -147,7 +147,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				{ category: 'Address', suggestion: '123 Fake Street' }
 			]
 		};
-		const nunjucks = configureNunjucks();
+		const nunjucks = configureNunjucksTestEnv();
 		const mockRes = {
 			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 		};
@@ -181,7 +181,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			layoutTemplate: 'lib/test-layout.njk',
+			layoutTemplate: 'views/layout-question.njk',
 			question: {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
@@ -193,7 +193,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				{ category: 'Address', suggestion: '123 Fake Street' }
 			]
 		};
-		const nunjucks = configureNunjucks();
+		const nunjucks = configureNunjucksTestEnv();
 		const mockRes = {
 			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 		};

package/src/controller.test.js

@@ -4,7 +4,8 @@ import { list, question, buildSave } from './controller.js';
 
 import { Journey } from './journey/journey.js';
 import { SECTION_STATUS } from './section.js';
-import { mockReq, mockRes } from './lib/test-utils.js';
+
+import { mockReq, mockRes } from '#test/utils/utils.js';
 
 const res = mockRes();
 const mockBaseUrl = '/manage-appeals/questionnaire';

package/src/index.js

@@ -1,3 +1,10 @@
+/**
+ * @typedef {import('./questions/question-props.js').QuestionTypes} QuestionTypes
+ */
+
+/**
+ * @type {Readonly<{CHECKBOX: QuestionTypes, BOOLEAN: QuestionTypes, RADIO: QuestionTypes, DATE: QuestionTypes, DATE_PERIOD: QuestionTypes, TEXT_ENTRY: QuestionTypes, TEXT_ENTRY_REDACT: QuestionTypes, SELECT: QuestionTypes, SINGLE_LINE_INPUT: QuestionTypes, MULTI_FIELD_INPUT: QuestionTypes, NUMBER: QuestionTypes, ADDRESS: QuestionTypes, UNIT_OPTION: QuestionTypes}>}
+ */
 export const COMPONENT_TYPES = Object.freeze({
 	CHECKBOX: 'checkbox',
 	BOOLEAN: 'boolean',
@@ -12,6 +19,5 @@ export const COMPONENT_TYPES = Object.freeze({
 	MULTI_FIELD_INPUT: 'multi-field-input',
 	NUMBER: 'number',
 	ADDRESS: 'site-address',
-	UNIT_OPTION: 'unit-option',
-	LIST_ADD_MORE: 'list-add-more'
+	UNIT_OPTION: 'unit-option'
 });

package/src/lib/session-answer-store.test.js

@@ -5,8 +5,8 @@ import {
 	clearDataFromSession,
 	buildSaveDataToSession
 } from './session-answer-store.js';
-import { mockReq, mockRes } from './test-utils.js';
 import { BOOLEAN_OPTIONS } from '../components/boolean/question.js';
+import { mockReq, mockRes } from '#test/utils/utils.js';
 
 describe('session-answer-store', () => {
 	describe('saveDataToSession', () => {

package/src/questions/question-props.d.ts

@@ -8,18 +8,15 @@ type QuestionTypes =
 	| 'boolean'
 	| 'radio'
 	| 'date'
+	| 'date-period'
 	| 'text-entry'
+	| 'text-entry-redact'
+	| 'select'
 	| 'single-line-input'
 	| 'multi-field-input'
 	| 'number'
 	| 'site-address'
-	| 'unit-option'
-	| 'list-add-more'
-	// strictly for add more sub question type
-	// todo refactor list add mores so there's no sub question
-	| 'case'
-	| 'address'
-	| 'listed-building';
+	| 'unit-option';
 
 interface CommonQuestionProps {
 	type: QuestionTypes;
@@ -155,21 +152,6 @@ type UnitOptionEntryQuestionProps = CommonQuestionProps & {
 	label?: string;
 };
 
-export type SubQuestionProps = CommonQuestionProps & {
-	type: 'case' | 'address' | 'listed-building';
-	viewFolder: string;
-};
-
-type ListAddMoreQuestionProps = CommonQuestionProps & {
-	type: 'list-add-more';
-	subQuestionProps: SubQuestionProps;
-	subQuestionLabel?: string;
-	subQuestionTitle?: string;
-	subQuestionFieldLabel?: string;
-	subQuestionInputClasses?: string;
-	width?: string;
-};
-
 export type QuestionProps =
 	| CheckboxQuestionProps
 	| MultiFileUploadQuestionProps
@@ -181,5 +163,4 @@ export type QuestionProps =
 	| MultiFieldInputQuestionProps
 	| NumberEntryQuestionProps
 	| SiteAddressQuestionProps
-	| UnitOptionEntryQuestionProps
-	| ListAddMoreQuestionProps;
+	| UnitOptionEntryQuestionProps;

package/src/questions/question.test.js

@@ -1,7 +1,7 @@
 import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
-import { mockRes } from '../lib/test-utils.js';
 import { Question } from './question.js';
+import { mockRes } from '../../test/utils/utils.js';
 
 const res = mockRes();
 

package/src/section.js

@@ -80,6 +80,9 @@ export class Section {
 	 * @returns {Section}
 	 */
 	addQuestion(question) {
+		if (!question) {
+			throw new Error('question is required');
+		}
 		this.questions.push(question);
 		this.#conditionAdded = false; // reset condition flag
 		this.#applyConditions(question);

package/src/validator/validator.js

@@ -12,7 +12,10 @@ const validate = async (req, res, next) => {
 	}
 	if (req.body && typeof req.body === 'object' && req.body.constructor === Object) {
 		for (const key of Object.keys(req.body)) {
-			req.body[key] = req.body[key].trim();
+			if (typeof req.body[key] === 'string') {
+				// Trim whitespace from string values in req.body
+				req.body[key] = req.body[key].trim();
+			}
 		}
 	} else {
 		throw new Error(`req.body is not an object: ${req.body} :: ${typeof req.body}`);

package/test/check-your-answers.test.js

@@ -0,0 +1,69 @@
+import { describe, it } from 'node:test';
+import assert from 'assert';
+import { questionsInOrder } from './questions.js';
+import path from 'path';
+import { escapeForRegExp, snapshotsDir } from './utils/utils.js';
+import { createAppWithQuestions, mockAnswer, mockAnswerBody } from './questions.test.js';
+
+describe('check-your-answers', () => {
+	it(`should render all question rows with no answers`, async (ctx) => {
+		const testServer = await createAppWithQuestions(ctx);
+
+		const response = await testServer.get('/check-your-answers');
+		assert.strictEqual(response.status, 200);
+		const text = await response.text();
+		const rows = text.split('<div class="govuk-summary-list__row">').slice(1); // Skip the first split part which is before the first row
+
+		assert.strictEqual(rows.length, questionsInOrder.length, 'Expected one row per question');
+
+		for (let i = 0; i < questionsInOrder.length; i++) {
+			const q = questionsInOrder[i];
+			const row = rows[i];
+
+			const escapedTitle = escapeForRegExp(q.title);
+			const escapedQ = escapeForRegExp(q.question);
+			assert.match(row, new RegExp(`<dt[^>]*>\\s*${escapedTitle}\\s*</dt>`, 'i'));
+			assert.match(row, new RegExp(`<dd[^>]*>\\s*Not started\\s*</dd>`, 'i'));
+			assert.match(
+				row,
+				new RegExp(`<a[^>]* href="questions/${q.url}">\\s*Answer\\s*<span[^>]*>\\s*${escapedQ}\\s*</span></a>`, 'i')
+			);
+		}
+		ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), 'check-your-answers-not-started.html'), {
+			serializers: [(v) => v]
+		});
+	});
+
+	it(`should render all question answers`, async (ctx) => {
+		const testServer = await createAppWithQuestions(ctx);
+
+		// 'answer' each question
+		for (const q of questionsInOrder) {
+			await testServer.post(`/questions/${q.url}`, mockAnswerBody(q), { redirect: 'manual' });
+		}
+
+		const response = await testServer.get('/check-your-answers');
+		assert.strictEqual(response.status, 200);
+		const text = await response.text();
+		const rows = text.split('<div class="govuk-summary-list__row">').slice(1); // Skip the first split part which is before the first row
+
+		assert.strictEqual(rows.length, questionsInOrder.length, 'Expected one row per question');
+
+		for (let i = 0; i < questionsInOrder.length; i++) {
+			const q = questionsInOrder[i];
+			const row = rows[i];
+
+			const escapedTitle = escapeForRegExp(q.title);
+			const escapedQ = escapeForRegExp(q.question);
+			assert.match(row, new RegExp(`<dt[^>]*>\\s*${escapedTitle}\\s*</dt>`, 'i'));
+			assert.match(row, new RegExp(`<dd[^>]*>\\s*${mockAnswer(q)}\\s*</dd>`, 'i'));
+			assert.match(
+				row,
+				new RegExp(`<a[^>]* href="questions/${q.url}">\\s*Change\\s*<span[^>]*>\\s*${escapedQ}\\s*</span></a>`, 'i')
+			);
+		}
+		ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), 'check-your-answers-with-answers.html'), {
+			serializers: [(v) => v]
+		});
+	});
+});

package/test/journey.js

@@ -0,0 +1,41 @@
+import { Section } from '../src/section.js';
+import { Journey } from '../src/journey/journey.js';
+
+export const JOURNEY_ID = 'holiday-journey';
+
+/**
+ * @param {{[questionType: string]: import('../src/questions/question.js').Question}} questions
+ * @param {import('../src/journey/journey-response.js').JourneyResponse} response
+ * @returns {Journey}
+ */
+export function createJourney(questions, response) {
+	return new Journey({
+		journeyId: JOURNEY_ID,
+		sections: [
+			new Section('Holiday Details', 'questions')
+				.addQuestion(questions.holidayActivities)
+				.addQuestion(questions.addInsurance)
+				.addQuestion(questions.travelInsuranceType)
+				.addQuestion(questions.holidayDestination)
+				.addQuestion(questions.departureDate)
+				.addQuestion(questions.holidayPeriod)
+				.addQuestion(questions.holidayDescription)
+				.addQuestion(questions.secretWish)
+				.addQuestion(questions.travelClass)
+				.addQuestion(questions.holidayArrival)
+				.addQuestion(questions.holidaySnack)
+				.addQuestion(questions.companions)
+				.addQuestion(questions.nights)
+				.addQuestion(questions.hotelAddress)
+				.addQuestion(questions.luggageWeight)
+		],
+		taskListUrl: 'check-your-answers',
+		journeyTemplate: 'views/layout-question.njk',
+		listingPageViewPath: 'views/layout-check-your-answers.njk',
+		journeyTitle: 'Holiday Booking',
+		returnToListing: false,
+		makeBaseUrl: () => '/',
+		initialBackLink: '/holidays',
+		response
+	});
+}

package/test/journey.test.js

@@ -0,0 +1,21 @@
+import { describe, it } from 'node:test';
+import assert from 'assert';
+import { createJourney } from './journey.js';
+import { getQuestions } from './questions.js';
+
+// Mock response object (empty for this test)
+const response = {};
+
+describe('Journey', function () {
+	it('should have all questions defined on the journey', function () {
+		// Use the questions from the questions module
+		const questions = getQuestions();
+		const journey = createJourney(questions, response);
+		const journeyQuestions = journey.sections[0].questions;
+		let previousQuestion = null;
+		for (const question of journeyQuestions) {
+			assert.ok(question, `Question is not defined, after: ${previousQuestion && previousQuestion.title}`);
+			previousQuestion = question;
+		}
+	});
+});