Merge pull request #6470 from NMDSdevopsServiceAdm/fix/mandatory-trai…

…ning-accordions-snagging-list Fix/mandatory training accordions snagging list
NMDSdevopsServiceAdm · Jan 9, 2025 · 25b4337 · 25b4337
2 parents da07339 + b9c0fb4
commit 25b4337
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 79 deletions.
diff --git a/...ing/add-and-manage-mandatory-training/add-and-manage-mandatory-training.component.spec.ts b/...ing/add-and-manage-mandatory-training/add-and-manage-mandatory-training.component.spec.ts
@@ -70,6 +70,8 @@ describe('AddAndManageMandatoryTrainingComponent', () => {
     const routerSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
     const currentRoute = injector.inject(ActivatedRoute) as ActivatedRoute;
 
+    const mandatoryTrainingService = injector.inject(MandatoryTrainingService) as MandatoryTrainingService;
+
     return {
       ...setupTools,
       component,
@@ -78,6 +80,7 @@ describe('AddAndManageMandatoryTrainingComponent', () => {
       routerSpy,
       currentRoute,
       injector,
+      mandatoryTrainingService,
     };
   }
 
@@ -98,12 +101,15 @@ describe('AddAndManageMandatoryTrainingComponent', () => {
     );
   });
 
-  it("should navigate to the select-training-category page when 'Add a mandatory training category' link is clicked", async () => {
-    const { getByRole, routerSpy, currentRoute } = await setup();
+  it("should navigate to the select-training-category page and clear state in training service when 'Add a mandatory training category' link is clicked", async () => {
+    const { getByRole, routerSpy, currentRoute, mandatoryTrainingService } = await setup();
+
+    const resetStateSpy = spyOn(mandatoryTrainingService, 'resetState');
 
     const addMandatoryTrainingButton = getByRole('button', { name: 'Add a mandatory training category' });
     fireEvent.click(addMandatoryTrainingButton);
 
+    expect(resetStateSpy).toHaveBeenCalled();
     expect(routerSpy).toHaveBeenCalledWith(['select-training-category'], { relativeTo: currentRoute });
   });
 
@@ -184,19 +190,20 @@ describe('AddAndManageMandatoryTrainingComponent', () => {
     });
 
     it('should navigate to select-training-category and set mandatory training being edited in service when category link clicked', async () => {
-      const { getByText, existingMandatoryTraining, routerSpy, currentRoute, injector } = await setup();
+      const { getByText, existingMandatoryTraining, routerSpy, currentRoute, mandatoryTrainingService } = await setup();
 
-      const mandatoryTrainingService = injector.inject(MandatoryTrainingService) as MandatoryTrainingService;
       const setMandatoryTrainingBeingEditedSpy = spyOnProperty(
         mandatoryTrainingService,
         'mandatoryTrainingBeingEdited',
         'set',
       ).and.stub();
+      const resetStateSpy = spyOn(mandatoryTrainingService, 'resetState');
 
       existingMandatoryTraining.mandatoryTraining.forEach((trainingCategory) => {
         fireEvent.click(getByText(trainingCategory.category));
 
         expect(setMandatoryTrainingBeingEditedSpy).toHaveBeenCalledWith(trainingCategory);
+        expect(resetStateSpy).toHaveBeenCalled();
         expect(routerSpy).toHaveBeenCalledWith(['select-training-category'], {
           relativeTo: currentRoute,
         });

diff --git a/...training/add-and-manage-mandatory-training/add-and-manage-mandatory-training.component.ts b/...training/add-and-manage-mandatory-training/add-and-manage-mandatory-training.component.ts
@@ -42,6 +42,7 @@ export class AddAndManageMandatoryTrainingComponent implements OnInit {
 
   public navigateToAddNewMandatoryTraining(event: Event, mandatoryTrainingToEdit = null): void {
     event.preventDefault();
+    this.trainingService.resetState();
 
     if (mandatoryTrainingToEdit) {
       this.trainingService.mandatoryTrainingBeingEdited = mandatoryTrainingToEdit;

diff --git a/...atures/training-and-qualifications/add-mandatory-training/add-mandatory-routing.module.ts b/...atures/training-and-qualifications/add-mandatory-training/add-mandatory-routing.module.ts
@@ -14,50 +14,49 @@ import { SelectTrainingCategoryMandatoryComponent } from './select-training-cate
 const routes: Routes = [
   {
     path: '',
+    component: AddAndManageMandatoryTrainingComponent,
+    data: { title: 'List Mandatory Training' },
     resolve: {
       existingMandatoryTraining: MandatoryTrainingCategoriesResolver,
     },
     runGuardsAndResolvers: 'always',
+  },
+  {
+    path: 'select-training-category',
+    component: SelectTrainingCategoryMandatoryComponent,
+    data: { title: 'Select Training Category' },
+    resolve: {
+      trainingCategories: TrainingCategoriesResolver,
+      existingMandatoryTraining: MandatoryTrainingCategoriesResolver,
+    },
+  },
+  {
+    path: 'all-or-selected-job-roles',
+    component: AllOrSelectedJobRolesComponent,
+    data: { title: 'All or Selected Job Roles?' },
+  },
+  {
+    path: 'select-job-roles',
+    component: SelectJobRolesMandatoryComponent,
+    data: { title: 'Select Job Roles' },
+    resolve: { jobs: JobsResolver },
+  },
+  {
+    path: 'remove-all-mandatory-training',
+    component: RemoveAllMandatoryTrainingComponent,
+    data: { title: 'Remove All Mandatory Training' },
+  },
+  {
+    path: ':trainingCategoryId',
     children: [
       {
-        path: '',
-        component: AddAndManageMandatoryTrainingComponent,
-        data: { title: 'List Mandatory Training' },
-      },
-      {
-        path: 'select-training-category',
-        component: SelectTrainingCategoryMandatoryComponent,
-        data: { title: 'Select Training Category' },
+        path: 'delete-mandatory-training-category',
+        component: DeleteMandatoryTrainingCategoryComponent,
+        data: { title: 'Delete Mandatory Training Category' },
         resolve: {
-          trainingCategories: TrainingCategoriesResolver,
+          existingMandatoryTraining: MandatoryTrainingCategoriesResolver,
         },
       },
-      {
-        path: 'all-or-selected-job-roles',
-        component: AllOrSelectedJobRolesComponent,
-        data: { title: 'All or Selected Job Roles?' },
-      },
-      {
-        path: 'select-job-roles',
-        component: SelectJobRolesMandatoryComponent,
-        data: { title: 'Select Job Roles' },
-        resolve: { jobs: JobsResolver },
-      },
-      {
-        path: 'remove-all-mandatory-training',
-        component: RemoveAllMandatoryTrainingComponent,
-        data: { title: 'Remove All Mandatory Training' },
-      },
-      {
-        path: ':trainingCategoryId',
-        children: [
-          {
-            path: 'delete-mandatory-training-category',
-            component: DeleteMandatoryTrainingCategoryComponent,
-            data: { title: 'Delete Mandatory Training Category' },
-          },
-        ],
-      },
     ],
   },
 ];

diff --git a/...-mandatory-training/all-or-selected-job-roles/all-or-selected-job-roles.component.spec.ts b/...-mandatory-training/all-or-selected-job-roles/all-or-selected-job-roles.component.spec.ts
@@ -300,6 +300,7 @@ describe('AllOrSelectedJobRolesComponent', () => {
         const { fixture, getByText, alertSpy } = await setup();
 
         selectAllJobRolesAndSubmit(fixture, getByText);
+        await fixture.whenStable();
 
         expect(alertSpy).toHaveBeenCalledWith({
           type: 'success',
@@ -379,12 +380,13 @@ describe('AllOrSelectedJobRolesComponent', () => {
       });
 
       it("should display 'Mandatory training category updated' banner when All job roles selected", async () => {
-        const { getByText, alertSpy } = await setup({
+        const { fixture, getByText, alertSpy } = await setup({
           mandatoryTrainingBeingEdited,
           allJobRolesCount: mandatoryTrainingBeingEdited.jobs.length,
         });
 
         fireEvent.click(getByText('Continue'));
+        await fixture.whenStable();
 
         expect(alertSpy).toHaveBeenCalledWith({
           type: 'success',

diff --git a/...s/add-mandatory-training/all-or-selected-job-roles/all-or-selected-job-roles.component.ts b/...s/add-mandatory-training/all-or-selected-job-roles/all-or-selected-job-roles.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ErrorDetails } from '@core/model/errorSummary.model';
@@ -16,7 +16,7 @@ import { Subscription } from 'rxjs';
   selector: 'app-all-or-selected-job-roles',
   templateUrl: './all-or-selected-job-roles.component.html',
 })
-export class AllOrSelectedJobRolesComponent {
+export class AllOrSelectedJobRolesComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('formEl') formEl: ElementRef;
   public form: UntypedFormGroup;
   public submitted = false;
@@ -79,8 +79,8 @@ export class AllOrSelectedJobRolesComponent {
     this.router.navigate(['../', 'select-job-roles'], { relativeTo: this.route });
   }
 
-  private navigateBackToAddMandatoryTrainingPage(): void {
-    this.router.navigate(['../'], { relativeTo: this.route });
+  private navigateBackToAddMandatoryTrainingPage(): Promise<boolean> {
+    return this.router.navigate(['../'], { relativeTo: this.route });
   }
 
   public selectRadio(selectedRadio: string): void {
@@ -109,12 +109,13 @@ export class AllOrSelectedJobRolesComponent {
     this.subscriptions.add(
       this.establishmentService.createAndUpdateMandatoryTraining(this.establishment.uid, props).subscribe(
         () => {
-          this.navigateBackToAddMandatoryTrainingPage();
           this.trainingService.resetState();
 
-          this.alertService.addAlert({
-            type: 'success',
-            message: `Mandatory training category ${this.mandatoryTrainingBeingEdited ? 'updated' : 'added'}`,
+          this.navigateBackToAddMandatoryTrainingPage().then(() => {
+            this.alertService.addAlert({
+              type: 'success',
+              message: `Mandatory training category ${this.mandatoryTrainingBeingEdited ? 'updated' : 'added'}`,
+            });
           });
         },
         () => {

diff --git a/...g/delete-mandatory-training-category/delete-mandatory-training-category.component.spec.ts b/...g/delete-mandatory-training-category/delete-mandatory-training-category.component.spec.ts
@@ -11,9 +11,7 @@ import { establishmentBuilder } from '@core/test-utils/MockEstablishmentService'
 import { MockRouter } from '@core/test-utils/MockRouter';
 import { MockTrainingCategoryService } from '@core/test-utils/MockTrainingCategoriesService';
 import { mockMandatoryTraining, MockTrainingService } from '@core/test-utils/MockTrainingService';
-import {
-  AddMandatoryTrainingModule,
-} from '@features/training-and-qualifications/add-mandatory-training/add-mandatory-training.module';
+import { AddMandatoryTrainingModule } from '@features/training-and-qualifications/add-mandatory-training/add-mandatory-training.module';
 import { SharedModule } from '@shared/shared.module';
 import { fireEvent, render } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
@@ -148,9 +146,11 @@ describe('DeleteMandatoryTrainingCategoryComponent', () => {
     });
 
     it("should display a success banner with 'Mandatory training category removed'", async () => {
-      const { alertSpy, getByText } = await setup();
+      const { fixture, alertSpy, getByText } = await setup();
 
       fireEvent.click(getByText('Remove category'));
+      await fixture.whenStable();
+
       expect(alertSpy).toHaveBeenCalledWith({
         type: 'success',
         message: 'Mandatory training category removed',

diff --git a/...aining/delete-mandatory-training-category/delete-mandatory-training-category.component.ts b/...aining/delete-mandatory-training-category/delete-mandatory-training-category.component.ts
@@ -50,17 +50,18 @@ export class DeleteMandatoryTrainingCategoryComponent implements OnInit, OnDestr
       this.trainingService
         .deleteCategoryById(this.establishment.id, this.selectedCategory.trainingCategoryId)
         .subscribe(() => {
-          this.navigateBackToMandatoryTrainingHomePage();
-          this.alertService.addAlert({
-            type: 'success',
-            message: 'Mandatory training category removed',
+          this.navigateBackToMandatoryTrainingHomePage().then(() => {
+            this.alertService.addAlert({
+              type: 'success',
+              message: 'Mandatory training category removed',
+            });
           });
         }),
     );
   }
 
-  public navigateBackToMandatoryTrainingHomePage(): void {
-    this.router.navigate(['/workplace', this.establishment.uid, 'add-and-manage-mandatory-training']);
+  public navigateBackToMandatoryTrainingHomePage(): Promise<boolean> {
+    return this.router.navigate(['/workplace', this.establishment.uid, 'add-and-manage-mandatory-training']);
   }
 
   ngOnDestroy(): void {

diff --git a/...datory-training/delete-mandatory-training/delete-all-mandatory-training.component.spec.ts b/...datory-training/delete-mandatory-training/delete-all-mandatory-training.component.spec.ts
@@ -119,6 +119,19 @@ describe('RemoveAllMandatoryTrainingComponent', () => {
 
       expect(routerSpy).toHaveBeenCalledWith(['/workplace', establishment.uid, 'add-and-manage-mandatory-training']);
     });
+
+    it("should display a success banner with 'All mandatory training categories removed'", async () => {
+      const { fixture, alertSpy, getByText } = await setup();
+
+      const submitButton = getByText('Remove categories');
+      fireEvent.click(submitButton);
+      await fixture.whenStable();
+
+      expect(alertSpy).toHaveBeenCalledWith({
+        type: 'success',
+        message: 'All mandatory training categories removed',
+      });
+    });
   });
 
   it('should return to the add-and-manage-mandatory-training when Cancel is clicked', async () => {

diff --git a/...d-mandatory-training/delete-mandatory-training/delete-all-mandatory-training.component.ts b/...d-mandatory-training/delete-mandatory-training/delete-all-mandatory-training.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Establishment } from '@core/model/establishment.model';
 import { AlertService } from '@core/services/alert.service';
@@ -11,9 +11,10 @@ import { Subscription } from 'rxjs';
   selector: 'app-remove-all-selections-dialog',
   templateUrl: './delete-all-mandatory-training.component.html',
 })
-export class RemoveAllMandatoryTrainingComponent implements OnInit {
+export class RemoveAllMandatoryTrainingComponent implements OnInit, OnDestroy {
   public establishment: Establishment;
   private subscriptions: Subscription = new Subscription();
+
   constructor(
     protected backLinkService: BackLinkService,
     private trainingService: TrainingService,
@@ -31,16 +32,21 @@ export class RemoveAllMandatoryTrainingComponent implements OnInit {
   public deleteMandatoryTraining(): void {
     this.subscriptions.add(
       this.trainingService.deleteAllMandatoryTraining(this.establishment.id).subscribe(() => {
-        this.navigateToPreviousPage();
-        this.alertService.addAlert({
-          type: 'success',
-          message: 'All mandatory training categories removed',
+        this.navigateToPreviousPage().then(() => {
+          this.alertService.addAlert({
+            type: 'success',
+            message: 'All mandatory training categories removed',
+          });
         });
       }),
     );
   }
 
-  public navigateToPreviousPage(): void {
-    this.router.navigate(['/workplace', this.establishment.uid, 'add-and-manage-mandatory-training']);
+  public navigateToPreviousPage(): Promise<boolean> {
+    return this.router.navigate(['/workplace', this.establishment.uid, 'add-and-manage-mandatory-training']);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 }
diff --git a/...andatory-training/select-job-roles-mandatory/select-job-roles-mandatory.component.spec.ts b/...andatory-training/select-job-roles-mandatory/select-job-roles-mandatory.component.spec.ts
@@ -196,6 +196,7 @@ describe('SelectJobRolesMandatoryComponent', () => {
       const { fixture, getByText, alertSpy } = await setup();
 
       selectJobRolesAndSave(fixture, getByText);
+      await fixture.whenStable();
 
       expect(alertSpy).toHaveBeenCalledWith({
         type: 'success',
@@ -400,11 +401,12 @@ describe('SelectJobRolesMandatoryComponent', () => {
       const jobs = [mockAvailableJobs[0], mockAvailableJobs[1]];
       const mandatoryTrainingBeingEdited = createMandatoryTrainingBeingEdited(jobs);
 
-      const { getByText, alertSpy } = await setup({
+      const { fixture, getByText, alertSpy } = await setup({
         mandatoryTrainingBeingEdited,
       });
 
       userEvent.click(getByText('Save mandatory training'));
+      await fixture.whenStable();
 
       expect(alertSpy).toHaveBeenCalledWith({
         type: 'success',

diff --git a/...add-mandatory-training/select-job-roles-mandatory/select-job-roles-mandatory.component.ts b/...add-mandatory-training/select-job-roles-mandatory/select-job-roles-mandatory.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ErrorDetails } from '@core/model/errorSummary.model';
@@ -19,7 +19,7 @@ import { Subscription } from 'rxjs';
   selector: 'app-select-job-roles-mandatory',
   templateUrl: './select-job-roles-mandatory.component.html',
 })
-export class SelectJobRolesMandatoryComponent {
+export class SelectJobRolesMandatoryComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     private formBuilder: UntypedFormBuilder,
     private trainingService: MandatoryTrainingService,
@@ -119,12 +119,13 @@ export class SelectJobRolesMandatoryComponent {
     this.subscriptions.add(
       this.establishmentService.createAndUpdateMandatoryTraining(this.establishment.uid, props).subscribe(
         () => {
-          this.navigateBackToAddMandatoryTrainingPage();
           this.trainingService.resetState();
 
-          this.alertService.addAlert({
-            type: 'success',
-            message: `Mandatory training category ${this.mandatoryTrainingBeingEdited ? 'updated' : 'added'}`,
+          this.navigateBackToAddMandatoryTrainingPage().then(() => {
+            this.alertService.addAlert({
+              type: 'success',
+              message: `Mandatory training category ${this.mandatoryTrainingBeingEdited ? 'updated' : 'added'}`,
+            });
           });
         },
         () => {
@@ -170,8 +171,8 @@ export class SelectJobRolesMandatoryComponent {
     this.navigateBackToAddMandatoryTrainingPage();
   }
 
-  private navigateBackToAddMandatoryTrainingPage(): void {
-    this.router.navigate(['../'], { relativeTo: this.route });
+  private navigateBackToAddMandatoryTrainingPage(): Promise<boolean> {
+    return this.router.navigate(['../'], { relativeTo: this.route });
   }
 
   ngAfterViewInit(): void {