From 6f95c86c8cfaf36178fae12c5cdfe3dd6288a56e Mon Sep 17 00:00:00 2001
From: James Wainwright <james.wainwright@madetech.com>
Date: Mon, 3 Feb 2025 17:01:50 +0000
Subject: [PATCH] Add length validation to name fields and refactor error state
 logic

---
 components/GovCheckboxes.vue                  |  11 +-
 components/GovDropdown.vue                    |  10 +-
 components/GovInputInt.vue                    |  11 +-
 components/GovInputText.vue                   |  11 +-
 components/GovInputWithSuffix.vue             |  11 +-
 components/GovRadios.vue                      |   4 +-
 .../hot-water-distribution/[distribution].vue |   2 +-
 .../shading/shading-form.test.ts              |   2 +
 pages/dwelling-details/summary.test.ts        |   2 +-
 utils/validation.test.ts                      | 150 ++++++++++++++++++
 utils/validation.ts                           |  17 ++
 11 files changed, 183 insertions(+), 48 deletions(-)
 create mode 100644 utils/validation.test.ts
 create mode 100644 utils/validation.ts

diff --git a/components/GovCheckboxes.vue b/components/GovCheckboxes.vue
index ff61189..f8512dc 100644
--- a/components/GovCheckboxes.vue
+++ b/components/GovCheckboxes.vue
@@ -35,14 +35,7 @@ const handleChange = (value: string) => {
 </script>
 
 <template>
-	<div
-		:class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error'
-			: ''
-		}`"
-	>
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<div class="govuk-form-group">
 			<fieldset class="govuk-fieldset">
 				<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -55,7 +48,7 @@ const handleChange = (value: string) => {
 				</div>
 				<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
 					<span class="govuk-visually-hidden">Error:</span>
-					{{ props.context.messages.rule_required.value }}
+					{{ getErrorMessage(props.context) }}
 				</p>
 				<div class="govuk-checkboxes" data-module="govuk-checkboxes">
 					<div v-for="(option, index) in options" :key="option" class="govuk-checkboxes__item">
diff --git a/components/GovDropdown.vue b/components/GovDropdown.vue
index b1da2c4..c613a8a 100644
--- a/components/GovDropdown.vue
+++ b/components/GovDropdown.vue
@@ -24,13 +24,7 @@ function handleInput(e) {
 </script>
 
 <template>
-	<div
-		:class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error' : ''
-		}`"
-	>
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
@@ -38,7 +32,7 @@ function handleInput(e) {
 			{{ help }}
 		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
-			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required.value }}
+			<span class="govuk-visually-hidden">Error:</span> {{ getErrorMessage(props.context) }}
 		</p>
 		<select
 			:id="id"
diff --git a/components/GovInputInt.vue b/components/GovInputInt.vue
index 259d354..ce340ec 100644
--- a/components/GovInputInt.vue
+++ b/components/GovInputInt.vue
@@ -24,14 +24,7 @@ function handleInput(e) {
 </script>
 
 <template>
-	<div
-		:class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error'
-			: ''
-		}`"
-	>
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
@@ -39,7 +32,7 @@ function handleInput(e) {
 			{{ help }}
 		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
-			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required?.value }}
+			<span class="govuk-visually-hidden">Error:</span> {{ getErrorMessage(props.context) }}
 		</p>
 		<div class="govuk-input__wrapper">
 			<input
diff --git a/components/GovInputText.vue b/components/GovInputText.vue
index cdbd60c..8ab8b72 100644
--- a/components/GovInputText.vue
+++ b/components/GovInputText.vue
@@ -23,14 +23,7 @@ function handleInput(e) {
 </script>
 
 <template>
-	<div
-		:class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error'
-			: ''
-		}`"
-	>
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<h1 class="govuk-label-wrapper">
 			<label class="govuk-label govuk-label--m" :for="id">
 				{{ label }}
@@ -40,7 +33,7 @@ function handleInput(e) {
 			{{ help }}
 		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
-			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required?.value }}
+			<span class="govuk-visually-hidden">Error:</span> {{ getErrorMessage(props.context) }}
 		</p>
 		<input
 			:id="id"
diff --git a/components/GovInputWithSuffix.vue b/components/GovInputWithSuffix.vue
index 7ee8b8c..96349e3 100644
--- a/components/GovInputWithSuffix.vue
+++ b/components/GovInputWithSuffix.vue
@@ -25,14 +25,7 @@ function handleInput(e) {
 </script>
 
 <template>
-	<div
-		:class="`govuk-form-group ${props.context.state.invalid &&
-			props.context.messages.rule_required &&
-			props.context.messages.rule_required.visible
-			? 'govuk-form-group--error'
-			: ''
-		}`"
-	>
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<label class="govuk-label govuk-label--m" :for="id">
 			{{ label }}
 		</label>
@@ -40,7 +33,7 @@ function handleInput(e) {
 			{{ help }}
 		</div>
 		<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
-			<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required?.value }}
+			<span class="govuk-visually-hidden">Error:</span> {{ getErrorMessage(props.context) }}
 		</p>
 		<div class="govuk-input__wrapper">
 			<input
diff --git a/components/GovRadios.vue b/components/GovRadios.vue
index 9528fc9..9c8c4ff 100644
--- a/components/GovRadios.vue
+++ b/components/GovRadios.vue
@@ -24,7 +24,7 @@ function handleInput(e) {
 </script>
 
 <template>
-	<div :class="`govuk-form-group ${props.context.state.invalid ? 'govuk-form-group--error' : ''}`">
+	<div :class="`govuk-form-group ${showErrorState(props.context) ? 'govuk-form-group--error' : ''}`">
 		<fieldset
 			:id="id"
 			class="govuk-fieldset"
@@ -38,7 +38,7 @@ function handleInput(e) {
 			</div>
 			<GovDetails v-if="details" :summary-text="details.summaryText" :text="details.text" classes="govuk-!-margin-bottom-4" />
 			<p v-if="props.context.state.invalid" class="govuk-error-message" :data-testid="`${id}_error`">
-				<span class="govuk-visually-hidden">Error:</span> {{ props.context.messages.rule_required.value }}
+				<span class="govuk-visually-hidden">Error:</span> {{ getErrorMessage(props.context) }}
 			</p>
 			<div class="govuk-radios govuk-radios--small" data-module="govuk-radios">
 				<div v-for="key in Object.keys(options)" :key="key" class="govuk-radios__item">
diff --git a/pages/dwelling-details/hot-water-distribution/[distribution].vue b/pages/dwelling-details/hot-water-distribution/[distribution].vue
index 16bdcfa..27ed2f3 100644
--- a/pages/dwelling-details/hot-water-distribution/[distribution].vue
+++ b/pages/dwelling-details/hot-water-distribution/[distribution].vue
@@ -91,7 +91,7 @@ const { handleInvalidSubmit, errorMessages } = useErrorSummary();
 			label="Name"
 			help="Name this pipework so it can be identified later"
 			name="name"
-			validation="required"
+			validation="required | length:1,50"
 		/>
 		<FormKit
 			id="location"
diff --git a/pages/dwelling-details/shading/shading-form.test.ts b/pages/dwelling-details/shading/shading-form.test.ts
index 3224d1c..e644d62 100644
--- a/pages/dwelling-details/shading/shading-form.test.ts
+++ b/pages/dwelling-details/shading/shading-form.test.ts
@@ -63,6 +63,8 @@ describe('shading form', () => {
 				params: { shading: '1' }
 			}
 		});
+
+		await user.tab();
 		await user.clear(screen.getByTestId('name'));
 		await user.type(screen.getByTestId('name'), 'Wall');
 		await user.tab();
diff --git a/pages/dwelling-details/summary.test.ts b/pages/dwelling-details/summary.test.ts
index fe5ddaf..f1074e0 100644
--- a/pages/dwelling-details/summary.test.ts
+++ b/pages/dwelling-details/summary.test.ts
@@ -2,7 +2,7 @@ import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime';
 import Summary from './summary.vue';
 import { screen } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import hyphenate from '../../utils/hyphenate'
+import hyphenate from '../../utils/hyphenate';
 
 const navigateToMock = vi.hoisted(() => vi.fn());
 mockNuxtImport('navigateTo', () => {
diff --git a/utils/validation.test.ts b/utils/validation.test.ts
new file mode 100644
index 0000000..a09be90
--- /dev/null
+++ b/utils/validation.test.ts
@@ -0,0 +1,150 @@
+
+describe('Show error state', () => {
+	it('returns true when state is invalid', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: true
+				}
+			},
+			state: {
+				invalid: true
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(true);
+	});
+
+	it('returns true when context contains at least 1 visible error message', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: false
+				},
+				rule_length: {
+					value: 'Invalid length.',
+					visible: true
+				}
+			},
+			state: {
+				invalid: true
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(true);
+	});
+
+	it('returns false when no visible error message is present', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: false
+				}
+			},
+			state: {
+				invalid: true
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(false);
+	});
+
+	it('returns false when no error message is present', () => {
+		const context = {
+			messages: {},
+			state: {
+				invalid: true
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(false);
+	});
+
+	it('returns false when error message is not visible', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: false
+				}
+			},
+			state: {
+				invalid: true
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(false);
+	});
+
+	it('returns false when state is valid', () => {
+		const context = {
+			messages: {},
+			state: {
+				invalid: false
+			}
+		};
+
+		const result = showErrorState(context);
+
+		expect(result).toBe(false);
+	});
+});
+
+describe('Get error message', () => {
+	it('returns error message when context has error messages', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: true
+				}
+			}
+		};
+
+		const result = getErrorMessage(context);
+
+		expect(result).toBe('Field is required.');
+	});
+
+	it('returns undefined when context has no error messages', () => {
+		const context = {
+			messages: {}
+		};
+
+		const result = getErrorMessage(context);
+
+		expect(result).toBeUndefined();
+	});
+
+	it('returns first visible error message when context has multiple error messages', () => {
+		const context = {
+			messages: {
+				rule_required: {
+					value: 'Field is required.',
+					visible: false
+				},
+				rule_length: {
+					value: 'Invalid length.',
+					visible: true
+				}
+			}
+		};
+
+		const result = getErrorMessage(context);
+
+		expect(result).toBe('Invalid length.');
+	});
+});
\ No newline at end of file
diff --git a/utils/validation.ts b/utils/validation.ts
new file mode 100644
index 0000000..3205213
--- /dev/null
+++ b/utils/validation.ts
@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function showErrorState(context: Record<string, any>): boolean {
+	const messageKeys = Object.keys(context.messages)
+		.filter(key => context.messages[key].visible);
+
+	return context.state.invalid &&
+		messageKeys.length > 0 &&
+		context.messages[messageKeys[0]].visible;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getErrorMessage(context: Record<string, any>): string | undefined {
+	const messageKeys = Object.keys(context.messages)
+		.filter(key => context.messages[key].visible);
+
+	return messageKeys.length ? context.messages[messageKeys[0]].value : undefined;
+}
\ No newline at end of file