@planning-inspectorate/dynamic-forms 2.3.0 → 3.0.0

package/src/section.test.js

@@ -1,6 +1,6 @@
 import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
-import { Section, SECTION_STATUS } from './section.js';
+import { END_OF_SECTION, Section, SECTION_STATUS } from './section.js';
 import RequiredValidator from './validator/required-validator.js';
 
 const mockQuestion = {
@@ -17,6 +17,13 @@ const mockQuestion2 = {
 	isAnswered: () => false
 };
 
+const mockQuestion3 = {
+	fieldName: 'mockQuestion3',
+	isRequired: () => true,
+	shouldDisplay: () => true,
+	isAnswered: () => false
+};
+
 describe('./src/dynamic-forms/section.js', () => {
 	describe('constructor', () => {
 		it('should create', () => {
@@ -46,6 +53,42 @@ describe('./src/dynamic-forms/section.js', () => {
 			assert.strictEqual(question.isRequired, mockQuestion.isRequired);
 			assert.strictEqual(question.shouldDisplay(), mockQuestion.shouldDisplay());
 		});
+
+		it('should support manage list questions', () => {
+			const section = new Section('s1', 'S');
+			assert.strictEqual(section.questions.length, 0);
+			const q = {
+				get isManageListQuestion() {
+					return true;
+				}
+			};
+			const manageListSection = {
+				get isManageListSection() {
+					return true;
+				}
+			};
+			section.addQuestion(q, manageListSection);
+			assert.strictEqual(section.questions.length, 1);
+			assert.strictEqual(q.section, manageListSection);
+		});
+
+		it('should throw if no manageListSection provided for a manage list question', () => {
+			const section = new Section('s1', 'S');
+			assert.strictEqual(section.questions.length, 0);
+			const q = {
+				get isManageListQuestion() {
+					return true;
+				}
+			};
+			assert.throws(
+				() => section.addQuestion(q),
+				(thrown) => {
+					assert.strictEqual(thrown.message, 'manage list questions require a ManageListSection');
+					return true;
+				}
+			);
+			assert.strictEqual(section.questions.length, 0);
+		});
 	});
 
 	describe('getStatus', () => {
@@ -575,4 +618,136 @@ describe('./src/dynamic-forms/section.js', () => {
 			assert.throws(() => section.withRequiredCondition(false));
 		});
 	});
+
+	describe('getNextQuestion', () => {
+		const newSection = () => {
+			const q1 = { ...mockQuestion };
+			const q2 = { ...mockQuestion2 };
+			const q3 = { ...mockQuestion3 };
+			const section = new Section('s1', 'S').addQuestion(q1).addQuestion(q2).addQuestion(q3);
+			return { section, q1, q2, q3 };
+		};
+
+		it('should take the first question if takeNextQuestion is set', () => {
+			const { section, q1 } = newSection();
+			const next = section.getNextQuestion({
+				questionFieldName: '',
+				response: {},
+				takeNextQuestion: true,
+				reverse: false
+			});
+			assert.strictEqual(next, q1);
+		});
+		it('should take second question if first is matched', () => {
+			const { section, q1, q2 } = newSection();
+			const next = section.getNextQuestion({
+				questionFieldName: q1.fieldName,
+				response: {},
+				takeNextQuestion: false,
+				reverse: false
+			});
+			assert.strictEqual(next, q2);
+		});
+		it('should return END_OF_SECTION if last question matched', () => {
+			const { section, q3 } = newSection();
+			const next = section.getNextQuestion({
+				questionFieldName: q3.fieldName,
+				response: {},
+				takeNextQuestion: false,
+				reverse: false
+			});
+			assert.strictEqual(next, END_OF_SECTION);
+		});
+		it('should return null if no questions match', () => {
+			const { section } = newSection();
+			const next = section.getNextQuestion({
+				questionFieldName: 'random-field-name',
+				response: {},
+				takeNextQuestion: false,
+				reverse: false
+			});
+			assert.strictEqual(next, null);
+		});
+		it('should return question only if it "shouldDisplay"', () => {
+			const { section, q1, q2, q3 } = newSection();
+			// skip q2
+			q2.shouldDisplay = mock.fn(() => false);
+			const next = section.getNextQuestion({
+				questionFieldName: q1.fieldName,
+				response: {},
+				takeNextQuestion: false,
+				reverse: false
+			});
+			assert.strictEqual(q2.shouldDisplay.mock.callCount(), 1);
+			assert.strictEqual(next, q3);
+		});
+		it(`should return END_OF_SECTION if remaining questions shouldn't display`, () => {
+			const { section, q1, q2, q3 } = newSection();
+			// skip q2 & q3
+			q2.shouldDisplay = mock.fn(() => false);
+			q3.shouldDisplay = mock.fn(() => false);
+			const next = section.getNextQuestion({
+				questionFieldName: q1.fieldName,
+				response: {},
+				takeNextQuestion: false,
+				reverse: false
+			});
+			assert.strictEqual(q2.shouldDisplay.mock.callCount(), 1);
+			assert.strictEqual(q3.shouldDisplay.mock.callCount(), 1);
+			assert.strictEqual(next, END_OF_SECTION);
+		});
+		describe('manageListQuestions', () => {
+			const newSectionWithManageList = () => {
+				const q1 = { ...mockQuestion };
+				const manageListQ = {
+					get isManageListQuestion() {
+						return true;
+					}
+				};
+				const q3 = { ...mockQuestion2 };
+				const q4 = { ...mockQuestion3 };
+				const manageListSection = {
+					questions: [q3, q4],
+					get isManageListSection() {
+						return true;
+					}
+				};
+				const section = new Section('s1', 'S').addQuestion(q1).addQuestion(manageListQ, manageListSection);
+				return { section, q1, manageListQ, q3, q4 };
+			};
+			it(`should get first question within a manage list section`, () => {
+				const { section, manageListQ, q3 } = newSectionWithManageList();
+				const next = section.getNextQuestion({
+					questionFieldName: manageListQ.fieldName,
+					response: {},
+					manageListQuestion: manageListQ,
+					takeNextQuestion: true,
+					reverse: false
+				});
+				assert.strictEqual(next, q3);
+			});
+			it(`should get second question within a manage list section`, () => {
+				const { section, manageListQ, q3, q4 } = newSectionWithManageList();
+				const next = section.getNextQuestion({
+					questionFieldName: q3.fieldName,
+					response: {},
+					manageListQuestion: manageListQ,
+					takeNextQuestion: false,
+					reverse: false
+				});
+				assert.strictEqual(next, q4);
+			});
+			it(`should return to manage list question after manage list section is complete`, () => {
+				const { section, manageListQ, q4 } = newSectionWithManageList();
+				const next = section.getNextQuestion({
+					questionFieldName: q4.fieldName,
+					response: {},
+					manageListQuestion: manageListQ,
+					takeNextQuestion: false,
+					reverse: false
+				});
+				assert.strictEqual(next, manageListQ);
+			});
+		});
+	});
 });

package/src/validator/validator.js

@@ -2,11 +2,9 @@ import { validationResult } from 'express-validator';
 
 /** @type {import('express').Handler} */
 const validate = async (req, res, next) => {
-	const { section, question } = req.params;
-
 	const { journey, journeyResponse } = res.locals;
 
-	const questionObj = journey.getQuestionBySectionAndName(section, question);
+	const questionObj = journey.getQuestionByParams(req.params);
 	if (!questionObj) {
 		throw new Error('unknown question type');
 	}

package/src/validator/validator.test.js

@@ -12,7 +12,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 			locals: {
 				journeyResponse: {},
 				journey: {
-					getQuestionBySectionAndName: function () {
+					getQuestionByParams: function () {
 						return null;
 					}
 				}
@@ -50,7 +50,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new RequiredValidator()],
 					fieldName: 'field1'
@@ -78,7 +78,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new RequiredValidator()],
 					fieldName: 'field1'
@@ -106,7 +106,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new RequiredValidator()],
 					fieldName: 'field1'
@@ -133,7 +133,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new RequiredValidator(), new ValidOptionValidator()],
 					fieldName: 'field1',
@@ -174,7 +174,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new RequiredValidator(), new ValidOptionValidator()],
 					fieldName: 'field1',
@@ -217,7 +217,7 @@ describe('./src/dynamic-forms/validator/validator.js', () => {
 		};
 
 		mockRes.locals.journey = {
-			getQuestionBySectionAndName: function () {
+			getQuestionByParams: function () {
 				return {
 					validators: [new AddressValidator()],
 					fieldName: 'field1'

package/test/journey.js

@@ -1,5 +1,6 @@
 import { Section } from '../src/section.js';
 import { Journey } from '../src/journey/journey.js';
+import { ManageListSection } from '#src/components/manage-list/manage-list-section.js';
 
 export const JOURNEY_ID = 'holiday-journey';
 
@@ -29,6 +30,10 @@ export function createJourney(questions, response) {
 				.addQuestion(questions.hotelAddress)
 				.addQuestion(questions.luggageWeight)
 				.addQuestion(questions.contactEmail)
+				.addQuestion(
+					questions.travelCompanions,
+					new ManageListSection().addQuestion(questions.travelCompanionName).addQuestion(questions.travelCompanionEmail)
+				)
 		],
 		taskListUrl: 'check-your-answers',
 		journeyTemplate: 'views/layout-journey.njk',

package/test/mock/journey.js

@@ -0,0 +1,17 @@
+import { Journey } from '#src/journey/journey.js';
+
+export function mockJourney() {
+	return new Journey({
+		journeyId: 'mock-journey-id',
+		makeBaseUrl: () => '/journey',
+		taskListUrl: 'check-your-answers',
+		response: { answers: {} },
+		journeyTemplate: 'views/layout-journey.njk',
+		taskListTemplate: 'views/layout-check-your-answers.njk',
+		informationPageViewPath: '',
+		journeyTitle: 'Mock Journey',
+		returnToListing: false,
+		sections: [],
+		initialBackLink: '/journey'
+	});
+}

package/test/questions.js

@@ -174,6 +174,27 @@ export const questionProps = {
 		url: 'contact-email',
 		label: 'Email address',
 		validators: [new EmailValidator()]
+	},
+	travelCompanions: {
+		type: COMPONENT_TYPES.MANAGE_LIST,
+		title: 'Travel Companions',
+		question: 'Travel Companions',
+		fieldName: 'travelCompanions',
+		url: 'travel-companions'
+	},
+	travelCompanionName: {
+		type: COMPONENT_TYPES.SINGLE_LINE_INPUT,
+		title: 'Travel Companion Name',
+		question: 'Travel Companion Name',
+		fieldName: 'travelCompanionName',
+		url: 'travel-companion-name'
+	},
+	travelCompanionEmail: {
+		type: COMPONENT_TYPES.EMAIL,
+		title: 'Travel Companion Email',
+		question: 'Travel Companion Email',
+		fieldName: 'travelCompanionEmail',
+		url: 'travel-companion-email'
 	}
 };
 
@@ -194,7 +215,15 @@ export const questionsInOrder = [
 	questionProps.nights,
 	questionProps.hotelAddress,
 	questionProps.luggageWeight,
-	questionProps.contactEmail
+	questionProps.contactEmail,
+	questionProps.travelCompanions
+];
+
+export const manageListQuestions = [
+	{
+		manageListQuestion: questionProps.travelCompanions,
+		questions: [questionProps.travelCompanionName, questionProps.travelCompanionEmail]
+	}
 ];
 
 export const getQuestions = () => createQuestions(questionProps, questionClasses, {});

package/test/questions.test.js

@@ -2,7 +2,7 @@ import { describe, it } from 'node:test';
 import assert from 'assert';
 import { createApp } from './utils/app.js';
 import { TestServer } from './utils/test-server.js';
-import { getQuestions, questionsInOrder } from './questions.js';
+import { getQuestions, manageListQuestions, questionsInOrder } from './questions.js';
 import { buildGetJourney } from '../src/middleware/build-get-journey.js';
 import { createJourney, JOURNEY_ID } from './journey.js';
 import { buildGetJourneyResponseFromSession, saveDataToSession } from '../src/lib/session-answer-store.js';
@@ -13,6 +13,7 @@ import path from 'path';
 import { COMPONENT_TYPES } from '../src/index.js';
 import { escapeForRegExp, snapshotsDir } from './utils/utils.js';
 import { BOOLEAN_OPTIONS } from '../src/components/boolean/question.js';
+import { mockRandomUUID } from '#src/lib/uuid.test.js';
 
 /**
  * @param {import('node:test').TestContext} ctx
@@ -29,10 +30,15 @@ export async function createAppWithQuestions(ctx) {
 	//   next();
 	// });
 
-	app.get('/:section/:question', getJourneyResponse, getJourney, question);
+	app.get(
+		'/:section/:question{/:manageListAction/:manageListItemId/:manageListQuestion}',
+		getJourneyResponse,
+		getJourney,
+		question
+	);
 
 	app.post(
-		'/:section/:question',
+		'/:section/:question{/:manageListAction/:manageListItemId/:manageListQuestion}',
 		getJourneyResponse,
 		getJourney,
 		validate,
@@ -42,18 +48,25 @@ export async function createAppWithQuestions(ctx) {
 
 	app.get('/check-your-answers', getJourneyResponse, getJourney, (req, res) => list(req, res, '', {}));
 
-	app.use((error, req, res, next) => {
-		if (error) {
-			console.error('Internal Server Error:', error);
-		}
-		next();
-	});
-
 	app.use((req, res) => {
 		res.status(404);
 	});
 
-	const server = new TestServer(app, { rememberCookies: true });
+	/**
+	 * @type {import('express').ErrorRequestHandler}
+	 */
+	function errorHandler(error, req, res, next) {
+		console.error('Internal Server Error:', error);
+		if (res.headersSent) {
+			return next(error);
+		}
+		res.status(500);
+		res.render('error', { error });
+	}
+
+	app.use(errorHandler);
+
+	const server = new TestServer(app, { rememberCookies: true, timeoutMs: 2000 });
 	await server.start();
 	ctx.after(async () => await server.stop());
 	return server;
@@ -76,50 +89,72 @@ describe('question pages', () => {
 		}
 	});
 
+	/**
+	 * @param {import('node:test').TestContext} ctx
+	 * @param {string} url
+	 * @param {string} snapshotName
+	 * @param {import('#src/questions/question.js')} q
+	 * @returns {Promise<void>}
+	 */
+	async function renderQuestionCheck(ctx, url, snapshotName, q) {
+		mockRandomUUID(ctx);
+		const testServer = await createAppWithQuestions(ctx);
+
+		const response = await testServer.get(url, {
+			redirect: 'manual'
+		});
+		assert.strictEqual(response.status, 200);
+		const text = await response.text();
+		// be sure to escape parentheses in the question text for the regex
+		assert.match(text, new RegExp(escapeForRegExp(q.question), 'i'));
+		assert.match(text, /<form action="" method="post"/i);
+		if (q.options) {
+			for (const option of q.options) {
+				if (q.type === COMPONENT_TYPES.SELECT) {
+					assert.match(
+						text,
+						new RegExp(`<option[^>]*value="${option.value}"[^>]*>\\s*${option.text}\\s*</option>`, 'i')
+					);
+				} else {
+					assert.match(text, new RegExp(`<input[^>]*value="${option.value}"[^>]*>`));
+					assert.match(text, new RegExp(`<label[^>]*>\\s*${option.text}\\s*</label>`, 'i'));
+				}
+			}
+		}
+		ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), snapshotName + '.html'), {
+			serializers: [(v) => v]
+		});
+	}
+
+	/**
+	 * @param {import('node:test').TestContext} ctx
+	 * @param {string} url
+	 * @param {import('#src/questions/question.js')} q
+	 * @returns {Promise<string>}
+	 */
+	async function postQuestionCheck(ctx, url, q) {
+		const testServer = await createAppWithQuestions(ctx);
+		const payload = mockAnswerBody(q);
+		const response = await testServer.post(url, payload, { redirect: 'manual' });
+		if (![302, 303].includes(response.status)) {
+			const text = await response.text();
+			console.log(`Response for ${q.url}:\n`, text);
+		}
+		// Should redirect (302 or 303)
+		assert.ok([302, 303].includes(response.status), `Expected redirect, got ${response.status}`);
+		// Should redirect to the next question (if there is one)
+		return response.headers.get('location');
+	}
+
 	for (let i = 0; i < questionsInOrder.length; i++) {
 		const q = questionsInOrder[i];
 
 		it(`should render question: ${q.url}`, async (ctx) => {
-			const testServer = await createAppWithQuestions(ctx);
-
-			const response = await testServer.get('/questions/' + q.url, {
-				redirect: 'manual'
-			});
-			assert.strictEqual(response.status, 200);
-			const text = await response.text();
-			// be sure to escape parentheses in the question text for the regex
-			assert.match(text, new RegExp(escapeForRegExp(q.question), 'i'));
-			assert.match(text, /<form action="" method="post"/i);
-			if (q.options) {
-				for (const option of q.options) {
-					if (q.type === COMPONENT_TYPES.SELECT) {
-						assert.match(
-							text,
-							new RegExp(`<option[^>]*value="${option.value}"[^>]*>\\s*${option.text}\\s*</option>`, 'i')
-						);
-					} else {
-						assert.match(text, new RegExp(`<input[^>]*value="${option.value}"[^>]*>`));
-						assert.match(text, new RegExp(`<label[^>]*>\\s*${option.text}\\s*</label>`, 'i'));
-					}
-				}
-			}
-			ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), q.url + '.html'), {
-				serializers: [(v) => v]
-			});
+			await renderQuestionCheck(ctx, '/questions/' + q.url, q.url, q);
 		});
 
 		it(`should POST valid data for question: ${q.url} and redirect to next`, async (ctx) => {
-			const testServer = await createAppWithQuestions(ctx);
-			const payload = mockAnswerBody(q);
-			const response = await testServer.post(`/questions/${q.url}`, payload, { redirect: 'manual' });
-			if (![302, 303].includes(response.status)) {
-				const text = await response.text();
-				console.log(`Response for ${q.url}:\n`, text);
-			}
-			// Should redirect (302 or 303)
-			assert.ok([302, 303].includes(response.status), `Expected redirect, got ${response.status}`);
-			// Should redirect to the next question (if there is one)
-			const location = response.headers.get('location');
+			const location = await postQuestionCheck(ctx, `/questions/${q.url}`, q);
 			const nextQ = questionsInOrder[i + 1];
 			if (nextQ) {
 				assert.strictEqual(location, `questions/${nextQ.url}`);
@@ -128,6 +163,29 @@ describe('question pages', () => {
 			}
 		});
 	}
+
+	describe('manage list questions', () => {
+		for (const { manageListQuestion, questions } of manageListQuestions) {
+			const qUrl = (q) => ['questions', manageListQuestion.url, 'add', 'id', q.url].join('/');
+			for (let i = 0; i < questions.length; i++) {
+				const q = questions[i];
+				it(`should render question: ${q.url}`, async (ctx) => {
+					await renderQuestionCheck(ctx, '/' + qUrl(q), manageListQuestion.url + '_' + q.url, q);
+				});
+
+				it(`should POST valid data for question: ${q.url} and redirect to next`, async (ctx) => {
+					const location = await postQuestionCheck(ctx, '/' + qUrl(q), q);
+					const nextQ = questions[i + 1];
+					if (nextQ) {
+						assert.strictEqual(location, qUrl(nextQ));
+					} else {
+						// at the end of the manage list section, return to the manage list question
+						assert.strictEqual(location, 'questions/' + manageListQuestion.url);
+					}
+				});
+			}
+		}
+	});
 });
 
 /**
@@ -195,6 +253,16 @@ export function mockAnswerBody(q) {
 			};
 		case COMPONENT_TYPES.EMAIL:
 			return { [q.fieldName]: 'test@example.com' };
+		case COMPONENT_TYPES.MANAGE_LIST: {
+			// manage list questions not available here so just hard coded
+			return {
+				[q.fieldName]: [
+					{ travelCompanionName: 'Companion 1', travelCompanionEmail: 'compaion-1@example.com' },
+					{ travelCompanionName: 'Companion 2', travelCompanionEmail: 'compaion-2@example.com' },
+					{ travelCompanionName: 'Companion 3', travelCompanionEmail: 'compaion-3@example.com' }
+				]
+			};
+		}
 		default:
 			return { [q.fieldName]: 'test' };
 	}
@@ -244,6 +312,9 @@ export function mockAnswer(q) {
 			return '10 kg';
 		case COMPONENT_TYPES.EMAIL:
 			return 'test@example.com';
+		case COMPONENT_TYPES.MANAGE_LIST: {
+			return `3 ${q.title}`;
+		}
 		default:
 			return 'test';
 	}

package/test/snapshots/check-your-answers-not-started.html

@@ -196,6 +196,17 @@
       <a class="govuk-link" href="questions/contact-email">Answer<span class="govuk-visually-hidden"> What is your email address for booking confirmations?</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Companions
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-companions">Answer<span class="govuk-visually-hidden"> Travel Companions</span></a>
+    </dd>
+  </div>
 </dl>
 
         <form action method="post">

package/test/snapshots/check-your-answers-with-answers.html

@@ -196,6 +196,17 @@
       <a class="govuk-link" href="questions/contact-email">Change<span class="govuk-visually-hidden"> What is your email address for booking confirmations?</span></a>
     </dd>
   </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Companions
+    </dt>
+    <dd class="govuk-summary-list__value">
+      3 Travel Companions
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-companions">Change<span class="govuk-visually-hidden"> Travel Companions</span></a>
+    </dd>
+  </div>
 </dl>
 
         <form action method="post">

package/test/snapshots/manage-list-answer-summary.html

@@ -0,0 +1,14 @@
+<ul>
+    <li>
+        mock answer<br>
+        mock answer 2
+    </li>
+    <li>
+        mock answer<br>
+        mock answer 2
+    </li>
+    <li>
+        mock answer<br>
+        mock answer 2
+    </li>
+</ul>