Test/395 institutions components (#358)

* test(institutions): tested institutions, institutions-list, institutions-search components * fix(tests): fixed tests

Author: dinlvkdn

src/app/features/home/pages/dashboard/dashboard.component.spec.ts

@@ -1,5 +1,6 @@
 import { MockComponents, MockProvider } from 'ng-mocks';
 
+import { ConfirmationService } from 'primeng/api';
 import { TablePageEvent } from 'primeng/table';
 
 import { of } from 'rxjs';
@@ -41,6 +42,7 @@ describe('DashboardComponent', () => {
  { selector: MyResourcesSelectors.getProjectsLoading, value: false },
  ],
  }),
+ MockProvider(ConfirmationService, { confirm: jest.fn() }),
  MockProvider(Router, routerMock),
  MockProvider(IS_MEDIUM, of(false)),
  MockProvider(ActivatedRoute, ActivatedRouteMock.withQueryParams({}).build()),

src/app/features/institutions/institutions.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { InstitutionsComponent } from './institutions.component';
 
@@ -19,4 +20,9 @@ describe('InstitutionsComponent', () => {
  it('should create', () => {
  expect(component).toBeTruthy();
  });
+
+ it('should render router outlet', () => {
+ const routerOutlet = fixture.debugElement.query(By.css('router-outlet'));
+ expect(routerOutlet).toBeTruthy();
+ });
 });

src/app/features/institutions/pages/institutions-list/institutions-list.component.spec.ts

@@ -1,47 +1,47 @@
-import { provideStore } from '@ngxs/store';
+import { MockProvider } from 'ng-mocks';
 
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockComponents, MockPipe } from 'ng-mocks';
+import { PaginatorState } from 'primeng/paginator';
 
-import { of } from 'rxjs';
-
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
-import {
- CustomPaginatorComponent,
- LoadingSpinnerComponent,
- SearchInputComponent,
- SubHeaderComponent,
-} from '@shared/components';
-import { InstitutionsState } from '@shared/stores/institutions';
+import { InstitutionsSelectors } from '@osf/shared/stores/institutions';
+import { MOCK_INSTITUTION } from '@shared/mocks/institution.mock';
 
 import { InstitutionsListComponent } from './institutions-list.component';
 
-describe.skip('InstitutionsListComponent', () => {
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
+import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('InstitutionsListComponent', () => {
  let component: InstitutionsListComponent;
  let fixture: ComponentFixture<InstitutionsListComponent>;
+ let routerMock: ReturnType<RouterMockBuilder['build']>;
+ let activatedRouteMock: ReturnType<ActivatedRouteMockBuilder['build']>;
+
+ const mockInstitutions = [MOCK_INSTITUTION];
+ const mockTotalCount = 2;
 
  beforeEach(async () => {
+ routerMock = RouterMockBuilder.create().build();
+ activatedRouteMock = ActivatedRouteMockBuilder.create()
+ .withQueryParams({ page: '1', size: '10', search: '' })
+ .build();
+
  await TestBed.configureTestingModule({
- imports: [
- InstitutionsListComponent,
- ...MockComponents(SubHeaderComponent, SearchInputComponent, CustomPaginatorComponent, LoadingSpinnerComponent),
- MockPipe(TranslatePipe),
- ],
+ imports: [InstitutionsListComponent, OSFTestingModule],
  providers: [
- {
- provide: ActivatedRoute,
- useValue: {
- snapshot: { paramMap: { get: () => '1' } },
- queryParams: of({}),
- },
- },
- provideStore([InstitutionsState]),
- provideHttpClient(),
- provideHttpClientTesting(),
+ provideMockStore({
+ signals: [
+ { selector: InstitutionsSelectors.getInstitutions, value: mockInstitutions },
+ { selector: InstitutionsSelectors.getInstitutionsTotalCount, value: mockTotalCount },
+ { selector: InstitutionsSelectors.isInstitutionsLoading, value: false },
+ ],
+ }),
+ MockProvider(Router, routerMock),
+ MockProvider(ActivatedRoute, activatedRouteMock),
  ],
  }).compileComponents();
 
@@ -53,4 +53,70 @@ describe.skip('InstitutionsListComponent', () => {
  it('should create', () => {
  expect(component).toBeTruthy();
  });
+
+ it('should update currentPage, first, and call updateQueryParams when page is provided', () => {
+ const paginatorEvent: PaginatorState = {
+ page: 1,
+ first: 20,
+ rows: 10,
+ pageCount: 5,
+ };
+
+ component.onPageChange(paginatorEvent);
+
+ expect(component.currentPage()).toBe(2);
+ expect(component.first()).toBe(20);
+ expect(routerMock.navigate).toHaveBeenCalledWith([], {
+ relativeTo: expect.any(Object),
+ queryParams: {
+ page: '2',
+ size: '10',
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should set currentPage to 1 when page is not provided', () => {
+ const paginatorEvent: PaginatorState = {
+ page: undefined,
+ first: 0,
+ rows: 20,
+ pageCount: 3,
+ };
+
+ component.onPageChange(paginatorEvent);
+
+ expect(component.currentPage()).toBe(1);
+ expect(component.first()).toBe(0);
+ expect(routerMock.navigate).toHaveBeenCalledWith([], {
+ relativeTo: expect.any(Object),
+ queryParams: {
+ page: '1',
+ size: '20',
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should handle first being undefined', () => {
+ const paginatorEvent: PaginatorState = {
+ page: 2,
+ first: undefined,
+ rows: 15,
+ pageCount: 4,
+ };
+
+ component.onPageChange(paginatorEvent);
+
+ expect(component.currentPage()).toBe(2);
+ expect(component.first()).toBe(0);
+ expect(routerMock.navigate).toHaveBeenCalledWith([], {
+ relativeTo: expect.any(Object),
+ queryParams: {
+ page: '2',
+ size: '15',
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
 });

src/app/features/institutions/pages/institutions-search/institutions-search.component.spec.ts

@@ -1,46 +1,80 @@
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockComponents, MockPipes } from 'ng-mocks';
+import { Store } from '@ngxs/store';
 
-import { SafeHtmlPipe } from 'primeng/menu';
+import { MockComponents, MockProvider } from 'ng-mocks';
+
+import { of } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
 
-import {
- FilterChipsComponent,
- ReusableFilterComponent,
- SearchHelpTutorialComponent,
- SearchInputComponent,
- SearchResultsContainerComponent,
-} from '@shared/components';
+import { SetDefaultFilterValue } from '@osf/shared/stores/global-search';
+import { FetchInstitutionById, InstitutionsSearchSelectors } from '@osf/shared/stores/institutions-search';
+import { GlobalSearchComponent, LoadingSpinnerComponent } from '@shared/components';
+import { MOCK_INSTITUTION } from '@shared/mocks';
 
 import { InstitutionsSearchComponent } from './institutions-search.component';
 
-describe.skip('InstitutionsSearchComponent', () => {
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('InstitutionsSearchComponent', () => {
  let component: InstitutionsSearchComponent;
  let fixture: ComponentFixture<InstitutionsSearchComponent>;
+ let activatedRouteMock: ReturnType<ActivatedRouteMockBuilder['build']>;
+ let store: jest.Mocked<Store>;
 
  beforeEach(async () => {
+ activatedRouteMock = ActivatedRouteMockBuilder.create().build();
+
  await TestBed.configureTestingModule({
  imports: [
  InstitutionsSearchComponent,
- ...MockComponents(
- ReusableFilterComponent,
- SearchResultsContainerComponent,
- FilterChipsComponent,
- SearchHelpTutorialComponent,
- SearchInputComponent
- ),
- MockPipes(TranslatePipe, SafeHtmlPipe),
+ ...MockComponents(LoadingSpinnerComponent, GlobalSearchComponent),
+ OSFTestingModule,
+ ],
+ providers: [
+ MockProvider(ActivatedRoute, activatedRouteMock),
+ provideMockStore({
+ signals: [
+ { selector: InstitutionsSearchSelectors.getInstitution, value: MOCK_INSTITUTION },
+ { selector: InstitutionsSearchSelectors.getInstitutionLoading, value: false },
+ ],
+ }),
  ],
- providers: [],
  }).compileComponents();
 
  fixture = TestBed.createComponent(InstitutionsSearchComponent);
  component = fixture.componentInstance;
+
+ store = TestBed.inject(Store) as jest.Mocked<Store>;
+ store.dispatch = jest.fn().mockReturnValue(of(undefined));
+
  fixture.detectChanges();
  });
 
  it('should create', () => {
  expect(component).toBeTruthy();
  });
+
+ it('should fetch institution and set default filter value on ngOnInit when institution-id is provided', () => {
+ activatedRouteMock.snapshot!.params = { 'institution-id': MOCK_INSTITUTION.id };
+
+ store.dispatch.mockReturnValue(of(undefined));
+
+ component.ngOnInit();
+
+ expect(store.dispatch).toHaveBeenCalledWith(new FetchInstitutionById(MOCK_INSTITUTION.id));
+ expect(store.dispatch).toHaveBeenCalledWith(
+ new SetDefaultFilterValue('affiliation', MOCK_INSTITUTION.iris.join(','))
+ );
+ });
+
+ it('should not fetch institution on ngOnInit when institution-id is not provided', () => {
+ activatedRouteMock.snapshot!.params = {};
+
+ component.ngOnInit();
+
+ expect(store.dispatch).not.toHaveBeenCalled();
+ });
 });

src/app/features/my-projects/components/create-project-dialog/create-project-dialog.component.spec.ts

@@ -79,11 +79,12 @@ describe('CreateProjectDialogComponent', () => {
  fillValidForm('Title', 'Desc', 'Tpl', 'Storage', ['a1']);
 
  (MOCK_STORE.dispatch as jest.Mock).mockReturnValue(of(undefined));
+ (MOCK_STORE.selectSnapshot as jest.Mock).mockReturnValue([{ id: 'new-project-id' }]);
 
  component.submitForm();
 
  expect(MOCK_STORE.dispatch).toHaveBeenCalledWith(new CreateProject('Title', 'Desc', 'Tpl', 'Storage', ['a1']));
  expect(MOCK_STORE.dispatch).toHaveBeenCalledWith(new GetMyProjects(1, MY_PROJECTS_TABLE_PARAMS.rows, {}));
- expect((dialogRef as any).close).toHaveBeenCalled();
+ expect((dialogRef as any).close).toHaveBeenCalledWith({ project: { id: 'new-project-id' } });
  });
 });