From d3b4f8f7739509e7e4278432253f55d52831aabb Mon Sep 17 00:00:00 2001
From: pbardy2000 <146740183+pbardy2000@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:58:38 +0000
Subject: [PATCH] feat(CB2-14451): update multi option and radios

---
 .../govuk-form-group-radio.component.html     | 15 +++++++
 .../__tests__/adr-section.component.spec.ts   | 43 +++++++++++++++++++
 .../adr-section-edit.component.spec.ts        |  1 +
 ...pipe.spec.ts => multi-option.pipe.spec.ts} |  5 ++-
 .../default-null-or-empty.pipe.ts             | 13 ------
 .../pipes/multi-option/multi-option.pipe.ts   |  3 +-
 6 files changed, 65 insertions(+), 15 deletions(-)
 rename src/app/pipes/multi-option/__tests__/{mult-option.pipe.spec.ts => multi-option.pipe.spec.ts} (87%)
 delete mode 100644 src/app/pipes/multi-option/default-null-or-empty.pipe.ts

diff --git a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
index f1b663a5fa..3be6ab5eb1 100644
--- a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
+++ b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
@@ -10,6 +10,18 @@ <h1 tag>
         </ng-container>
       </h1>
     </legend>
+
+    <ng-container *ngIf="controlHint">
+      <div class="govuk-hint" id="{{ hintId }}"> {{ controlHint }} </div>
+    </ng-container>
+
+    <ng-container *ngIf="hasError">
+      <p class="govuk-error-message" id="{{ errorId }}">
+        <span class="govuk-visually-hidden">Error: </span>
+        <span>{{ (control?.errors | keyvalue)?.[0]?.value }}</span>
+      </p>
+    </ng-container>
+
     <div data-module="govuk-radios">
       <div *ngFor="let option of options">
         <input
@@ -23,6 +35,9 @@ <h1 tag>
           [attr.aria-labelledby]="labelId"
           [attr.data-testid]="id"
           [class.govuk-radios__input--error]="hasError"
+          [(ngModel)]="value"
+          (ngModelChange)="onChange($event)"
+          (blur)="onTouched()"
         />
         <label
           id="{{ labelId }}"
diff --git a/src/app/forms/custom-sections/adr-section/__tests__/adr-section.component.spec.ts b/src/app/forms/custom-sections/adr-section/__tests__/adr-section.component.spec.ts
index e69de29bb2..d9dee1d5ca 100644
--- a/src/app/forms/custom-sections/adr-section/__tests__/adr-section.component.spec.ts
+++ b/src/app/forms/custom-sections/adr-section/__tests__/adr-section.component.spec.ts
@@ -0,0 +1,43 @@
+import { SharedModule } from '@/src/app/shared/shared.module';
+import { initialAppState } from '@/src/app/store';
+import { createMockHgv } from '@/src/mocks/hgv-record.mock';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ControlContainer } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { of } from 'rxjs';
+import { DynamicFormsModule } from '../../../dynamic-forms.module';
+import { AdrSectionComponent } from '../adr-section.component';
+
+describe('AdrSectionComponent', () => {
+	let store: MockStore;
+	let component: AdrSectionComponent;
+	let fixture: ComponentFixture<AdrSectionComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [AdrSectionComponent],
+			imports: [SharedModule, DynamicFormsModule],
+			providers: [
+				ControlContainer,
+				provideHttpClient(),
+				provideHttpClientTesting(),
+				provideMockStore({ initialState: initialAppState }),
+				{ provide: ActivatedRoute, useValue: { params: of([{ id: 1 }]) } },
+			],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(AdrSectionComponent);
+		fixture.componentRef.setInput('techRecord', createMockHgv(123));
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+
+		store = TestBed.inject(MockStore);
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/forms/custom-sections/adr-section/adr-section-edit/__tests__/adr-section-edit.component.spec.ts b/src/app/forms/custom-sections/adr-section/adr-section-edit/__tests__/adr-section-edit.component.spec.ts
index 905deb240a..aad6093d55 100644
--- a/src/app/forms/custom-sections/adr-section/adr-section-edit/__tests__/adr-section-edit.component.spec.ts
+++ b/src/app/forms/custom-sections/adr-section/adr-section-edit/__tests__/adr-section-edit.component.spec.ts
@@ -17,6 +17,7 @@ describe('AdrSectionEditComponent', () => {
 	let component: AdrSectionEditComponent;
 	let fixture: ComponentFixture<AdrSectionEditComponent>;
 	let formGroupDirective: FormGroupDirective;
+	let store: MockStore;
 
 	beforeEach(async () => {
 		formGroupDirective = new FormGroupDirective([], []);
diff --git a/src/app/pipes/multi-option/__tests__/mult-option.pipe.spec.ts b/src/app/pipes/multi-option/__tests__/multi-option.pipe.spec.ts
similarity index 87%
rename from src/app/pipes/multi-option/__tests__/mult-option.pipe.spec.ts
rename to src/app/pipes/multi-option/__tests__/multi-option.pipe.spec.ts
index 95c8b340b3..bb98c03dbf 100644
--- a/src/app/pipes/multi-option/__tests__/mult-option.pipe.spec.ts
+++ b/src/app/pipes/multi-option/__tests__/multi-option.pipe.spec.ts
@@ -7,12 +7,15 @@ describe('MultiOption pipe tests', () => {
 	const options: MultiOptions = [
 		{ label: 'Option 1', value: '1' },
 		{ label: 'Option 2', value: '2' },
-		{ label: 'Option 3', value: '3' },
+		{ label: 'option 3', value: '3' },
 	];
 
 	it('should the label associated with the value in the multi option list', () => {
 		expect(pipe.transform('1', options)).toBe('Option 1');
 		expect(pipe.transform('2', options)).toBe('Option 2');
+	});
+
+	it('should capitalise the first letter of the label', () => {
 		expect(pipe.transform('3', options)).toBe('Option 3');
 	});
 
diff --git a/src/app/pipes/multi-option/default-null-or-empty.pipe.ts b/src/app/pipes/multi-option/default-null-or-empty.pipe.ts
deleted file mode 100644
index 8db82c0bf0..0000000000
--- a/src/app/pipes/multi-option/default-null-or-empty.pipe.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'multiOption' })
-export class MultiOptionPipe implements PipeTransform {
-	titleCaseFirstWord(value: string) {
-		return value[0].toUpperCase() + value.substring(1);
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	transform(value: any) {
-		return '';
-	}
-}
diff --git a/src/app/pipes/multi-option/multi-option.pipe.ts b/src/app/pipes/multi-option/multi-option.pipe.ts
index b8763ba0e7..929c208f0a 100644
--- a/src/app/pipes/multi-option/multi-option.pipe.ts
+++ b/src/app/pipes/multi-option/multi-option.pipe.ts
@@ -1,12 +1,13 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { MultiOptions } from '../../models/options.model';
+import { DefaultNullOrEmpty } from '../default-null-or-empty/default-null-or-empty.pipe';
 
 @Pipe({ name: 'multiOption' })
 export class MultiOptionPipe implements PipeTransform {
 	transform(value: unknown, options: MultiOptions) {
 		const option = options.find((o) => o.value === value);
 		if (option) {
-			return option.label;
+			return new DefaultNullOrEmpty().transform(option.label);
 		}
 
 		return '-';