Merge pull request #122 from CenterForOpenScience/test/fixed-unit-tests

fix(unit-tests): fixed unit tests

Author: nsemets

jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
     '^@core/(.*)$': '<rootDir>/src/app/core/$1',
     '^@shared/(.*)$': '<rootDir>/src/app/shared/$1',
     '^@styles/(.*)$': '<rootDir>/assets/styles/$1',
+    '^src/environments/environment$': '<rootDir>/src/environments/environment.ts',
   },
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

src/app/app.component.spec.ts

@@ -1,12 +1,15 @@
 import { provideStore, Store } from '@ngxs/store';
 
+import { MockComponents } from 'ng-mocks';
+
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { GetCurrentUser, UserState } from '@core/store/user';
 
+import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
@@ -15,7 +18,7 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [AppComponent, ...MockComponents(ToastComponent, FullScreenLoaderComponent)],
       providers: [provideStore([UserState]), provideHttpClient(), provideHttpClientTesting()],
     }).compileComponents();
 

src/app/core/components/header/header.component.spec.ts

@@ -1,12 +1,15 @@
-import { provideStore } from '@ngxs/store';
+import { Store } from '@ngxs/store';
 
-import { MockComponent } from 'ng-mocks';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
 
 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 { UserState } from '@osf/core/store/user';
+import { UserSelectors } from '@osf/core/store/user';
+import { MOCK_STORE, MOCK_USER } from '@osf/shared/mocks';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 
@@ -17,9 +20,14 @@ describe('HeaderComponent', () => {
   let fixture: ComponentFixture<HeaderComponent>;
 
   beforeEach(async () => {
+    MOCK_STORE.selectSignal.mockImplementation((selector) => {
+      if (selector === UserSelectors.getCurrentUser) return () => signal(MOCK_USER);
+      return () => null;
+    });
+
     await TestBed.configureTestingModule({
-      imports: [HeaderComponent, MockComponent(BreadcrumbComponent)],
-      providers: [provideStore([UserState]), provideHttpClient(), provideHttpClientTesting()],
+      imports: [HeaderComponent, MockComponent(BreadcrumbComponent), MockPipe(TranslatePipe)],
+      providers: [MockProvider(Store, MOCK_STORE), provideHttpClient(), provideHttpClientTesting()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);

src/app/core/components/header/header.component.ts

@@ -1,14 +1,11 @@
-import { Store } from '@ngxs/store';
+import { select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { ButtonModule } from 'primeng/button';
 import { MenuModule } from 'primeng/menu';
 
-import { map } from 'rxjs';
-
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
@@ -22,24 +19,16 @@ import { UserSelectors } from '@core/store/user/user.selectors';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
-  readonly #store = inject(Store);
-  readonly #router = inject(Router);
-  readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
+  currentUser = select(UserSelectors.getCurrentUser);
+
+  private readonly router = inject(Router);
 
   items = [
     {
       label: 'navigation.myProfile',
-      command: () => this.#router.navigate(['my-profile']),
+      command: () => this.router.navigate(['my-profile']),
     },
     { label: 'navigation.settings', command: () => console.log('Settings') },
     { label: 'navigation.logOut', command: () => console.log('Log out') },
   ];
-
-  #currentUrl = toSignal(this.#router.events.pipe(map(() => this.#router.url)));
-
-  protected readonly authButtonText = computed(() =>
-    this.#currentUrl()?.includes('sign-up') ? 'navigation.signIn' : 'navigation.signUp'
-  );
-
-  protected readonly authButtonLink = computed(() => (this.#currentUrl()?.includes('sign-up') ? '/login' : '/sign-up'));
 }

src/app/core/components/root/root.component.spec.ts

@@ -77,15 +77,6 @@ describe('RootComponent', () => {
     expect(tabletLayout).toBeTruthy();
   });
 
-  it('should show breadcrumb in tablet layout when not mobile', () => {
-    isWebSubject.next(false);
-    isMobileSubject.next(false);
-    fixture.detectChanges();
-
-    const breadcrumb = fixture.nativeElement.querySelector('osf-breadcrumb');
-    expect(breadcrumb).toBeTruthy();
-  });
-
   it('should hide breadcrumb in tablet layout when mobile', () => {
     isWebSubject.next(false);
     isMobileSubject.next(true);

src/app/features/my-profile/my-profile.component.spec.ts

@@ -1,9 +1,7 @@
 import { Store } from '@ngxs/store';
 
-import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
-
-import { Button } from 'primeng/button';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockComponents, MockPipe, MockProvider } from 'ng-mocks';
 
 import { BehaviorSubject, of } from 'rxjs';
 
@@ -12,53 +10,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
-import { IS_XSMALL } from '@osf/shared/utils';
-
-import { ResetFiltersState } from '../search/components/resource-filters/store';
-import { SearchComponent } from '../search/search.component';
-import { ResetSearchState } from '../search/store';
+import { EducationHistoryComponent, EmploymentHistoryComponent } from '@osf/shared/components';
+import { MOCK_USER } from '@osf/shared/mocks';
+import { IS_MEDIUM } from '@osf/shared/utils';
 
+import { MyProfileSearchComponent } from './components';
 import { MyProfileComponent } from './my-profile.component';
-import { SetIsMyProfile } from './store';
 
 describe('MyProfileComponent', () => {
   let component: MyProfileComponent;
   let fixture: ComponentFixture<MyProfileComponent>;
   let store: Partial<Store>;
   let router: Partial<Router>;
-  let isXSmallSubject: BehaviorSubject<boolean>;
+  let isMediumSubject: BehaviorSubject<boolean>;
 
-  const mockUser = {
-    id: '1',
-    fullName: 'John Doe',
-    email: 'john@example.com',
-    givenName: 'John',
-    familyName: 'Doe',
-    middleNames: '',
-    suffix: '',
-    dateRegistered: '2024-01-01',
-    employment: [
-      {
-        title: 'Software Engineer',
-        institution: 'Tech Corp',
-        startDate: '2020-01-01',
-        endDate: null,
-      },
-    ],
-    education: [
-      {
-        degree: 'Bachelor of Science',
-        institution: 'University of Technology',
-        startDate: '2016-01-01',
-        endDate: '2020-01-01',
-        ongoing: false,
-      },
-    ],
-    socials: {
-      orcid: '0000-0000-0000-0000',
-    },
-    link: 'https://example.com/profile',
-  };
+  const mockUser = MOCK_USER;
 
   beforeEach(async () => {
     store = {
@@ -70,14 +36,19 @@ describe('MyProfileComponent', () => {
       navigate: jest.fn(),
     };
 
-    isXSmallSubject = new BehaviorSubject<boolean>(false);
+    isMediumSubject = new BehaviorSubject<boolean>(false);
 
     await TestBed.configureTestingModule({
-      imports: [MyProfileComponent, MockModule(TranslateModule), MockComponent(Button), MockComponent(SearchComponent)],
+      imports: [
+        MyProfileComponent,
+        MockPipe(TranslatePipe),
+        ...MockComponents(MyProfileSearchComponent, EducationHistoryComponent, EmploymentHistoryComponent),
+      ],
       providers: [
         MockProvider(Store, store),
         MockProvider(Router, router),
-        { provide: IS_XSMALL, useValue: isXSmallSubject },
+        MockProvider(TranslateService),
+        MockProvider(IS_MEDIUM, isMediumSubject),
       ],
     }).compileComponents();
 
@@ -95,24 +66,8 @@ describe('MyProfileComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['settings/profile-settings']);
   });
 
-  it('should handle mobile view correctly', () => {
-    isXSmallSubject.next(true);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement;
-    const editButton = compiled.querySelector('.btn-full-width');
-    expect(editButton).toBeTruthy();
-  });
-
-  it('should clean up store state on destroy', () => {
-    component.ngOnDestroy();
-    expect(store.dispatch).toHaveBeenCalledWith(ResetFiltersState);
-    expect(store.dispatch).toHaveBeenCalledWith(ResetSearchState);
-    expect(store.dispatch).toHaveBeenCalledWith(new SetIsMyProfile(false));
-  });
-
   it('should render search component', () => {
-    const searchComponent = fixture.debugElement.query(By.directive(SearchComponent));
+    const searchComponent = fixture.debugElement.query(By.directive(MyProfileSearchComponent));
     expect(searchComponent).toBeTruthy();
   });
 });

src/app/features/my-projects/my-projects.component.spec.ts

@@ -40,8 +40,8 @@ describe('MyProjectsComponent', () => {
         MockProvider(DialogService),
         MockProvider(ActivatedRoute, { queryParams: of({}) }),
         MockProvider(IS_XSMALL, isXSmallSubject),
-        MockProvider(IS_MEDIUM, isXSmallSubject),
-        MockProvider(IS_WEB, isXSmallSubject),
+        MockProvider(IS_MEDIUM, isMediumSubject),
+        MockProvider(IS_WEB, isWebSubject),
       ],
     }).compileComponents();
 

src/app/features/preprints/components/filters/preprints-creators-filter/preprints-creators-filter.component.spec.ts

@@ -15,7 +15,7 @@ import {
   GetAllOptions,
   PreprintsResourcesFiltersOptionsSelectors,
 } from '@osf/features/preprints/store/preprints-resources-filters-options';
-import { mockStore } from '@osf/shared/mocks';
+import { MOCK_STORE } from '@osf/shared/mocks';
 import { Creator } from '@osf/shared/models';
 
 import { PreprintsCreatorsFilterComponent } from './preprints-creators-filter.component';
@@ -24,7 +24,7 @@ describe('CreatorsFilterComponent', () => {
   let component: PreprintsCreatorsFilterComponent;
   let fixture: ComponentFixture<PreprintsCreatorsFilterComponent>;
 
-  const store = mockStore;
+  let store: Store;
 
   const mockCreators: Creator[] = [
     { id: '1', name: 'John Doe' },
@@ -33,7 +33,7 @@ describe('CreatorsFilterComponent', () => {
   ];
 
   beforeEach(async () => {
-    store.selectSignal.mockImplementation((selector) => {
+    MOCK_STORE.selectSignal.mockImplementation((selector) => {
       if (selector === PreprintsResourcesFiltersOptionsSelectors.getCreators) {
         return signal(mockCreators);
       }
@@ -47,9 +47,10 @@ describe('CreatorsFilterComponent', () => {
 
     await TestBed.configureTestingModule({
       imports: [PreprintsCreatorsFilterComponent],
-      providers: [MockProvider(Store, store)],
+      providers: [MockProvider(Store, MOCK_STORE)],
     }).compileComponents();
 
+    store = TestBed.inject(Store);
     fixture = TestBed.createComponent(PreprintsCreatorsFilterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/features/preprints/components/filters/preprints-institution-filter/preprints-institution-filter.component.spec.ts

@@ -15,7 +15,7 @@ import {
   GetAllOptions,
   PreprintsResourcesFiltersOptionsSelectors,
 } from '@osf/features/preprints/store/preprints-resources-filters-options';
-import { mockStore } from '@osf/shared/mocks';
+import { MOCK_STORE } from '@osf/shared/mocks';
 import { InstitutionFilter } from '@osf/shared/models';
 
 import { PreprintsInstitutionFilterComponent } from './preprints-institution-filter.component';
@@ -24,7 +24,7 @@ describe('InstitutionFilterComponent', () => {
   let component: PreprintsInstitutionFilterComponent;
   let fixture: ComponentFixture<PreprintsInstitutionFilterComponent>;
 
-  const store = mockStore;
+  const store = MOCK_STORE;
 
   const mockInstitutions: InstitutionFilter[] = [
     { id: '1', label: 'Harvard University', count: 15 },

src/app/features/preprints/components/filters/preprints-license-filter/preprints-license-filter.component.spec.ts

@@ -15,6 +15,7 @@ import {
   GetAllOptions,
   PreprintsResourcesFiltersOptionsSelectors,
 } from '@osf/features/preprints/store/preprints-resources-filters-options';
+import { MOCK_STORE } from '@osf/shared/mocks';
 import { LicenseFilter } from '@osf/shared/models';
 
 import { PreprintsLicenseFilterComponent } from './preprints-license-filter.component';
@@ -23,10 +24,7 @@ describe('LicenseFilterComponent', () => {
   let component: PreprintsLicenseFilterComponent;
   let fixture: ComponentFixture<PreprintsLicenseFilterComponent>;
 
-  const mockStore = {
-    selectSignal: jest.fn(),
-    dispatch: jest.fn(),
-  };
+  const mockStore = MOCK_STORE;
 
   const mockLicenses: LicenseFilter[] = [
     { id: '1', label: 'MIT License', count: 10 },