Test/382 profile settings

src/app/features/auth/pages/reset-password/reset-password.component.spec.ts

@@ -1,13 +1,11 @@
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { MockComponent, MockPipe } from 'ng-mocks';
 
-import { of } from 'rxjs';
-
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { ResetPasswordComponent } from '@osf/features/auth/pages';
 import { PasswordInputHintComponent } from '@osf/shared/components';
-
-import { ResetPasswordComponent } from './reset-password.component';
+import { TranslateServiceMock } from '@osf/shared/mocks';
 
 describe('ResetPasswordComponent', () => {
   let component: ResetPasswordComponent;
@@ -20,20 +18,7 @@ describe('ResetPasswordComponent', () => {
         MockComponent(PasswordInputHintComponent),
         MockPipe(TranslatePipe, (value) => value),
       ],
-      providers: [
-        {
-          provide: TranslateService,
-          useValue: {
-            get: () => of(''),
-            instant: (key: string) => key,
-            onLangChange: of({ lang: 'en' }),
-            onTranslationChange: of({ translations: {} }),
-            onDefaultLangChange: of({ lang: 'en' }),
-            setDefaultLang: jest.fn(),
-            use: jest.fn(),
-          },
-        },
-      ],
+      providers: [TranslateServiceMock],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ResetPasswordComponent);

src/app/features/settings/profile-settings/components/citation-preview/citation-preview.component.spec.ts

@@ -1,18 +1,32 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipes } from 'ng-mocks';
+
+import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { MOCK_USER } from '@osf/shared/mocks';
+import { CitationFormatPipe } from '@shared/pipes';
+
 import { CitationPreviewComponent } from './citation-preview.component';
 
 describe('CitationPreviewComponent', () => {
   let component: CitationPreviewComponent;
+  let componentRef: ComponentRef<CitationPreviewComponent>;
   let fixture: ComponentFixture<CitationPreviewComponent>;
 
+  const mockUser = MOCK_USER;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CitationPreviewComponent],
+      imports: [CitationPreviewComponent, MockPipes(TranslatePipe, CitationFormatPipe)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CitationPreviewComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+
+    componentRef.setInput('currentUser', mockUser);
+
     fixture.detectChanges();
   });
 

src/app/features/settings/profile-settings/components/education-form/education-form.component.spec.ts

@@ -1,18 +1,42 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockComponent, MockPipe } from 'ng-mocks';
+
+import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { MOCK_EDUCATION } from '@osf/shared/mocks';
+import { TextInputComponent } from '@shared/components';
 
 import { EducationFormComponent } from './education-form.component';
 
 describe('EducationFormComponent', () => {
   let component: EducationFormComponent;
+  let componentRef: ComponentRef<EducationFormComponent>;
   let fixture: ComponentFixture<EducationFormComponent>;
+  let mockFormGroup: FormGroup;
 
   beforeEach(async () => {
+    mockFormGroup = new FormGroup({
+      institution: new FormControl(MOCK_EDUCATION[0].institution),
+      department: new FormControl(MOCK_EDUCATION[0].department),
+      degree: new FormControl(MOCK_EDUCATION[0].degree),
+      startDate: new FormControl(new Date(2021, 8, 1)),
+      endDate: new FormControl(new Date(2025, 4, 1)),
+      ongoing: new FormControl(false),
+    });
+
     await TestBed.configureTestingModule({
-      imports: [EducationFormComponent],
+      imports: [EducationFormComponent, MockPipe(TranslatePipe), MockComponent(TextInputComponent)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(EducationFormComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+
+    componentRef.setInput('group', mockFormGroup);
+    componentRef.setInput('index', 0);
+
     fixture.detectChanges();
   });
 

src/app/features/settings/profile-settings/components/education/education.component.spec.ts

@@ -7,42 +7,139 @@ import { of } from 'rxjs';
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MOCK_STORE } from '@shared/mocks';
+import { UpdateProfileSettingsEducation, UserSelectors } from '@core/store/user';
+import {
+  CustomConfirmationServiceMock,
+  MOCK_EDUCATION,
+  MockCustomConfirmationServiceProvider,
+  TranslateServiceMock,
+} from '@osf/shared/mocks';
+import { ToastService } from '@shared/services';
 
 import { EducationComponent } from './education.component';
 
 describe('EducationComponent', () => {
   let component: EducationComponent;
   let fixture: ComponentFixture<EducationComponent>;
 
-  beforeEach(async () => {
-    const store = MOCK_STORE;
-    store.selectSignal.mockImplementation(() => {
-      return signal([]);
-    });
-    store.dispatch.mockImplementation(() => {
-      return of();
-    });
+  const mockStore = {
+    selectSignal: jest.fn().mockImplementation((selector) => {
+      if (selector === UserSelectors.getEducation) {
+        return () => MOCK_EDUCATION;
+      }
+      return () => null;
+    }),
+    dispatch: jest.fn().mockReturnValue(of({})),
+  };
 
+  beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [EducationComponent, MockPipe(TranslatePipe)],
       providers: [
+        TranslateServiceMock,
+        MockCustomConfirmationServiceProvider,
+        MockProvider(ToastService),
+        MockProvider(Store, mockStore),
         provideHttpClient(),
         provideHttpClientTesting(),
-        MockProvider(TranslatePipe),
-        MockProvider(Store, store),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(EducationComponent);
     component = fixture.componentInstance;
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should handle invalid index in removeEducation method', () => {
+    const initialLength = component.educations.length;
+
+    component.removeEducation(100);
+
+    expect(component.educations.length).toBe(initialLength);
+  });
+
+  it('should not add education when form is invalid', () => {
+    component.educations.at(0).get('institution')?.setValue('');
+    component.educations.at(0).get('institution')?.updateValueAndValidity();
+    const initialLength = component.educations.length;
+
+    expect(component.educationForm.invalid).toBe(true);
+
+    component.addEducation();
+
+    expect(component.educations.length).toBe(initialLength);
+  });
+
+  it('should add new education form when form is valid', () => {
+    const initialLength = component.educations.length;
+
+    component.addEducation();
+
+    expect(component.educations.length).toBe(initialLength + 1);
+
+    const newEducation = component.educations.at(initialLength);
+    expect(newEducation).toBeDefined();
+    expect(newEducation.get('institution')?.value).toBe('');
+    expect(newEducation.get('department')?.value).toBe('');
+    expect(newEducation.get('degree')?.value).toBe('');
+    expect(newEducation.get('startDate')?.value).toBe(null);
+    expect(newEducation.get('endDate')?.value).toBe(null);
+    expect(newEducation.get('ongoing')?.value).toBe(false);
+  });
+
+  it('should detect changes when form field is modified', () => {
+    component.educations.at(0).get('institution')?.setValue('New Institution');
+
+    component.discardChanges();
+
+    expect(CustomConfirmationServiceMock.confirmDelete).toHaveBeenCalled();
+  });
+
+  it('should mark all fields as touched when form is invalid', () => {
+    component.educations.at(0).get('institution')?.setValue('');
+    component.educations.at(1).get('degree')?.setValue('');
+
+    component.saveEducation();
+
+    expect(component.educationForm.touched).toBe(true);
+    expect(component.educations.at(0).get('institution')?.touched).toBe(true);
+    expect(component.educations.at(1).get('degree')?.touched).toBe(true);
+  });
+
+  it('should map form data to correct education format', () => {
+    const education = component.educations.at(0);
+    education.get('institution')?.setValue('Test University');
+    education.get('department')?.setValue('Engineering');
+    education.get('degree')?.setValue('Bachelor');
+    education.get('startDate')?.setValue(new Date(2020, 0));
+    education.get('endDate')?.setValue(new Date(2024, 5));
+    education.get('ongoing')?.setValue(false);
+
+    component.saveEducation();
+
+    expect(mockStore.dispatch).toHaveBeenCalledWith(
+      new UpdateProfileSettingsEducation({
+        education: [
+          {
+            institution: 'Test University',
+            department: 'Engineering',
+            degree: 'Bachelor',
+            startYear: 2020,
+            startMonth: 1,
+            endYear: 2024,
+            endMonth: 6,
+            ongoing: false,
+          },
+          expect.any(Object),
+        ],
+      })
+    );
+  });
 });

src/app/features/settings/profile-settings/components/employment-form/employment-form.component.spec.ts

@@ -1,18 +1,41 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockComponent, MockPipe } from 'ng-mocks';
+
+import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { MOCK_EDUCATION, MOCK_EMPLOYMENT } from '@osf/shared/mocks';
+import { TextInputComponent } from '@shared/components';
 
 import { EmploymentFormComponent } from './employment-form.component';
 
 describe('EmploymentFormComponent', () => {
   let component: EmploymentFormComponent;
+  let componentRef: ComponentRef<EmploymentFormComponent>;
   let fixture: ComponentFixture<EmploymentFormComponent>;
+  let mockFormGroup: FormGroup;
 
   beforeEach(async () => {
+    mockFormGroup = new FormGroup({
+      title: new FormControl(MOCK_EMPLOYMENT[0].title),
+      institution: new FormControl(MOCK_EDUCATION[0].institution),
+      department: new FormControl(MOCK_EDUCATION[0].department),
+      startDate: new FormControl(new Date(2021, 8, 1)),
+      endDate: new FormControl(new Date(2025, 4, 1)),
+      ongoing: new FormControl(false),
+    });
+
     await TestBed.configureTestingModule({
-      imports: [EmploymentFormComponent],
+      imports: [EmploymentFormComponent, MockPipe(TranslatePipe), MockComponent(TextInputComponent)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(EmploymentFormComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+
+    componentRef.setInput('group', mockFormGroup);
+    componentRef.setInput('index', 0);
     fixture.detectChanges();
   });