@planning-inspectorate/dynamic-forms 2.4.0 → 3.0.0

package/src/questions/question.test.js

@@ -63,6 +63,7 @@ describe('./src/dynamic-forms/question.js', () => {
 			assert.strictEqual(question.validators, VALIDATORS);
 			assert.strictEqual(question.html, HTML);
 			assert.strictEqual(question.hint, HINT);
+			assert.strictEqual(question.isManageListQuestion, false);
 		});
 		it('should support viewData field', () => {
 			const question = getTestQuestion({ viewData: { test: 'test' } });
@@ -110,6 +111,30 @@ describe('./src/dynamic-forms/question.js', () => {
 		});
 	});
 
+	describe('isInManageListSection', () => {
+		it('should default to false', () => {
+			const question = getTestQuestion();
+			assert.strictEqual(question.isInManageListSection, false);
+		});
+		it('should support setting isInManageListSection', () => {
+			const question = getTestQuestion();
+			assert.strictEqual(question.isInManageListSection, false);
+			question.isInManageListSection = true;
+			assert.strictEqual(question.isInManageListSection, true);
+		});
+		it('should not support setting isInManageListSection false', () => {
+			const question = getTestQuestion();
+			assert.strictEqual(question.isInManageListSection, false);
+			assert.throws(
+				() => (question.isInManageListSection = false),
+				(error) => {
+					assert.strictEqual(error.message, 'Question isInManageListSection is false by default');
+					return true;
+				}
+			);
+		});
+	});
+
 	describe('prepQuestionForRendering', () => {
 		it('should prepQuestionForRendering', () => {
 			const question = getTestQuestion();
@@ -150,8 +175,6 @@ describe('./src/dynamic-forms/question.js', () => {
 			assert.deepStrictEqual(result.answer, journey.response.answers[question.fieldName]);
 			assert.deepStrictEqual(result.layoutTemplate, journey.journeyTemplate);
 			assert.deepStrictEqual(result.pageCaption, section.name);
-			assert.deepStrictEqual(result.navigation, ['', 'back']);
-			assert.deepStrictEqual(result.backLink, 'back');
 			assert.deepStrictEqual(result.showBackToListLink, question.showBackToListLink);
 			assert.deepStrictEqual(result.listLink, journey.taskListUrl);
 			assert.deepStrictEqual(result.journeyTitle, journey.journeyTitle);
@@ -205,7 +228,7 @@ describe('./src/dynamic-forms/question.js', () => {
 			const expectedResult = { a: 1 };
 			const req = { body: { errors: { error: 'we have an error' } } };
 			const question = getTestQuestion();
-			question.prepQuestionForRendering = mock.fn(() => expectedResult);
+			question.toViewModel = mock.fn(() => expectedResult);
 
 			const result = question.checkForValidationErrors(req);
 

package/src/questions/questions.js

@@ -15,6 +15,7 @@ import EmailQuestion from '../components/email/question.js';
 import { COMPONENT_TYPES } from '../index.js';
 import TextEntryRedactQuestion from '../components/text-entry-redact/question.js';
 import DateTimeQuestion from '../components/date-time/question.js';
+import ManageListQuestion from '../components/manage-list/question.js';
 
 // This looks a bit grim because so few of our
 // Questions overlap with Question correctly.
@@ -35,5 +36,6 @@ export const questionClasses = Object.freeze({
 	[COMPONENT_TYPES.MULTI_FIELD_INPUT]: MultiFieldInputQuestion,
 	[COMPONENT_TYPES.NUMBER]: NumberEntryQuestion,
 	[COMPONENT_TYPES.UNIT_OPTION]: UnitOptionEntryQuestion,
-	[COMPONENT_TYPES.EMAIL]: EmailQuestion
+	[COMPONENT_TYPES.EMAIL]: EmailQuestion,
+	[COMPONENT_TYPES.MANAGE_LIST]: ManageListQuestion
 });

package/src/section-types.d.ts

@@ -0,0 +1,18 @@
+import { JourneyResponse } from '#src/journey/journey-response.js';
+import ManageListQuestion from '#src/components/manage-list/question.js';
+import { Question } from '#src/questions/question.js';
+
+export interface GetNextQuestionParams {
+	questionFieldName: string;
+	response: JourneyResponse;
+	// if this is part of a manage list section
+	manageListQuestion?: ManageListQuestion;
+	takeNextQuestion: boolean;
+	// to get previous question instead of next
+	reverse: boolean;
+}
+
+export interface StaticGetNextQuestionParams extends GetNextQuestionParams {
+	manageListQuestion: undefined;
+	questions: Question[];
+}

package/src/section.js

@@ -82,13 +82,20 @@ export class Section {
 
 	/**
 	 * Fluent API method for adding questions
-	 * @param {any} question
+	 * @param {import('#src/questions/question.js').Question} question
+	 * @param {import('#src/components/manage-list/manage-list-section.js').ManageListSection} [manageListSection]
 	 * @returns {Section}
 	 */
-	addQuestion(question) {
+	addQuestion(question, manageListSection) {
 		if (!question) {
 			throw new Error('question is required');
 		}
+		if (question.isManageListQuestion) {
+			if (!manageListSection || !manageListSection.isManageListSection) {
+				throw new Error('manage list questions require a ManageListSection');
+			}
+			question.section = manageListSection;
+		}
 		this.questions.push(question);
 		this.#conditionAdded = false; // reset condition flag
 		this.#applyConditions(question);
@@ -192,24 +199,46 @@ export class Section {
 
 	/**
 	 * Get the next question in this section given a questionParam (question fieldName)
-	 * @param {Object} params
-	 * @param {string} params.questionFieldName
-	 * @param {import('#src/journey/journey-response.js').JourneyResponse} params.response
-	 * @param {boolean} [params.takeNextQuestion]
-	 * @param {boolean} [params.reverse]
+	 * @param {import('./section-types.d.ts').GetNextQuestionParams} params
+	 * @returns {Question|Symbol|null}
+	 */
+	getNextQuestion(params) {
+		const { manageListQuestion } = params;
+		if (manageListQuestion) {
+			// first check if the next question is within the manage list section
+			const next = Section.getNextQuestion({
+				...params,
+				questions: manageListQuestion.section.questions
+			});
+			if (next === END_OF_SECTION) {
+				// after the manage list section questions, go back to the manage list question
+				return manageListQuestion;
+			}
+			return next;
+		}
+		return Section.getNextQuestion({
+			...params,
+			questions: this.questions
+		});
+	}
+
+	/**
+	 * Implementation of getNextQuestion given a list of questions
+	 *
+	 * @param {import('./section-types.d.ts').StaticGetNextQuestionParams} params
 	 * @returns {Question|Symbol|null}
 	 */
-	getNextQuestion({ questionFieldName, response, takeNextQuestion = false, reverse = false }) {
-		const numberOfQuestions = this.questions.length;
+	static getNextQuestion({ questions, questionFieldName, response, takeNextQuestion = false, reverse = false }) {
+		const numberOfQuestions = questions.length;
 
 		const questionsStart = reverse ? numberOfQuestions - 1 : 0;
 		for (let i = questionsStart; reverse ? i >= 0 : i < numberOfQuestions; reverse ? i-- : i++) {
-			const question = this.questions[i];
+			const question = questions[i];
 			if (takeNextQuestion && question.shouldDisplay(response)) {
 				return question;
 			}
 
-			if (question.fieldName === questionFieldName) {
+			if (question.fieldName === questionFieldName || question.url === questionFieldName) {
 				takeNextQuestion = true;
 			}
 		}

package/src/section.test.js

@@ -53,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', () => {
@@ -660,5 +696,58 @@ describe('./src/dynamic-forms/section.js', () => {
 			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/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,
@@ -83,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}`);
@@ -135,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);
+					}
+				});
+			}
+		}
+	});
 });
 
 /**
@@ -202,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' };
 	}
@@ -251,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>