@planning-inspectorate/dynamic-forms 3.16.0 → 3.18.0

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

@@ -1,4 +1,4 @@
-import { describe, it } from 'node:test';
+import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
 import MultiFieldInputQuestion from './question.js';
 import { Journey } from '#journey';
@@ -45,6 +45,11 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 		assert.strictEqual(testQuestion.inputFields, INPUTFIELDS);
 	});
 
+	it('should default capitaliseAnswer to false', () => {
+		const testQuestion = createMultiFieldInputQuestion();
+		assert.strictEqual(testQuestion.capitaliseAnswer, false);
+	});
+
 	it('should throw error if no inputFields parameter is passed to the constructor', () => {
 		assert.throws(() => {
 			createMultiFieldInputQuestion(TITLE, QUESTION, FIELDNAME, VALIDATORS, HTML, HINT, null);
@@ -247,7 +252,7 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 						visuallyHiddenText: 'Question?'
 					},
 					key: 'title',
-					value: 'planning-permission<br>Test User<br>'
+					value: 'planning-permission<br>Test User'
 				}
 			];
 
@@ -344,12 +349,445 @@ describe('./src/dynamic-forms/components/multi-field-input/question.js', () => {
 				sections: []
 			});
 
-			const expectedValue = 'Line 1\nLine &amp; 2\n';
+			const expectedValue = 'Line 1\nLine &amp; 2';
 
 			const result = question.formatAnswerForSummary('questions', journey);
 
 			assert.strictEqual(result[0].value, expectedValue);
 			assert.strictEqual(result[0].value.includes('<br>'), false);
 		});
+		it('should apply formatSummaryValue when provided', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: INPUTFIELDS,
+				formatSummaryValue: ({ formattedAnswer }) => `Custom: ${formattedAnswer}`
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Custom: Value 1<br>Value 2');
+		});
+		it('should apply formatSummaryValue on input fields with context (not escaped, not in form view)', () => {
+			// formatSummaryValue receives full context and output is not escaped
+			const formatSummaryValue = ({ answer }) => `<strong>${answer}</strong>`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatSummaryValue, formatJoinString: '<br>' },
+					{ fieldName: 'testField2', formatSummaryValue, formatJoinString: '<br>' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			// formatSummaryValue should be applied in summary (with HTML not escaped)
+			const summaryResult = question.formatAnswerForSummary('questions', journey);
+			assert.strictEqual(summaryResult[0].value, '<strong>Value 1</strong><br><strong>Value 2</strong>');
+
+			// formatSummaryValue should NOT be applied in view model (form inputs)
+			const viewResult = question.prepQuestionForRendering({}, journey, {});
+			assert.strictEqual(viewResult.question?.value[0].value, 'Value 1');
+			assert.strictEqual(viewResult.question?.value[1].value, 'Value 2');
+		});
+		it('should pass full context to formatSummaryValue including journey and field', () => {
+			const formatSummaryValue = mock.fn((ctx) => ctx.answer);
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatSummaryValue }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Test Value'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			question.formatAnswerForSummary('test-section', journey);
+
+			assert.strictEqual(formatSummaryValue.mock.callCount(), 1);
+			const capturedContext = formatSummaryValue.mock.calls[0].arguments[0];
+			assert.strictEqual(capturedContext.answer, 'Test Value');
+			assert.strictEqual(capturedContext.formattedAnswer, 'Test Value');
+			assert.strictEqual(capturedContext.question, question);
+			assert.strictEqual(capturedContext.journey, journey);
+			assert.strictEqual(capturedContext.sectionSegment, 'test-section');
+			assert.strictEqual(capturedContext.field.fieldName, 'testField1');
+		});
+		it('should apply formatPrefix to each field value in summary', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatPrefix: 'Name: ' },
+					{ fieldName: 'testField2', formatPrefix: 'Email: ' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'John Doe',
+						testField2: 'john@example.com'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Name: John Doe<br>Email: john@example.com');
+		});
+		it('should only include answered fields in summary (partial answers)', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Answered value',
+						testField2: null
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Only the answered field should be included
+			assert.strictEqual(result[0].value, 'Answered value');
+		});
+		it('should include falsy-but-valid answers such as false and 0 in the summary', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1' }, { fieldName: 'testField2' }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: false,
+						testField2: 0
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'false<br>0');
+		});
+		it('should exclude fields with an empty string answer from the summary', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Answered value',
+						testField2: ''
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Only the non-empty field should be included, no trailing join string
+			assert.strictEqual(result[0].value, 'Answered value');
+		});
+		it('should escape HTML characters in field values by default', () => {
+			const question = createMultiFieldInputQuestion();
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: '<script>alert("xss")</script>',
+						testField2: 'Safe & Sound'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;<br>Safe &amp; Sound');
+		});
+		it('should use default <br> join string when not in ManageListSection', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1' }, // no formatJoinString specified
+					{ fieldName: 'testField2' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			// Default join string should be <br> (not \n)
+			assert.ok(result[0].value.includes('<br>'));
+			assert.strictEqual(result[0].value, 'Value 1<br>Value 2');
+		});
+		it('should apply formatTextFunction to field values in summary', () => {
+			const formatTextFunction = (value) => `Formatted: ${value}`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatTextFunction },
+					{ fieldName: 'testField2', formatTextFunction }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Formatted: Value 1<br>Formatted: Value 2');
+		});
+		it('should escape output of formatTextFunction in summary', () => {
+			const formatTextFunction = (value) => `<b>${value}</b>`;
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatTextFunction }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, '&lt;b&gt;Value 1&lt;/b&gt;');
+		});
+		it('should apply formatTextFunction before formatSummaryValue, passing it as formattedAnswer', () => {
+			const formatTextFunction = (value) => value.toUpperCase();
+			const formatSummaryValue = mock.fn(({ answer, formattedAnswer }) => `[${answer}] ${formattedAnswer}`);
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [{ fieldName: 'testField1', formatTextFunction, formatSummaryValue }]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(formatSummaryValue.mock.callCount(), 1);
+			const capturedContext = formatSummaryValue.mock.calls[0].arguments[0];
+			// answer should remain the raw value
+			assert.strictEqual(capturedContext.answer, 'Value 1');
+			// formattedAnswer should reflect formatTextFunction output (escaped)
+			assert.strictEqual(capturedContext.formattedAnswer, 'VALUE 1');
+			assert.strictEqual(result[0].value, '[Value 1] VALUE 1');
+		});
+		it('should use custom formatJoinString when provided', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: [
+					{ fieldName: 'testField1', formatJoinString: ' - ' },
+					{ fieldName: 'testField2', formatJoinString: '' }
+				]
+			});
+
+			const journey = new Journey({
+				journeyId: 'TEST',
+				makeBaseUrl: () => 'base',
+				taskListUrl: 'cases/create-a-case/check-your-answers',
+				response: {
+					answers: {
+						testField1: 'Value 1',
+						testField2: 'Value 2'
+					}
+				},
+				journeyTemplate: 'mock template',
+				taskListTemplate: 'mock path',
+				journeyTitle: 'mock title',
+				sections: []
+			});
+
+			const result = question.formatAnswerForSummary('questions', journey);
+
+			assert.strictEqual(result[0].value, 'Value 1 - Value 2');
+		});
+	});
+	describe('formatAnswer', () => {
+		it('should return notStartedText for null', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(null), 'Not started');
+		});
+		it('should return notStartedText for undefined', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(undefined), 'Not started');
+		});
+		it('should return empty string for empty string', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(''), '');
+		});
+		it('should escape HTML and convert newlines to <br>', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer('Line 1\nLine <2>'), 'Line 1<br>Line &lt;2&gt;');
+		});
+		it('should not apply nl2br when isInManageListSection is true', () => {
+			const question = createMultiFieldInputQuestion();
+			question.isInManageListSection = true;
+			assert.strictEqual(question.formatAnswer('Line 1\nLine 2'), 'Line 1\nLine 2');
+		});
+		it('should capitalise answer when capitaliseAnswer is true', () => {
+			const question = new MultiFieldInputQuestion({
+				title: TITLE,
+				question: QUESTION,
+				fieldName: FIELDNAME,
+				inputFields: INPUTFIELDS,
+				capitaliseAnswer: true
+			});
+			assert.strictEqual(question.formatAnswer('hello world'), 'Hello world');
+		});
+		it('should not capitalise answer when capitaliseAnswer is false (default)', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer('hello world'), 'hello world');
+		});
+		it('should coerce non-string values to string before formatting', () => {
+			const question = createMultiFieldInputQuestion();
+			assert.strictEqual(question.formatAnswer(123), '123');
+			assert.strictEqual(question.formatAnswer(true), 'true');
+		});
 	});
 });

package/src/components/number-entry/question.d.ts

@@ -6,34 +6,6 @@ export class NumberEntryQuestion extends Question {
     suffix: string | undefined;
     label: string | undefined;
     answerForViewModel(answers: any): string | number;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     * @param {unknown} answer
-     * @param {import('#journey').Journey} journey
-     * @param {string} sectionSegment
-     * @returns {Array<{
-     *   key: string;
-     *   value: string | Object;
-     *   action: {
-     *     href: string;
-     *     text: string;
-     *     visuallyHiddenText: string;
-     *   };
-     * }>}
-     */
-    formatAnswerForSummary(sectionSegment: string, journey: import("#journey").Journey, answer: unknown): Array<{
-        key: string;
-        value: string | Object;
-        action: {
-            href: string;
-            text: string;
-            visuallyHiddenText: string;
-        };
-    }>;
 }
 export default NumberEntryQuestion;
 import { Question } from '#question';

package/src/components/number-entry/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA;IACC;;OAEG;IACH,gDAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAU3E;IAFA,2BAAoB;IACpB,0BAAkB;IAGnB,kDAEC;IAED;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAK/C;IAED;;;;;;;;;;;;;;OAcG;IACH,uCAXW,MAAM,WADN,OAAO,UAAU,EAAE,OAAO,UAD1B,OAAO,GAGL,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,kBAAkB,EAAE,MAAM,CAAC;SAC5B,CAAC;KACH,CAAC,CAIJ;CACD;;yBA/CwB,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA;IACC;;OAEG;IACH,gDAFW,OAAO,+BAA+B,EAAE,yBAAyB,EAY3E;IAFA,2BAAoB;IACpB,0BAAkB;IAGnB,kDAEC;CASD;;yBA9BwB,WAAW"}

package/src/components/number-entry/question.js

@@ -7,6 +7,8 @@ export class NumberEntryQuestion extends Question {
 	 */
 	constructor({ label, suffix, ...parentParams }) {
 		super({
+			// default but allow overrides
+			capitaliseAnswer: false,
 			...parentParams,
 			viewFolder: 'number-entry'
 		});
@@ -20,31 +22,12 @@ export class NumberEntryQuestion extends Question {
 	}
 
 	/**
-	 * @param {import('#question').QuestionViewModel} viewModel
+	 * @param {import('#typedefs/question-types.d.ts').QuestionViewModel} viewModel
 	 */
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.suffix = this.suffix;
 	}
-
-	/**
-	 * returns the formatted answers values to be used to build task list elements
-	 * @param {unknown} answer
-	 * @param {import('#journey').Journey} journey
-	 * @param {string} sectionSegment
-	 * @returns {Array<{
-	 *   key: string;
-	 *   value: string | Object;
-	 *   action: {
-	 *     href: string;
-	 *     text: string;
-	 *     visuallyHiddenText: string;
-	 *   };
-	 * }>}
-	 */
-	formatAnswerForSummary(sectionSegment, journey, answer) {
-		return super.formatAnswerForSummary(sectionSegment, journey, answer, false);
-	}
 }
 
 export default NumberEntryQuestion;

package/src/components/number-entry/question.test.js

@@ -0,0 +1,17 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import NumberEntryQuestion from '#src/components/number-entry/question.js';
+
+describe('number-entry', () => {
+	it('should allow capitaliseAnswer override', () => {
+		const question = new NumberEntryQuestion({
+			title: 'Question',
+			question: 'Question',
+			fieldName: 'question',
+			url: 'Question',
+			capitaliseAnswer: true
+		});
+
+		assert.strictEqual(question.capitaliseAnswer, true);
+	});
+});

package/src/components/radio/question.d.ts

@@ -2,17 +2,9 @@ export class RadioQuestion extends OptionsQuestion {
     /**
      * @param {import('#typedefs/question-props.d.ts').RadioQuestionParams} params
      */
-    constructor({ title, question, fieldName, viewFolder, url, hint, pageTitle, description, label, html, legend, options, validators, actionLink, editable, viewData }: import("#typedefs/question-props.d.ts").RadioQuestionParams);
+    constructor({ label, html, legend, viewFolder, ...parentParams }: import("#typedefs/question-props.d.ts").RadioQuestionParams);
     label: string | undefined;
     legend: string | undefined;
-    /**
-     * @param {import('#question').QuestionViewModel} viewModel
-     */
-    addCustomDataToViewModel(viewModel: import("#question").QuestionViewModel): void;
-    /**
-     * returns the formatted answers values to be used to build task list elements
-     */
-    formatAnswerForSummary(sectionSegment: any, journey: any, answer: any): import("../../index.js").SummaryRow[];
 }
 export default RadioQuestion;
 import OptionsQuestion from '../../questions/options-question.js';

package/src/components/radio/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAEA;IACC;;OAEG;IACH,qKAFW,OAAO,+BAA+B,EAAE,mBAAmB,EAuCrE;IAFA,0BAAkB;IAClB,2BAAoB;IAGrB;;OAEG;IACH,oCAFW,OAAO,WAAW,EAAE,iBAAiB,QAK/C;IAED;;OAEG;IACH,8GAcC;CACD;;4BAvE2B,qCAAqC"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["question.js"],"names":[],"mappings":"AAGA;IACC;;OAEG;IACH,kEAFW,OAAO,+BAA+B,EAAE,mBAAmB,EAWrE;IAFA,0BAAkB;IAClB,2BAAoB;CAuCrB;;4BArD2B,qCAAqC"}