@planning-inspectorate/dynamic-forms 3.16.0 → 3.17.0

package/src/questions/question.test.js

@@ -457,4 +457,90 @@ describe('./src/dynamic-forms/question.js', () => {
 			assert.strictEqual(q.isRequired(), true);
 		});
 	});
+
+	describe('formatSummaryValue', () => {
+		it('should default to undefined', () => {
+			const question = getTestQuestion();
+			assert.strictEqual(question.formatSummaryValue, undefined);
+		});
+
+		it('should accept formatSummaryValue in constructor', () => {
+			const formatter = ({ formattedAnswer }) => `<em>${formattedAnswer}</em>`;
+			const question = new Question({
+				title: TITLE,
+				question: QUESTION_STRING,
+				viewFolder: TYPE,
+				fieldName: FIELDNAME,
+				formatSummaryValue: formatter
+			});
+			assert.strictEqual(question.formatSummaryValue, formatter);
+		});
+
+		it('should apply custom formatting in formatAnswerForSummary when provided', () => {
+			const journey = {
+				getCurrentQuestionUrl: () => 'current'
+			};
+			const question = new Question({
+				title: TITLE,
+				question: QUESTION_STRING,
+				viewFolder: TYPE,
+				fieldName: FIELDNAME,
+				formatSummaryValue: ({ formattedAnswer }) => `<strong>${formattedAnswer}</strong>`
+			});
+			const result = question.formatAnswerForSummary('segment', journey, 'test answer');
+			assert.strictEqual(result[0].value, '<strong>Test answer</strong>');
+		});
+
+		it('should use default formatting when formatSummaryValue is not provided', () => {
+			const journey = {
+				getCurrentQuestionUrl: () => 'current'
+			};
+			const question = getTestQuestion();
+			const result = question.formatAnswerForSummary('segment', journey, 'test answer');
+			assert.strictEqual(result[0].value, 'Test answer');
+		});
+
+		it('should allow access to journey in formatter', () => {
+			const journey = {
+				getCurrentQuestionUrl: () => 'current',
+				response: { answers: { otherField: 'other value' } }
+			};
+			const question = new Question({
+				title: TITLE,
+				question: QUESTION_STRING,
+				viewFolder: TYPE,
+				fieldName: FIELDNAME,
+				formatSummaryValue: ({ formattedAnswer, journey }) => {
+					const extra = journey.response.answers.otherField;
+					return `${formattedAnswer} (${extra})`;
+				}
+			});
+			const result = question.formatAnswerForSummary('segment', journey, 'test');
+			assert.strictEqual(result[0].value, 'Test (other value)');
+		});
+
+		it('should pass all context properties to formatSummaryValue', () => {
+			const formatSummaryValue = mock.fn((ctx) => ctx.formattedAnswer);
+			const journey = {
+				id: 'test-journey',
+				getCurrentQuestionUrl: () => 'current'
+			};
+			const question = new Question({
+				title: TITLE,
+				question: QUESTION_STRING,
+				viewFolder: TYPE,
+				fieldName: FIELDNAME,
+				formatSummaryValue
+			});
+			question.formatAnswerForSummary('my-segment', journey, 'my-answer');
+
+			assert.strictEqual(formatSummaryValue.mock.callCount(), 1);
+			const receivedContext = formatSummaryValue.mock.calls[0].arguments[0];
+			assert.strictEqual(receivedContext.answer, 'my-answer');
+			assert.strictEqual(receivedContext.formattedAnswer, 'My-answer');
+			assert.strictEqual(receivedContext.question, question);
+			assert.strictEqual(receivedContext.journey, journey);
+			assert.strictEqual(receivedContext.sectionSegment, 'my-segment');
+		});
+	});
 });

package/test/journey.js

@@ -30,6 +30,8 @@ export function createJourney(questions, response) {
 				.addQuestion(questions.hotelAddress)
 				.addQuestion(questions.luggageWeight)
 				.addQuestion(questions.contactEmail)
+				.addQuestion(questions.favouriteActivityReason)
+				.addQuestion(questions.travelRequirements)
 				.addQuestion(
 					questions.travelCompanions,
 					new ManageListSection().addQuestion(questions.travelCompanionName).addQuestion(questions.travelCompanionEmail)

package/test/questions.js

@@ -195,6 +195,54 @@ export const questionProps = {
 		question: 'Travel Companion Email',
 		fieldName: 'travelCompanionEmail',
 		url: 'travel-companion-email'
+	},
+	// Test questions for conditional reveal functionality
+	favouriteActivityReason: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Favourite Activity Reason',
+		question: 'Why do you want to do your favourite activity?',
+		fieldName: 'favouriteActivityReason',
+		url: 'favourite-activity-reason',
+		label: 'Select a reason',
+		options: [
+			{
+				value: 'relaxation',
+				text: 'Relaxation',
+				conditional: {
+					question: 'How do you like to relax?',
+					type: 'text',
+					fieldName: 'relaxationDetails',
+					label: 'Details:'
+				}
+			},
+			{ value: 'adventure', text: 'Adventure' },
+			{ value: 'culture', text: 'Culture' }
+		]
+	},
+	travelRequirements: {
+		type: COMPONENT_TYPES.CHECKBOX,
+		title: 'Travel Requirements',
+		question: 'What special requirements do you have?',
+		fieldName: 'travelRequirements',
+		url: 'travel-requirements',
+		label: 'Select all that apply',
+		options: [
+			{
+				value: 'dietary',
+				text: 'Dietary requirements',
+				conditional: {
+					question: 'Please describe your dietary requirements',
+					type: 'text',
+					fieldName: 'dietaryDetails',
+					label: 'Dietary details:'
+				}
+			},
+			{
+				value: 'mobility',
+				text: 'Mobility assistance'
+			},
+			{ value: 'medical', text: 'Medical needs' }
+		]
 	}
 };
 
@@ -216,6 +264,8 @@ export const questionsInOrder = [
 	questionProps.hotelAddress,
 	questionProps.luggageWeight,
 	questionProps.contactEmail,
+	questionProps.favouriteActivityReason,
+	questionProps.travelRequirements,
 	questionProps.travelCompanions
 ];
 

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

@@ -196,6 +196,28 @@
       <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">
+      Favourite Activity Reason
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/favourite-activity-reason">Answer<span class="govuk-visually-hidden"> Why do you want to do your favourite activity?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Requirements
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-requirements">Answer<span class="govuk-visually-hidden"> What special requirements do you have?</span></a>
+    </dd>
+  </div>
   <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Travel Companions

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

@@ -196,6 +196,28 @@
       <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">
+      Favourite Activity Reason
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Relaxation<br>Details: test conditional answer
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/favourite-activity-reason">Change<span class="govuk-visually-hidden"> Why do you want to do your favourite activity?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Requirements
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Dietary requirements<br>Dietary details: test conditional answer
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-requirements">Change<span class="govuk-visually-hidden"> What special requirements do you have?</span></a>
+    </dd>
+  </div>
   <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Travel Companions

package/test/snapshots/favourite-activity-reason.html

@@ -0,0 +1,54 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Why do you want to do your favourite activity?
+    </h1>
+  </legend>
+
+                        <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason" name="favouriteActivityReason" type="radio" value="relaxation" data-aria-controls="conditional-favouriteActivityReason" data-cy="answer-relaxation">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason">
+        Relaxation
+      </label>
+    </div>
+    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-favouriteActivityReason">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="favouriteActivityReason_relaxationDetails">
+    How do you like to relax?
+  </label>
+  <input class="govuk-input" id="favouriteActivityReason_relaxationDetails" name="favouriteActivityReason_relaxationDetails" type="text" value="">
+</div>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason-2" name="favouriteActivityReason" type="radio" value="adventure" data-cy="answer-adventure">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason-2">
+        Adventure
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="favouriteActivityReason-3" name="favouriteActivityReason" type="radio" value="culture" data-cy="answer-culture">
+      <label class="govuk-label govuk-radios__label" for="favouriteActivityReason-3">
+        Culture
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+<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-requirements.html

@@ -0,0 +1,48 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      What special requirements do you have?
+    </h1>
+  </legend>
+  <div class="govuk-checkboxes govuk-checkboxes" data-module="govuk-checkboxes">
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements" name="travelRequirements" type="checkbox" value="dietary" data-aria-controls="conditional-travelRequirements" data-cy="answer-dietary">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements">
+        Dietary requirements
+      </label>
+    </div>
+    <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-travelRequirements">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="travelRequirements_dietaryDetails">
+    Please describe your dietary requirements
+  </label>
+  <input class="govuk-input" id="travelRequirements_dietaryDetails" name="travelRequirements_dietaryDetails" type="text" value="">
+</div>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements-2" name="travelRequirements" type="checkbox" value="mobility" data-cy="answer-mobility">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements-2">
+        Mobility assistance
+      </label>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input" id="travelRequirements-3" name="travelRequirements" type="checkbox" value="medical" data-cy="answer-medical">
+      <label class="govuk-label govuk-checkboxes__label" for="travelRequirements-3">
+        Medical needs
+      </label>
+    </div>
+  </div>
+</fieldset>
+</div>
+
+<button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+            </form>
+        </div>
+    </div>

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

@@ -101,9 +101,24 @@ export function mockAnswerBody(q) {
 	switch (q.type) {
 		case COMPONENT_TYPES.BOOLEAN:
 			return { [q.fieldName]: BOOLEAN_OPTIONS.YES };
-		case COMPONENT_TYPES.CHECKBOX:
-			return { [q.fieldName]: [q.options[0].value] };
-		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.CHECKBOX: {
+			const result = { [q.fieldName]: [q.options[0].value] };
+			// Include conditional field if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const conditionalFieldName = `${q.fieldName}_${q.options[0].conditional.fieldName}`;
+				result[conditionalFieldName] = 'test conditional answer';
+			}
+			return result;
+		}
+		case COMPONENT_TYPES.RADIO: {
+			const result = { [q.fieldName]: q.options[0].value };
+			// Include conditional field if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const conditionalFieldName = `${q.fieldName}_${q.options[0].conditional.fieldName}`;
+				result[conditionalFieldName] = 'test conditional answer';
+			}
+			return result;
+		}
 		case COMPONENT_TYPES.SELECT:
 			return { [q.fieldName]: q.options[0].value };
 		case COMPONENT_TYPES.NUMBER:
@@ -181,9 +196,24 @@ export function mockAnswer(q) {
 	switch (q.type) {
 		case COMPONENT_TYPES.BOOLEAN:
 			return BOOLEAN_OPTIONS.YES;
-		case COMPONENT_TYPES.CHECKBOX:
-			return q.options[0].text;
-		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.CHECKBOX: {
+			const optionText = q.options[0].text;
+			// Include conditional value if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const label = q.options[0].conditional.label ? `${q.options[0].conditional.label} ` : '';
+				return `${optionText}<br>${label}test conditional answer`;
+			}
+			return optionText;
+		}
+		case COMPONENT_TYPES.RADIO: {
+			const optionText = q.options[0].text;
+			// Include conditional value if present on the first option
+			if (q.options[0].conditional?.fieldName) {
+				const label = q.options[0].conditional.label ? `${q.options[0].conditional.label} ` : '';
+				return `${optionText}<br>${label}test conditional answer`;
+			}
+			return optionText;
+		}
 		case COMPONENT_TYPES.SELECT:
 			return q.options[0].text;
 		case COMPONENT_TYPES.NUMBER:

package/typedefs/question-types.d.ts

@@ -3,6 +3,29 @@ import type ManageListQuestion from '#src/components/manage-list/question.js';
 import type BaseValidator from '#src/validator/base-validator.js';
 import type { JourneyResponse } from '#src/journey/journey-response.js';
 
+/**
+ * Context passed to the custom summary formatter
+ */
+export interface SummaryFormatterContext<TAnswer = unknown> {
+	/** The raw answer value */
+	answer: TAnswer;
+	/** The default display value */
+	formattedAnswer: string;
+	/** The question instance */
+	question: import('./question.js').Question;
+	/** The journey instance */
+	journey: import('../journey/journey.js').Journey;
+	/** The section segment */
+	sectionSegment: string;
+	/** The selected option objects (for options-based questions) */
+	selectedOptions?: import('./options-question.js').Option[];
+}
+
+/**
+ * Custom function to format the summary display value
+ */
+export type SummaryValueFormatter<TAnswer = unknown> = (context: SummaryFormatterContext<TAnswer>) => string;
+
 export interface QuestionParameters {
 	title: string;
 	question: string;
@@ -21,6 +44,10 @@ export interface QuestionParameters {
 	editable?: boolean;
 	// override the action link for this question
 	actionLink?: ActionLink;
+	// custom function to format the summary display value
+	formatSummaryValue?: SummaryValueFormatter;
+	// whether to capitalise the first letter of the answer in summary (defaults to true)
+	capitaliseAnswer?: boolean;
 	// static view data for this question
 	viewData?: {
 		/**