@planning-inspectorate/dynamic-forms 3.3.3 → 3.3.4

package/.gitattributes

@@ -0,0 +1,2 @@
+# snapshots always use \n
+test/snapshots/** text eol=lf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
@@ -33,14 +33,16 @@
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "@eslint/js": "^10.0.1",
     "body-parser": "^2.2.0",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "cookie-parser": "^1.4.7",
-    "eslint": "^9.29.0",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.5",
     "express": "^5.1.0",
     "express-session": "^1.18.2",
-    "govuk-frontend": "^5.11.0",
+    "globals": "^17.3.0",
+    "govuk-frontend": "^6.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "prettier": "^3.6.2",

package/src/components/manage-list/question.test.js

@@ -5,8 +5,7 @@ import { ManageListSection } from '#src/components/manage-list/manage-list-secti
 import { mockJourney } from '#test/mock/journey.js';
 import { mockRandomUUID } from '#test/mock/uuid.js';
 import { configureNunjucksTestEnv } from '#test/utils/nunjucks.js';
-import path from 'path';
-import { snapshotsDir } from '#test/utils/utils.js';
+import { assertSnapshot } from '#test/utils/utils.js';
 
 describe('components/manage-list/question', () => {
 	const TITLE = 'Things';
@@ -96,13 +95,7 @@ describe('components/manage-list/question', () => {
 		const { q } = questionWithManageQuestions(ctx, { showAnswersInSummary: true });
 		const answerForSummary = q.formatAnswerForSummary('section-1', mockJourney(), [{}, {}, {}]);
 		assert.strictEqual(answerForSummary.length, 1);
-		ctx.assert.fileSnapshot(
-			answerForSummary[0].value.replaceAll('\r\n', '\n'),
-			path.join(snapshotsDir(), 'manage-list-answer-summary.html'),
-			{
-				serializers: [(v) => v]
-			}
-		);
+		assertSnapshot(ctx, answerForSummary[0].value, 'manage-list-answer-summary.html');
 	});
 
 	it('should render with answers', (ctx) => {
@@ -114,9 +107,7 @@ describe('components/manage-list/question', () => {
 		};
 		q.renderAction(res, viewModel);
 		assert.strictEqual(res.render.mock.callCount(), 1);
-		ctx.assert.fileSnapshot(res.render.mock.calls[0].result, path.join(snapshotsDir(), 'manage-list-render.html'), {
-			serializers: [(v) => v]
-		});
+		assertSnapshot(ctx, res.render.mock.calls[0].result, 'manage-list-render.html');
 	});
 
 	it('should render with answers & questions', (ctx) => {
@@ -130,13 +121,7 @@ describe('components/manage-list/question', () => {
 		};
 		q.renderAction(res, viewModel);
 		assert.strictEqual(res.render.mock.callCount(), 1);
-		ctx.assert.fileSnapshot(
-			res.render.mock.calls[0].result,
-			path.join(snapshotsDir(), 'manage-list-render-questions.html'),
-			{
-				serializers: [(v) => v]
-			}
-		);
+		assertSnapshot(ctx, res.render.mock.calls[0].result, 'manage-list-render-questions.html');
 	});
 
 	describe('getDataToSave', () => {

package/src/components/text-entry-redact/index.njk

@@ -123,7 +123,7 @@
                     }) }}
 
                     {{ govukButton({
-                        text: "Undo all changes",
+                        text: "Remove all redactions",
                         classes: "govuk-button--secondary",
                         id: "redact-undo-all",
                         type: "button"
@@ -192,16 +192,20 @@
                 showError('No changes to undo');
               }
             });
-            redactUndoAll.addEventListener('click', () => {
-              const unredated = unredactedText.dataset.original;
-              if (history.length === 0 && textArea.value === unredated) {
-                showError('No changes to undo');
-                return;
-              }
-              hideError();
-              textArea.value = unredated || '';
-              history.length = 0;
-            });
+         redactUndoAll.addEventListener('click', () => {
+           const unredated = unredactedText.dataset.original;
+           if (history.length === 0 && textArea.value === unredated) {
+             showError('No changes to undo');
+             return;
+           }
+           hideError();
+           textArea.value = unredated || '';
+           history.length = 0;
+
+           for (const rejectLink of rejectLinks) {
+             rejectLink.text = 'Accept';
+           }
+         });
             for (const rejectLink of rejectLinks) {
               rejectLink.addEventListener('click', () => {
                 const index = parseInt(rejectLink.getAttribute('data-redact').replace('suggestion-reject-', ''));

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

@@ -1,8 +1,7 @@
 import { describe, it } from 'node:test';
 import assert from 'assert';
 import { manageListQuestions, questionsInOrder } from './questions.js';
-import path from 'path';
-import { escapeForRegExp, snapshotsDir } from './utils/utils.js';
+import { assertSnapshot, escapeForRegExp } from './utils/utils.js';
 import { createAppWithQuestions, mockAnswer, mockAnswerBody } from './utils/question-test-utils.js';
 import { COMPONENT_TYPES } from '#src/index.js';
 
@@ -30,9 +29,7 @@ describe('check-your-answers', () => {
 				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]
-		});
+		assertSnapshot(ctx, text, 'check-your-answers-not-started.html');
 	});
 
 	it(`should render all question answers`, async (ctx) => {
@@ -80,8 +77,6 @@ describe('check-your-answers', () => {
 				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]
-		});
+		assertSnapshot(ctx, text, 'check-your-answers-with-answers.html');
 	});
 });

package/test/conditional-journey.test.js

@@ -0,0 +1,431 @@
+import { describe, it } from 'node:test';
+import assert from 'assert';
+import { Section } from '#src/section.js';
+import { Journey } from '#src/journey/journey.js';
+import { COMPONENT_TYPES } from '#src/index.js';
+import { createQuestions } from '#src/questions/create-questions.js';
+import { questionClasses } from '#src/questions/questions.js';
+import { whenQuestionHasAnswer } from '#src/components/utils/question-has-answer.js';
+import { BOOLEAN_OPTIONS } from '#src/components/boolean/question.js';
+import { createAppWithQuestions, renderQuestionCheck, postAnswer } from '#test/utils/question-test-utils.js';
+
+const JOURNEY_ID = 'conditional-journey';
+
+/**
+ * Question props for conditional journey tests
+ * @type {Record<string, import('#src/questions/question-props.js').QuestionProps>}
+ */
+const conditionalQuestionProps = {
+	// Section 1: Insurance (simple + chained conditions)
+	wantsInsurance: {
+		type: COMPONENT_TYPES.BOOLEAN,
+		title: 'Want Insurance',
+		question: 'Do you want to add travel insurance?',
+		fieldName: 'wantsInsurance',
+		url: 'wants-insurance',
+		label: 'Add insurance?'
+	},
+	insuranceLevel: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Insurance Level',
+		question: 'What level of insurance do you want?',
+		fieldName: 'insuranceLevel',
+		url: 'insurance-level',
+		label: 'Select an insurance level',
+		options: [
+			{ value: 'basic', text: 'Basic' },
+			{ value: 'premium', text: 'Premium' }
+		]
+	},
+	premiumBenefits: {
+		type: COMPONENT_TYPES.CHECKBOX,
+		title: 'Premium Benefits',
+		question: 'Which premium benefits do you want?',
+		fieldName: 'premiumBenefits',
+		url: 'premium-benefits',
+		label: 'Select all that apply',
+		options: [
+			{ value: 'cancellation', text: 'Cancellation cover' },
+			{ value: 'medical', text: 'Medical cover' },
+			{ value: 'luggage', text: 'Luggage cover' }
+		]
+	},
+	// Section 2: Trip (leads to section condition)
+	tripType: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Trip Type',
+		question: 'What type of trip are you planning?',
+		fieldName: 'tripType',
+		url: 'trip-type',
+		label: 'Select a trip type',
+		options: [
+			{ value: 'domestic', text: 'Domestic' },
+			{ value: 'international', text: 'International' }
+		]
+	},
+	// Section 3: Visa (section-wide condition based on tripType)
+	visaRequired: {
+		type: COMPONENT_TYPES.BOOLEAN,
+		title: 'Visa Required',
+		question: 'Do you need a visa for your destination?',
+		fieldName: 'visaRequired',
+		url: 'visa-required',
+		label: 'Visa required?'
+	},
+	visaType: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Visa Type',
+		question: 'What type of visa do you need?',
+		fieldName: 'visaType',
+		url: 'visa-type',
+		label: 'Select a visa type',
+		options: [
+			{ value: 'tourist', text: 'Tourist' },
+			{ value: 'business', text: 'Business' }
+		]
+	},
+	// Section 4: Accommodation (multi-question condition)
+	accommodation: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Accommodation',
+		question: 'Where will you stay?',
+		fieldName: 'accommodation',
+		url: 'accommodation',
+		label: 'Select accommodation type',
+		options: [
+			{ value: 'hotel', text: 'Hotel' },
+			{ value: 'hostel', text: 'Hostel' },
+			{ value: 'apartment', text: 'Apartment' }
+		]
+	},
+	hotelStars: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Hotel Stars',
+		question: 'How many stars for your hotel?',
+		fieldName: 'hotelStars',
+		url: 'hotel-stars',
+		label: 'Select star rating',
+		options: [
+			{ value: '3', text: '3 stars' },
+			{ value: '4', text: '4 stars' },
+			{ value: '5', text: '5 stars' }
+		]
+	},
+	hotelBreakfast: {
+		type: COMPONENT_TYPES.BOOLEAN,
+		title: 'Hotel Breakfast',
+		question: 'Do you want breakfast included?',
+		fieldName: 'hotelBreakfast',
+		url: 'hotel-breakfast',
+		label: 'Include breakfast?'
+	},
+	// Section 5: Contact (always shown)
+	contactEmail: {
+		type: COMPONENT_TYPES.EMAIL,
+		title: 'Contact Email',
+		question: 'What is your email address?',
+		fieldName: 'contactEmail',
+		url: 'contact-email',
+		label: 'Email address'
+	}
+};
+
+/**
+ * Create the questions for conditional tests
+ */
+const conditionalQuestions = createQuestions(conditionalQuestionProps, questionClasses, {});
+
+/**
+ * Create a single journey with various conditional logic scenarios:
+ *
+ * Section 1 - Insurance (simple + chained conditions):
+ *   - wantsInsurance: always shown
+ *   - insuranceLevel: shown if wantsInsurance = 'yes' (simple condition)
+ *   - premiumBenefits: shown if insuranceLevel = 'premium' (chained condition)
+ *
+ * Section 2 - Trip:
+ *   - tripType: always shown
+ *
+ * Section 3 - Visa (section-wide condition):
+ *   - Entire section shown only if tripType = 'international'
+ *   - visaRequired: shown if section condition met
+ *   - visaType: shown if section condition met AND visaRequired = 'yes'
+ *
+ * Section 4 - Accommodation (multi-question condition):
+ *   - accommodation: always shown
+ *   - hotelStars + hotelBreakfast: shown only if accommodation = 'hotel' (multi-question group)
+ *
+ * Section 5 - Contact:
+ *   - contactEmail: always shown
+ */
+function createConditionalJourney(questions, response) {
+	return new Journey({
+		journeyId: JOURNEY_ID,
+		sections: [
+			// Section 1: Insurance with simple and chained conditions
+			new Section('Insurance', 'insurance')
+				.addQuestion(questions.wantsInsurance)
+				.addQuestion(questions.insuranceLevel)
+				.withCondition(whenQuestionHasAnswer(questions.wantsInsurance, BOOLEAN_OPTIONS.YES))
+				.addQuestion(questions.premiumBenefits)
+				.withCondition(whenQuestionHasAnswer(questions.insuranceLevel, 'premium')),
+
+			// Section 2: Trip type (determines section condition for visa)
+			new Section('Trip Details', 'trip').addQuestion(questions.tripType),
+
+			// Section 3: Visa with section-wide condition
+			new Section('Visa', 'visa')
+				.withSectionCondition(whenQuestionHasAnswer(questions.tripType, 'international'))
+				.addQuestion(questions.visaRequired)
+				.addQuestion(questions.visaType)
+				.withCondition(whenQuestionHasAnswer(questions.visaRequired, BOOLEAN_OPTIONS.YES)),
+
+			// Section 4: Accommodation with multi-question condition
+			new Section('Accommodation', 'accommodation')
+				.addQuestion(questions.accommodation)
+				.startMultiQuestionCondition('hotel-group', whenQuestionHasAnswer(questions.accommodation, 'hotel'))
+				.addQuestion(questions.hotelStars)
+				.addQuestion(questions.hotelBreakfast)
+				.endMultiQuestionCondition('hotel-group'),
+
+			// Section 5: Contact (always shown)
+			new Section('Contact', 'contact').addQuestion(questions.contactEmail)
+		],
+		taskListUrl: 'check-your-answers',
+		journeyTemplate: 'views/layout-journey.njk',
+		taskListTemplate: 'views/layout-check-your-answers.njk',
+		journeyTitle: 'Conditional Journey',
+		returnToListing: false,
+		makeBaseUrl: () => '/',
+		initialBackLink: '/start',
+		response
+	});
+}
+
+/**
+ * Helper to create an app with the conditional journey
+ * @param {import('node:test').TestContext} ctx
+ * @returns {Promise<import('#test/utils/test-server.js').TestServer>}
+ */
+function createAppWithJourney(ctx) {
+	return createAppWithQuestions(ctx, {
+		journeyId: JOURNEY_ID,
+		questions: conditionalQuestions,
+		createJourneyFn: createConditionalJourney
+	});
+}
+
+const q = conditionalQuestionProps;
+
+describe('conditional journey tests', () => {
+	describe('simple condition (whenQuestionHasAnswer on single question)', () => {
+		it('should show conditional question when condition is met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// First, render the initial question
+			await renderQuestionCheck(ctx, testServer, '/insurance/wants-insurance', q.wantsInsurance.question);
+
+			// Answer 'yes' to wantsInsurance
+			const location = await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Should redirect to insuranceLevel (conditional question)
+			assert.strictEqual(location, 'insurance/insurance-level');
+
+			// Render the conditional question
+			await renderQuestionCheck(ctx, testServer, '/insurance/insurance-level', q.insuranceLevel.question);
+		});
+
+		it('should skip conditional question when condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'no' to wantsInsurance
+			const location = await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.NO
+			});
+
+			// Should skip insuranceLevel and premiumBenefits, go to next section (trip)
+			assert.strictEqual(location, 'trip/trip-type');
+		});
+	});
+
+	describe('chained conditions (multiple dependent conditions)', () => {
+		it('should show both conditional questions when all conditions are met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'yes' to wantsInsurance
+			await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Answer 'premium' to insuranceLevel
+			const location = await postAnswer(testServer, '/insurance/insurance-level', {
+				[q.insuranceLevel.fieldName]: 'premium'
+			});
+
+			// Should go to premiumBenefits
+			assert.strictEqual(location, 'insurance/premium-benefits');
+
+			// Render the premium benefits question
+			await renderQuestionCheck(ctx, testServer, '/insurance/premium-benefits', q.premiumBenefits.question);
+		});
+
+		it('should skip second conditional question when its condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'yes' to wantsInsurance
+			await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Answer 'basic' to insuranceLevel (not 'premium')
+			const location = await postAnswer(testServer, '/insurance/insurance-level', {
+				[q.insuranceLevel.fieldName]: 'basic'
+			});
+
+			// Should skip premiumBenefits and go to next section (trip)
+			assert.strictEqual(location, 'trip/trip-type');
+		});
+
+		it('should skip all conditional questions when first condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'no' to wantsInsurance
+			const location = await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.NO
+			});
+
+			// Should skip insuranceLevel and premiumBenefits, go to next section (trip)
+			assert.strictEqual(location, 'trip/trip-type');
+		});
+	});
+
+	describe('section-wide conditions (withSectionCondition)', () => {
+		it('should show section questions when section condition is met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'international' to tripType
+			const location = await postAnswer(testServer, '/trip/trip-type', {
+				[q.tripType.fieldName]: 'international'
+			});
+
+			// Should go to visa section (visaRequired)
+			assert.strictEqual(location, 'visa/visa-required');
+
+			// Render the visa question
+			await renderQuestionCheck(ctx, testServer, '/visa/visa-required', q.visaRequired.question);
+		});
+
+		it('should skip entire section when section condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'domestic' to tripType
+			const location = await postAnswer(testServer, '/trip/trip-type', {
+				[q.tripType.fieldName]: 'domestic'
+			});
+
+			// Should skip visa section and go to accommodation section
+			assert.strictEqual(location, 'accommodation/accommodation');
+		});
+
+		it('should combine section condition with question condition', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'international' to tripType
+			await postAnswer(testServer, '/trip/trip-type', {
+				[q.tripType.fieldName]: 'international'
+			});
+
+			// Answer 'yes' to visaRequired
+			const location = await postAnswer(testServer, '/visa/visa-required', {
+				[q.visaRequired.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Should go to visaType (condition met)
+			assert.strictEqual(location, 'visa/visa-type');
+
+			// Render the visa type question
+			await renderQuestionCheck(ctx, testServer, '/visa/visa-type', q.visaType.question);
+		});
+
+		it('should skip conditional question within section when its condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'international' to tripType
+			await postAnswer(testServer, '/trip/trip-type', {
+				[q.tripType.fieldName]: 'international'
+			});
+
+			// Answer 'no' to visaRequired
+			const location = await postAnswer(testServer, '/visa/visa-required', {
+				[q.visaRequired.fieldName]: BOOLEAN_OPTIONS.NO
+			});
+
+			// Should skip visaType and go to accommodation section
+			assert.strictEqual(location, 'accommodation/accommodation');
+		});
+	});
+
+	describe('multi-question conditions (startMultiQuestionCondition)', () => {
+		it('should show all questions in group when condition is met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'hotel' to accommodation
+			const location = await postAnswer(testServer, '/accommodation/accommodation', {
+				[q.accommodation.fieldName]: 'hotel'
+			});
+
+			// Should go to hotelStars (first question in group)
+			assert.strictEqual(location, 'accommodation/hotel-stars');
+
+			// Render the hotel stars question
+			await renderQuestionCheck(ctx, testServer, '/accommodation/hotel-stars', q.hotelStars.question);
+
+			// Answer hotelStars
+			const nextLocation = await postAnswer(testServer, '/accommodation/hotel-stars', {
+				[q.hotelStars.fieldName]: '4'
+			});
+
+			// Should go to hotelBreakfast (second question in group)
+			assert.strictEqual(nextLocation, 'accommodation/hotel-breakfast');
+
+			// Render the hotel breakfast question
+			await renderQuestionCheck(ctx, testServer, '/accommodation/hotel-breakfast', q.hotelBreakfast.question);
+		});
+
+		it('should skip all questions in group when condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'hostel' to accommodation (not 'hotel')
+			const location = await postAnswer(testServer, '/accommodation/accommodation', {
+				[q.accommodation.fieldName]: 'hostel'
+			});
+
+			// Should skip hotelStars and hotelBreakfast, go to contact section
+			assert.strictEqual(location, 'contact/contact-email');
+		});
+
+		it('should proceed to question after group ends', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'hotel' to accommodation
+			await postAnswer(testServer, '/accommodation/accommodation', {
+				[q.accommodation.fieldName]: 'hotel'
+			});
+
+			// Answer hotelStars
+			await postAnswer(testServer, '/accommodation/hotel-stars', {
+				[q.hotelStars.fieldName]: '5'
+			});
+
+			// Answer hotelBreakfast (last in group)
+			const location = await postAnswer(testServer, '/accommodation/hotel-breakfast', {
+				[q.hotelBreakfast.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Should go to contact section (after group ends)
+			assert.strictEqual(location, 'contact/contact-email');
+		});
+	});
+});

package/test/questions.test.js

@@ -1,11 +1,14 @@
 import { describe, it } from 'node:test';
 import assert from 'assert';
 import { manageListQuestions, questionsInOrder } from './questions.js';
-import path from 'path';
 import { COMPONENT_TYPES } from '../src/index.js';
-import { escapeForRegExp, snapshotsDir } from './utils/utils.js';
-import { createAppWithQuestions, mockAnswerBody } from '#test/utils/question-test-utils.js';
-import { mockRandomUUID } from '#test/mock/uuid.js';
+import { assertSnapshot } from './utils/utils.js';
+import {
+	createAppWithQuestions,
+	mockAnswerBody,
+	renderQuestionCheck,
+	postAnswer
+} from '#test/utils/question-test-utils.js';
 
 describe('question pages', () => {
 	it('should have a test for each question type', () => {
@@ -31,18 +34,11 @@ describe('question pages', () => {
 	 * @param {import('#src/questions/question.js')} q
 	 * @returns {Promise<void>}
 	 */
-	async function renderQuestionCheck(ctx, url, snapshotName, q) {
-		mockRandomUUID(ctx);
+	async function renderQuestionAndSnapshot(ctx, url, snapshotName, q) {
 		const testServer = await createAppWithQuestions(ctx);
+		const text = await renderQuestionCheck(ctx, testServer, url, q.question);
 
-		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);
+		// Check options if present
 		if (q.options) {
 			for (const option of q.options) {
 				if (q.type === COMPONENT_TYPES.SELECT) {
@@ -56,9 +52,8 @@ describe('question pages', () => {
 				}
 			}
 		}
-		ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), snapshotName + '.html'), {
-			serializers: [(v) => v]
-		});
+
+		assertSnapshot(ctx, text, snapshotName + '.html');
 	}
 
 	/**
@@ -70,22 +65,14 @@ describe('question pages', () => {
 	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');
+		return postAnswer(testServer, url, payload);
 	}
 
 	for (let i = 0; i < questionsInOrder.length; i++) {
 		const q = questionsInOrder[i];
 
 		it(`should render question: ${q.url}`, async (ctx) => {
-			await renderQuestionCheck(ctx, '/questions/' + q.url, q.url, q);
+			await renderQuestionAndSnapshot(ctx, '/questions/' + q.url, q.url, q);
 		});
 
 		it(`should POST valid data for question: ${q.url} and redirect to next`, async (ctx) => {
@@ -105,7 +92,7 @@ describe('question pages', () => {
 			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);
+					await renderQuestionAndSnapshot(ctx, '/' + qUrl(q), manageListQuestion.url + '_' + q.url, q);
 				});
 
 				it(`should POST valid data for question: ${q.url} and redirect to next`, async (ctx) => {

package/test/snapshots/secret-wish.html

@@ -43,7 +43,7 @@
 </button>
 
                     <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-undo-all">
-  Undo all changes
+  Remove all redactions
 </button>
                 </div>
 
@@ -107,16 +107,20 @@
                 showError('No changes to undo');
               }
             });
-            redactUndoAll.addEventListener('click', () => {
-              const unredated = unredactedText.dataset.original;
-              if (history.length === 0 && textArea.value === unredated) {
-                showError('No changes to undo');
-                return;
-              }
-              hideError();
-              textArea.value = unredated || '';
-              history.length = 0;
-            });
+         redactUndoAll.addEventListener('click', () => {
+           const unredated = unredactedText.dataset.original;
+           if (history.length === 0 && textArea.value === unredated) {
+             showError('No changes to undo');
+             return;
+           }
+           hideError();
+           textArea.value = unredated || '';
+           history.length = 0;
+
+           for (const rejectLink of rejectLinks) {
+             rejectLink.text = 'Accept';
+           }
+         });
             for (const rejectLink of rejectLinks) {
               rejectLink.addEventListener('click', () => {
                 const index = parseInt(rejectLink.getAttribute('data-redact').replace('suggestion-reject-', ''));

package/test/utils/question-test-utils.js

@@ -1,3 +1,4 @@
+import assert from 'assert';
 import { getQuestions } from '#test/questions.js';
 import { COMPONENT_TYPES } from '#src/index.js';
 import { createApp } from '#test/utils/app.js';
@@ -9,16 +10,28 @@ import validate from '#src/validator/validator.js';
 import { validationErrorHandler } from '#src/validator/validation-error-handler.js';
 import { TestServer } from '#test/utils/test-server.js';
 import { BOOLEAN_OPTIONS } from '#src/components/boolean/question.js';
+import { escapeForRegExp } from '#test/utils/utils.js';
+import { mockRandomUUID } from '#test/mock/uuid.js';
+
+/**
+ * @typedef {Object} CreateAppOptions
+ * @property {string} journeyId - The journey ID for session storage
+ * @property {(questions: Object, response: import('#src/journey/journey-response.js').JourneyResponse) => import('#src/journey/journey.js').Journey} createJourneyFn - Function to create the journey
+ * @property {Object} questions - The questions object
+ */
 
 /**
  * @param {import('node:test').TestContext} ctx
+ * @param {CreateAppOptions} [options]
  * @returns {Promise<TestServer>}
  */
-export async function createAppWithQuestions(ctx) {
+export async function createAppWithQuestions(ctx, options) {
 	const app = createApp();
-	const questions = getQuestions();
-	const getJourney = buildGetJourney((req, journeyResponse) => createJourney(questions, journeyResponse));
-	const getJourneyResponse = buildGetJourneyResponseFromSession(JOURNEY_ID);
+	const questions = options?.questions ?? getQuestions();
+	const journeyId = options?.journeyId ?? JOURNEY_ID;
+	const createJourneyFn = options?.createJourneyFn ?? createJourney;
+	const getJourney = buildGetJourney((req, journeyResponse) => createJourneyFn(questions, journeyResponse));
+	const getJourneyResponse = buildGetJourneyResponseFromSession(journeyId);
 
 	// app.use((req, res, next) => {
 	//   console.log(req.method, req.url, req.session);
@@ -198,3 +211,38 @@ export function mockAnswer(q) {
 			return 'test';
 	}
 }
+
+/**
+ * Helper to render a question and check it's displayed correctly
+ * @param {import('node:test').TestContext} ctx
+ * @param {import('./test-server.js').TestServer} testServer
+ * @param {string} url
+ * @param {string} questionText
+ * @returns {Promise<string>}
+ */
+export async function renderQuestionCheck(ctx, testServer, url, questionText) {
+	mockRandomUUID(ctx);
+	const response = await testServer.get(url, { redirect: 'manual' });
+	assert.strictEqual(response.status, 200, `Expected 200 for ${url}, got ${response.status}`);
+	const text = await response.text();
+	assert.match(text, new RegExp(escapeForRegExp(questionText), 'i'));
+	assert.match(text, /<form action="" method="post"/i);
+	return text;
+}
+
+/**
+ * Helper to POST an answer and check the redirect
+ * @param {import('./test-server.js').TestServer} testServer
+ * @param {string} url
+ * @param {Record<string, unknown>} payload
+ * @returns {Promise<string|null>}
+ */
+export async function postAnswer(testServer, url, payload) {
+	const response = await testServer.post(url, payload, { redirect: 'manual' });
+	if (![302, 303].includes(response.status)) {
+		const text = await response.text();
+		console.log(`Response for ${url}:\n`, text);
+	}
+	assert.ok([302, 303].includes(response.status), `Expected redirect, got ${response.status}`);
+	return response.headers.get('location');
+}

package/test/utils/test-server.js

@@ -152,6 +152,7 @@ export class TestServer {
 			return response;
 		} catch (error) {
 			if (error instanceof Error && error.name === 'AbortError') {
+				// eslint-disable-next-line preserve-caught-error
 				throw new Error(`Request to ${path} timed out after ${this.#timeoutMs}ms`);
 			}
 			throw error;

package/test/utils/utils.js

@@ -2,13 +2,28 @@ import path from 'path';
 import { mock } from 'node:test';
 
 export function testDir() {
-	return path.join(path.dirname(new URL(import.meta.url).pathname), '..');
+	return path.join(import.meta.dirname, '..');
 }
 
 export function snapshotsDir() {
 	return path.join(testDir(), 'snapshots');
 }
 
+/**
+ * @param {import('node:test').TestContext} ctx
+ * @param {string} content
+ * @param {string} name
+ */
+export function assertSnapshot(ctx, content, name) {
+	ctx.assert.fileSnapshot(
+		content.replaceAll('\r\n', '\n'), // OS agnostic line endings
+		path.join(snapshotsDir(), name),
+		{
+			serializers: [(v) => v]
+		}
+	);
+}
+
 /**
  * @returns {import('pino').BaseLogger}
  */