test(tests): created tests for all account settings components

Author: dinlvkdn

jest.config.js

@@ -34,7 +34,6 @@ module.exports = {
     '<rootDir>/src/app/features/registry/',
     '<rootDir>/src/app/features/project/',
     '<rootDir>/src/app/features/registries/',
-    '<rootDir>/src/app/features/settings/',
     '<rootDir>/src/app/shared/',
   ],
 };

src/app/features/settings/account-settings/components/add-email/add-email.component.spec.ts

@@ -1,4 +1,4 @@
-import { provideStore } from '@ngxs/store';
+import { provideStore, Store } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 import { MockPipe, MockProviders } from 'ng-mocks';
@@ -9,31 +9,47 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { TranslateServiceMock } from '@shared/mocks';
+import { ToastService } from '@shared/services';
+
 import { AccountSettingsState } from '../../store';
 
 import { AddEmailComponent } from './add-email.component';
 
 describe('AddEmailComponent', () => {
   let component: AddEmailComponent;
   let fixture: ComponentFixture<AddEmailComponent>;
+  let store: Store;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AddEmailComponent, MockPipe(TranslatePipe)],
       providers: [
         provideStore([AccountSettingsState]),
+        MockProviders(DynamicDialogRef, ToastService),
+        TranslateServiceMock,
         provideHttpClient(),
         provideHttpClientTesting(),
-        MockProviders(DynamicDialogRef),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AddEmailComponent);
     component = fixture.componentInstance;
+
+    store = TestBed.inject(Store);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not call action addEmail when email is invalid', () => {
+    const actionSpy = jest.spyOn(store, 'dispatch');
+
+    component.addEmail();
+
+    expect(actionSpy).not.toHaveBeenCalled();
+  });
 });

src/app/features/settings/account-settings/components/affiliated-institutions/affiliated-institutions.component.spec.ts

@@ -1,13 +1,17 @@
-import { provideStore } from '@ngxs/store';
+import { provideStore, Store } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe } from 'ng-mocks';
+import { MockPipe, MockProviders } from 'ng-mocks';
+
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UserState } from '@osf/core/store/user';
+import { MOCK_INSTITUTION } from '@shared/mocks/institution.mock';
+import { CustomConfirmationService, ToastService } from '@shared/services';
 
 import { AccountSettingsState } from '../../store';
 
@@ -16,19 +20,53 @@ import { AffiliatedInstitutionsComponent } from './affiliated-institutions.compo
 describe('AffiliatedInstitutionsComponent', () => {
   let component: AffiliatedInstitutionsComponent;
   let fixture: ComponentFixture<AffiliatedInstitutionsComponent>;
+  let confirmationService: CustomConfirmationService;
+  let store: Store;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AffiliatedInstitutionsComponent, MockPipe(TranslatePipe)],
-      providers: [provideStore([AccountSettingsState, UserState]), provideHttpClient(), provideHttpClientTesting()],
+      providers: [
+        provideStore([AccountSettingsState, UserState]),
+        MockProviders(CustomConfirmationService, ToastService, DynamicDialogRef),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AffiliatedInstitutionsComponent);
     component = fixture.componentInstance;
+
+    confirmationService = TestBed.inject(CustomConfirmationService);
+    store = TestBed.inject(Store);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call deleteInstitution on confirmation', () => {
+    jest.spyOn(confirmationService, 'confirmDelete').mockImplementation(({ onConfirm }) => {
+      onConfirm();
+    });
+
+    component.deleteInstitution(MOCK_INSTITUTION);
+
+    expect(confirmationService.confirmDelete).toHaveBeenCalled();
+  });
+
+  it('should not dispatch delete when user cancels confirmation', () => {
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    jest.spyOn(confirmationService, 'confirmDelete').mockImplementation(() => {
+      // Simulate cancelling the confirmation
+    });
+
+    component.deleteInstitution(MOCK_INSTITUTION);
+
+    expect(confirmationService.confirmDelete).toHaveBeenCalled();
+    expect(dispatchSpy).not.toHaveBeenCalled();
+  });
 });

src/app/features/settings/account-settings/components/cancel-deactivation/cancel-deactivation.component.spec.ts

@@ -36,4 +36,11 @@ describe('CancelDeactivationComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should close the dialog with true when cancelDeactivation is called', () => {
+    const dialogRef = TestBed.inject(DynamicDialogRef);
+    jest.spyOn(dialogRef, 'close');
+    component.cancelDeactivation();
+    expect(dialogRef.close).toHaveBeenCalledWith(true);
+  });
 });

src/app/features/settings/account-settings/components/change-password/change-password.component.spec.ts

@@ -1,19 +1,25 @@
-import { provideStore } from '@ngxs/store';
+import { provideStore, Store } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { MockPipe, MockProvider } from 'ng-mocks';
 
-import { provideHttpClient } from '@angular/common/http';
+import { of, throwError } from 'rxjs';
+
+import { HttpErrorResponse, provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { TranslateServiceMock } from '@shared/mocks';
+import { LoaderService, ToastService } from '@shared/services';
+
 import { AccountSettingsState } from '../../store';
 
 import { ChangePasswordComponent } from './change-password.component';
 
 describe('ChangePasswordComponent', () => {
   let component: ChangePasswordComponent;
   let fixture: ComponentFixture<ChangePasswordComponent>;
+  let store: Store;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -22,16 +28,47 @@ describe('ChangePasswordComponent', () => {
         provideStore([AccountSettingsState]),
         provideHttpClient(),
         provideHttpClientTesting(),
-        MockProvider(TranslateService),
+        TranslateServiceMock,
+        MockProvider(LoaderService),
+        MockProvider(ToastService),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChangePasswordComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(Store);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should change password  when form is valid', () => {
+    component.passwordForm.setValue({
+      oldPassword: 'Oldpass1!',
+      newPassword: 'Newpass1!',
+      confirmPassword: 'Newpass1!',
+    });
+    const dispatchSpy = jest.spyOn(store, 'dispatch').mockReturnValue(of());
+    component.changePassword();
+    expect(dispatchSpy).toHaveBeenCalled();
+  });
+
+  it('should display error message when backend returns error', () => {
+    component.passwordForm.setValue({
+      oldPassword: 'Oldpass1!',
+      newPassword: 'Newpass1!',
+      confirmPassword: 'Newpass1!',
+    });
+    const errorDetail = 'Current password is incorrect';
+    const httpError = new HttpErrorResponse({
+      status: 400,
+      error: { errors: [{ detail: errorDetail }] },
+    });
+    jest.spyOn(store, 'dispatch').mockReturnValue(throwError(() => httpError));
+    component.changePassword();
+    expect(component['errorMessage']()).toBe(errorDetail);
+  });
 });

src/app/features/settings/account-settings/components/confirmation-sent-dialog/confirmation-sent-dialog.component.spec.ts

@@ -1,16 +1,12 @@
-import { provideStore } from '@ngxs/store';
-
 import { TranslatePipe } from '@ngx-translate/core';
 import { MockPipe, MockProviders } from 'ng-mocks';
 
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AccountSettingsState } from '@osf/features/settings/account-settings/store';
-
 import { ConfirmationSentDialogComponent } from './confirmation-sent-dialog.component';
 
 describe('ConfirmationSentDialogComponent', () => {
@@ -21,10 +17,9 @@ describe('ConfirmationSentDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ConfirmationSentDialogComponent, MockPipe(TranslatePipe)],
       providers: [
-        provideStore([AccountSettingsState]),
+        MockProviders(DynamicDialogRef, DynamicDialogConfig),
         provideHttpClient(),
         provideHttpClientTesting(),
-        MockProviders(DynamicDialogRef),
       ],
     }).compileComponents();