Merge pull request #6332 from NMDSdevopsServiceAdm/fix/1495-accordion…

…-validation-in-main-job-role-page Fix/1495 accordion validation in main job role page
NMDSdevopsServiceAdm · Aug 23, 2024 · 3e32baf · 3e32baf
2 parents 9dac333 + f24de23
commit 3e32baf
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 70 deletions.
diff --git a/...ons/add-edit-training/select-training-category/select-training-category.component.spec.ts b/...ons/add-edit-training/select-training-category/select-training-category.component.spec.ts
@@ -121,14 +121,14 @@ describe('SelectTrainingCategoryComponent', () => {
     expect(cancelLink).toBeTruthy();
   });
 
-  it('should show an accordian with the correct categories in', async () => {
+  it('should show an accordion with the correct categories in', async () => {
     const { component, getByTestId } = await setup(true);
     expect(component.categories).toEqual([
       { id: 1, seq: 10, category: 'Activity provision/Well-being', trainingCategoryGroup: 'Care skills and knowledge' },
       { id: 2, seq: 20, category: 'Autism', trainingCategoryGroup: 'Specific conditions and disabilities' },
       { id: 37, seq: 1, category: 'Other', trainingCategoryGroup: null },
     ]);
-    expect(getByTestId('accordian')).toBeTruthy();
+    expect(getByTestId('groupedAccordion')).toBeTruthy();
   });
 
   it('should call the training service and navigate to the details page', async () => {

diff --git a/...ing/select-training-category-multiple/select-training-category-multiple.component.spec.ts b/...ing/select-training-category-multiple/select-training-category-multiple.component.spec.ts
@@ -137,14 +137,14 @@ describe('SelectTrainingCategoryMultipleComponent', () => {
     expect(routerSpy).toHaveBeenCalledWith(['/dashboard'], { fragment: 'training-and-qualifications' });
   });
 
-  it('should show an accordian with the correct categories in', async () => {
+  it('should show an accordion with the correct categories in', async () => {
     const { component, getByTestId } = await setup(true);
     expect(component.categories).toEqual([
       { id: 1, seq: 10, category: 'Activity provision/Well-being', trainingCategoryGroup: 'Care skills and knowledge' },
       { id: 2, seq: 20, category: 'Autism', trainingCategoryGroup: 'Specific conditions and disabilities' },
       { id: 37, seq: 1, category: 'Other', trainingCategoryGroup: null },
     ]);
-    expect(getByTestId('accordian')).toBeTruthy();
+    expect(getByTestId('groupedAccordion')).toBeTruthy();
   });
 
   it('should return to the select staff page if there is no selected staff', async () => {

diff --git a/frontend/src/app/features/workers/main-job-role/main-job-role.component.html b/frontend/src/app/features/workers/main-job-role/main-job-role.component.html
@@ -14,7 +14,9 @@ <h1 class="govuk-fieldset__heading">{{ worker ? 'Update' : 'Select' }} their mai
           [accordions]="jobGroups"
           textShowHideAll="job roles"
           [preFilledId]="preFilledId"
-          data-testid="accordian"
+          data-testid="groupedAccordion"
+          [hasError]="submitted && form.invalid"
+          [errorMessage]="formErrorsMap[0].type[0].message"
         ></app-grouped-radio-button-accordion>
       </fieldset>
     </div>

diff --git a/frontend/src/app/features/workers/main-job-role/main-job-role.component.spec.ts b/frontend/src/app/features/workers/main-job-role/main-job-role.component.spec.ts
@@ -32,71 +32,74 @@ describe('MainJobRoleComponent', () => {
     } else {
       path = 'staff-record-summary';
     }
-    const { fixture, getByText, getByTestId, getByLabelText, queryByTestId } = await render(MainJobRoleComponent, {
-      imports: [SharedModule, RouterModule, RouterTestingModule, HttpClientTestingModule, ReactiveFormsModule],
-      declarations: [ProgressBarComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        UntypedFormBuilder,
-        AlertService,
-        WindowRef,
-        {
-          provide: PermissionsService,
-          useFactory: MockPermissionsService.factory(),
-          deps: [HttpClient, Router, UserService],
-        },
-        {
-          provide: UserService,
-          useFactory: MockUserService.factory(0, Roles.Admin),
-          deps: [HttpClient],
-        },
-        {
-          provide: WorkerService,
-          useClass: MockWorkerServiceWithUpdateWorker,
-        },
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            parent: {
+    const { fixture, getByText, getAllByText, getByTestId, getByLabelText, queryByTestId } = await render(
+      MainJobRoleComponent,
+      {
+        imports: [SharedModule, RouterModule, RouterTestingModule, HttpClientTestingModule, ReactiveFormsModule],
+        declarations: [ProgressBarComponent],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [
+          UntypedFormBuilder,
+          AlertService,
+          WindowRef,
+          {
+            provide: PermissionsService,
+            useFactory: MockPermissionsService.factory(),
+            deps: [HttpClient, Router, UserService],
+          },
+          {
+            provide: UserService,
+            useFactory: MockUserService.factory(0, Roles.Admin),
+            deps: [HttpClient],
+          },
+          {
+            provide: WorkerService,
+            useClass: MockWorkerServiceWithUpdateWorker,
+          },
+          {
+            provide: ActivatedRoute,
+            useValue: {
+              parent: {
+                snapshot: {
+                  url: [{ path }],
+                  data: {
+                    establishment: { uid: 'mocked-uid' },
+                    primaryWorkplace: {},
+                  },
+                },
+              },
               snapshot: {
-                url: [{ path }],
+                params: {},
                 data: {
-                  establishment: { uid: 'mocked-uid' },
-                  primaryWorkplace: {},
+                  jobs: [
+                    {
+                      id: 4,
+                      jobRoleGroup: 'Professional and related roles',
+                      title: 'Allied health professional (not occupational therapist)',
+                    },
+                    {
+                      id: 10,
+                      jobRoleGroup: 'Care providing roles',
+                      title: 'Care worker',
+                    },
+                    {
+                      id: 23,
+                      title: 'Registered nurse',
+                      jobRoleGroup: 'Professional and related roles',
+                    },
+                    {
+                      id: 27,
+                      title: 'Social worker',
+                      jobRoleGroup: 'Professional and related roles',
+                    },
+                  ],
                 },
               },
             },
-            snapshot: {
-              params: {},
-              data: {
-                jobs: [
-                  {
-                    id: 4,
-                    jobRoleGroup: 'Professional and related roles',
-                    title: 'Allied health professional (not occupational therapist)',
-                  },
-                  {
-                    id: 10,
-                    jobRoleGroup: 'Care providing roles',
-                    title: 'Care worker',
-                  },
-                  {
-                    id: 23,
-                    title: 'Registered nurse',
-                    jobRoleGroup: 'Professional and related roles',
-                  },
-                  {
-                    id: 27,
-                    title: 'Social worker',
-                    jobRoleGroup: 'Professional and related roles',
-                  },
-                ],
-              },
-            },
           },
-        },
-      ],
-    });
+        ],
+      },
+    );
 
     const component = fixture.componentInstance;
     const injector = getTestBed();
@@ -128,6 +131,7 @@ describe('MainJobRoleComponent', () => {
       fixture,
       getByTestId,
       getByText,
+      getAllByText,
       getByLabelText,
       router,
       routerSpy,
@@ -176,7 +180,7 @@ describe('MainJobRoleComponent', () => {
   it('should show the accordion', async () => {
     const { getByTestId } = await setup(false, true);
 
-    expect(getByTestId('accordian')).toBeTruthy();
+    expect(getByTestId('groupedAccordion')).toBeTruthy();
   });
 
   it('should show the accordion headings', async () => {
@@ -295,13 +299,13 @@ describe('MainJobRoleComponent', () => {
       });
 
       it('should return an error message if user clicked submit without selecting a job role', async () => {
-        const { fixture, getByText } = await setup(true, false, true);
+        const { fixture, getByText, getAllByText } = await setup(true, false, true);
 
         userEvent.click(getByText('Save this staff record'));
         fixture.detectChanges();
 
         expect(getByText('There is a problem')).toBeTruthy();
-        expect(getByText('Select the job role')).toBeTruthy();
+        expect(getAllByText('Select the job role')).toHaveSize(2);
       });
     });
 

diff --git a/frontend/src/app/features/workers/main-job-role/main-job-role.component.ts b/frontend/src/app/features/workers/main-job-role/main-job-role.component.ts
@@ -7,7 +7,6 @@ import { BackLinkService } from '@core/services/backLink.service';
 import { ErrorSummaryService } from '@core/services/error-summary.service';
 import { NewWorkerMandatoryInfo, WorkerService } from '@core/services/worker.service';
 import { EstablishmentService } from '@core/services/establishment.service';
-import { Contracts } from '@core/model/contracts.enum';
 import { AlertService } from '@core/services/alert.service';
 
 @Component({

diff --git a/...on-accordion/grouped-radio-button-accordion/grouped-radio-button-accordion.component.html b/...on-accordion/grouped-radio-button-accordion/grouped-radio-button-accordion.component.html
@@ -10,7 +10,7 @@
       </button>
     </div>
 
-    <p *ngIf="hasError" id="category-error" class="govuk-error-message">
+    <p *ngIf="hasError" id="{{ formControlName }}-error" class="govuk-error-message">
       <span class="govuk-visually-hidden">Error:</span> {{ errorMessage }}
     </p>
     <div *ngFor="let accordion of accordions">

diff --git a/...rc/app/shared/directives/select-training-category/select-training-category.component.html b/...rc/app/shared/directives/select-training-category/select-training-category.component.html
@@ -14,7 +14,7 @@ <h1 class="govuk-fieldset__heading">{{ title }}</h1>
           [accordions]="trainingGroups"
           textShowHideAll="categories"
           [preFilledId]="preFilledId"
-          data-testid="accordian"
+          data-testid="groupedAccordion"
           [hasError]="submitted && error"
           [errorMessage]="formErrorsMap[0].type[0].message"
         ></app-grouped-radio-button-accordion>