@planning-inspectorate/dynamic-forms 2.4.0 → 3.1.0

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>

package/test/snapshots/manage-list-render-questions.html

@@ -0,0 +1,97 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+                <h1 class="govuk-heading-l">You have added 3 Things</h1>
+
+                <dl class="govuk-summary-list">
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 1
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    Q 1:<br>
+                                    mock answer
+                                    <br><br>
+                                    Q 2:<br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-1/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 1</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-1/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 1</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 2
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    Q 1:<br>
+                                    mock answer
+                                    <br><br>
+                                    Q 2:<br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-2/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 2</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-2/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 2</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 3
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    Q 1:<br>
+                                    mock answer
+                                    <br><br>
+                                    Q 2:<br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-3/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 3</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-3/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 3</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                </dl>
+
+                <p class="govuk-body">
+                    <a href="/add/00000000-0000-0000-0000-000000000000/first-question" class="govuk-link">Add another</a>
+                </p>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/manage-list-render.html

@@ -0,0 +1,91 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+                <h1 class="govuk-heading-l">You have added 3 Things</h1>
+
+                <dl class="govuk-summary-list">
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 1
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    mock answer
+                                    <br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-1/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 1</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-1/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 1</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 2
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    mock answer
+                                    <br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-2/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 2</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-2/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 2</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                        <div class="govuk-summary-list__row ">
+                            <dt class="govuk-summary-list__key">
+                                Thing 3
+                            </dt>
+                            <dt class="govuk-summary-list__value">
+                                    mock answer
+                                    <br>
+                                    mock answer 2
+                            </dt>
+                            <dd class="govuk-summary-list__actions">
+                                <ul class="govuk-summary-list__actions-list">
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/edit/id-3/first-question">
+                                            Change <span class="govuk-visually-hidden">Thing 3</span>
+                                        </a>
+                                    </li>
+                                    <li class="govuk-summary-list__actions-list-item">
+                                        <a class="govuk-link" href="/remove/id-3/confirm">
+                                            Remove <span class="govuk-visually-hidden">Thing 3</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </div>
+                </dl>
+
+                <p class="govuk-body">
+                    <a href="/add/00000000-0000-0000-0000-000000000000/first-question" class="govuk-link">Add another</a>
+                </p>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/travel-companions.html

@@ -0,0 +1,19 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+                <h1 class="govuk-heading-l">You have added 0 Travel Companions</h1>
+
+                <dl class="govuk-summary-list">
+                </dl>
+
+                <p class="govuk-body">
+                    <a href="/questions/travel-companions/add/00000000-0000-0000-0000-000000000000/travel-companion-name" class="govuk-link">Add another</a>
+                </p>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/travel-companions_travel-companion-email.html

@@ -0,0 +1,21 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+                    <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper">
+    <label class="govuk-label govuk-label--l" for="travelCompanionEmail">
+      Travel Companion Email
+    </label>
+  </h1>
+  <input class="govuk-input" id="travelCompanionEmail" name="travelCompanionEmail" type="email" value="" autocomplete="email" spellcheck="false">
+</div>
+
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/travel-companions_travel-companion-name.html

@@ -0,0 +1,21 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+                    <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper">
+    <label class="govuk-label govuk-label--l" for="travelCompanionName">
+      Travel Companion Name
+    </label>
+  </h1>
+  <input class="govuk-input" id="travelCompanionName" name="travelCompanionName" type="text" value="">
+</div>
+
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/tsconfig.json

@@ -17,7 +17,8 @@
 		"paths": {
 			"#question-types": ["./src/questions/question-types.d.ts"],
 			"#src/*": ["./src/*"],
-			"#test/*": ["./test/*"]
+			"#test/*": ["./test/*"],
+			"#question": ["./src/questions/question.js"]
 		}
 	}
 }