[ENG-10255] Part 3: Added unit tests for pages components in registries (#885)

- Ticket: [ENG-10255]
- Feature flag: n/a

## Summary of Changes
1. Added unit tests for components in registries.

Author: nsemets

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

@@ -48,12 +48,12 @@ describe('MyProjectsComponent', () => {
             { selector: MyResourcesSelectors.getTotalProjects, value: 0 },
             { selector: MyResourcesSelectors.getTotalRegistrations, value: 0 },
             { selector: MyResourcesSelectors.getTotalPreprints, value: 0 },
-            { selector: MyResourcesSelectors.getTotalBookmarks, value: 0 },
+            { selector: BookmarksSelectors.getBookmarksTotalCount, value: 0 },
             { selector: BookmarksSelectors.getBookmarksCollectionId, value: null },
             { selector: MyResourcesSelectors.getProjects, value: [] },
             { selector: MyResourcesSelectors.getRegistrations, value: [] },
             { selector: MyResourcesSelectors.getPreprints, value: [] },
-            { selector: MyResourcesSelectors.getBookmarks, value: [] },
+            { selector: BookmarksSelectors.getBookmarks, value: [] },
           ],
         }),
         { provide: ActivatedRoute, useValue: mockActivatedRoute },

src/app/features/project/overview/components/overview-collections/overview-collections.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { collectionFilterNames } from '@osf/features/collections/constants';
-import { CollectionSubmission } from '@osf/shared/models/collections/collections.models';
+import { CollectionSubmission } from '@osf/shared/models/collections/collections.model';
 
 import { OverviewCollectionsComponent } from './overview-collections.component';
 

src/app/features/registries/components/confirm-continue-editing-dialog/confirm-continue-editing-dialog.component.html

@@ -10,13 +10,13 @@
       class="w-12rem btn-full-width"
       [label]="'common.buttons.cancel' | translate"
       severity="info"
-      (click)="dialogRef.close()"
+      (onClick)="dialogRef.close()"
     />
     <p-button
       class="w-12rem btn-full-width"
       [loading]="isSubmitting"
       [label]="'common.buttons.submit' | translate"
-      (click)="submit()"
+      (onClick)="submit()"
     />
   </div>
 </form>

src/app/features/registries/components/confirm-continue-editing-dialog/confirm-continue-editing-dialog.component.spec.ts

@@ -1,46 +1,42 @@
+import { Store } from '@ngxs/store';
+
 import { MockProvider } from 'ng-mocks';
 
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { of } from 'rxjs';
-
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SchemaActionTrigger } from '@osf/features/registries/enums';
+import { HandleSchemaResponse } from '@osf/features/registries/store';
 
 import { ConfirmContinueEditingDialogComponent } from './confirm-continue-editing-dialog.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { provideDynamicDialogRefMock } from '@testing/mocks/dynamic-dialog-ref.mock';
+import { provideOSFCore } from '@testing/osf.testing.provider';
 import { provideMockStore } from '@testing/providers/store-provider.mock';
 
 describe('ConfirmContinueEditingDialogComponent', () => {
   let component: ConfirmContinueEditingDialogComponent;
   let fixture: ComponentFixture<ConfirmContinueEditingDialogComponent>;
-  let mockDialogRef: DynamicDialogRef;
-  let mockDialogConfig: jest.Mocked<DynamicDialogConfig>;
+  let store: Store;
+  let dialogRef: DynamicDialogRef;
 
   const MOCK_REVISION_ID = 'test-revision-id';
 
-  beforeEach(async () => {
-    mockDialogRef = {
-      close: jest.fn(),
-    } as any;
-
-    mockDialogConfig = {
-      data: { revisionId: MOCK_REVISION_ID },
-    } as jest.Mocked<DynamicDialogConfig>;
-
-    await TestBed.configureTestingModule({
-      imports: [ConfirmContinueEditingDialogComponent, OSFTestingModule],
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ConfirmContinueEditingDialogComponent],
       providers: [
-        MockProvider(DynamicDialogRef, mockDialogRef),
-        MockProvider(DynamicDialogConfig, mockDialogConfig),
-        provideMockStore({
-          signals: [],
-        }),
+        provideOSFCore(),
+        provideDynamicDialogRefMock(),
+        // MockProvider(DynamicDialogRef),
+        MockProvider(DynamicDialogConfig, { data: { revisionId: MOCK_REVISION_ID } }),
+        provideMockStore(),
       ],
-    }).compileComponents();
+    });
 
+    store = TestBed.inject(Store);
+    dialogRef = TestBed.inject(DynamicDialogRef);
     fixture = TestBed.createComponent(ConfirmContinueEditingDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -54,87 +50,27 @@ describe('ConfirmContinueEditingDialogComponent', () => {
     expect(component.isSubmitting).toBe(false);
   });
 
-  it('should submit with comment', () => {
-    const testComment = 'Test comment';
-    component.form.patchValue({ comment: testComment });
-
-    const mockActions = {
-      handleSchemaResponse: jest.fn().mockReturnValue(of({})),
-    };
-
-    Object.defineProperty(component, 'actions', {
-      value: mockActions,
-      writable: true,
-    });
+  it('should dispatch handleSchemaResponse with comment on submit', () => {
+    component.form.patchValue({ comment: 'Test comment' });
 
     component.submit();
 
-    expect(mockActions.handleSchemaResponse).toHaveBeenCalledWith(
-      MOCK_REVISION_ID,
-      SchemaActionTrigger.AdminReject,
-      testComment
+    expect(store.dispatch).toHaveBeenCalledWith(
+      new HandleSchemaResponse(MOCK_REVISION_ID, SchemaActionTrigger.AdminReject, 'Test comment')
     );
+    expect(dialogRef.close).toHaveBeenCalledWith(true);
   });
 
-  it('should submit with empty comment', () => {
-    const mockActions = {
-      handleSchemaResponse: jest.fn().mockReturnValue(of({})),
-    };
-
-    Object.defineProperty(component, 'actions', {
-      value: mockActions,
-      writable: true,
-    });
-
+  it('should dispatch handleSchemaResponse with empty comment on submit', () => {
     component.submit();
 
-    expect(mockActions.handleSchemaResponse).toHaveBeenCalledWith(
-      MOCK_REVISION_ID,
-      SchemaActionTrigger.AdminReject,
-      ''
+    expect(store.dispatch).toHaveBeenCalledWith(
+      new HandleSchemaResponse(MOCK_REVISION_ID, SchemaActionTrigger.AdminReject, '')
     );
   });
 
-  it('should set isSubmitting to true when submitting', () => {
-    const mockActions = {
-      handleSchemaResponse: jest.fn().mockReturnValue(of({}).pipe()),
-    };
-
-    Object.defineProperty(component, 'actions', {
-      value: mockActions,
-      writable: true,
-    });
-
-    component.submit();
-    expect(mockActions.handleSchemaResponse).toHaveBeenCalled();
-  });
-
   it('should update comment value', () => {
-    const testComment = 'New comment';
-    component.form.patchValue({ comment: testComment });
-
-    expect(component.form.get('comment')?.value).toBe(testComment);
-  });
-
-  it('should handle different revision IDs', () => {
-    const differentRevisionId = 'different-revision-id';
-    (component as any).config.data = { revisionId: differentRevisionId } as any;
-
-    const mockActions = {
-      handleSchemaResponse: jest.fn().mockReturnValue(of({})),
-    };
-
-    Object.defineProperty(component, 'actions', {
-      value: mockActions,
-      writable: true,
-    });
-
-    component.submit();
-
-    expect(mockActions.handleSchemaResponse).toHaveBeenCalledWith(
-      differentRevisionId,
-      SchemaActionTrigger.AdminReject,
-      ''
-    );
+    component.form.patchValue({ comment: 'New comment' });
+    expect(component.form.get('comment')?.value).toBe('New comment');
   });
 });

src/app/features/registries/components/confirm-continue-editing-dialog/confirm-continue-editing-dialog.component.ts

@@ -23,20 +23,16 @@ import { HandleSchemaResponse } from '../../store';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfirmContinueEditingDialogComponent {
-  readonly dialogRef = inject(DynamicDialogRef);
-  private readonly fb = inject(FormBuilder);
   readonly config = inject(DynamicDialogConfig);
-  private readonly destroyRef = inject(DestroyRef);
+  readonly dialogRef = inject(DynamicDialogRef);
+  readonly destroyRef = inject(DestroyRef);
+  readonly fb = inject(FormBuilder);
 
-  actions = createDispatchMap({
-    handleSchemaResponse: HandleSchemaResponse,
-  });
+  actions = createDispatchMap({ handleSchemaResponse: HandleSchemaResponse });
 
   isSubmitting = false;
 
-  form: FormGroup = this.fb.group({
-    comment: [''],
-  });
+  form: FormGroup = this.fb.group({ comment: [''] });
 
   submit(): void {
     const comment = this.form.value.comment;

src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.spec.ts

@@ -1,47 +1,50 @@
+import { Store } from '@ngxs/store';
+
 import { MockProvider } from 'ng-mocks';
 
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { of } from 'rxjs';
+import { throwError } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SubmitType } from '@osf/features/registries/enums';
-import { RegistriesSelectors } from '@osf/features/registries/store';
+import { RegisterDraft, RegistriesSelectors } from '@osf/features/registries/store';
 
 import { ConfirmRegistrationDialogComponent } from './confirm-registration-dialog.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { provideDynamicDialogRefMock } from '@testing/mocks/dynamic-dialog-ref.mock';
+import { provideOSFCore } from '@testing/osf.testing.provider';
 import { provideMockStore } from '@testing/providers/store-provider.mock';
 
 describe('ConfirmRegistrationDialogComponent', () => {
   let component: ConfirmRegistrationDialogComponent;
   let fixture: ComponentFixture<ConfirmRegistrationDialogComponent>;
-  let mockDialogRef: DynamicDialogRef;
-  let mockDialogConfig: jest.Mocked<DynamicDialogConfig>;
+  let store: Store;
+  let dialogRef: DynamicDialogRef;
 
   const MOCK_CONFIG_DATA = {
     draftId: 'draft-1',
     providerId: 'provider-1',
     projectId: 'project-1',
-    components: [],
+    components: [] as string[],
   };
 
-  beforeEach(async () => {
-    mockDialogRef = { close: jest.fn() } as any;
-    mockDialogConfig = { data: { ...MOCK_CONFIG_DATA } } as any;
-
-    await TestBed.configureTestingModule({
-      imports: [ConfirmRegistrationDialogComponent, OSFTestingModule],
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ConfirmRegistrationDialogComponent],
       providers: [
-        MockProvider(DynamicDialogRef, mockDialogRef),
-        MockProvider(DynamicDialogConfig, mockDialogConfig),
+        provideOSFCore(),
+        provideDynamicDialogRefMock(),
+        MockProvider(DynamicDialogConfig, { data: { ...MOCK_CONFIG_DATA } }),
         provideMockStore({
           signals: [{ selector: RegistriesSelectors.isRegistrationSubmitting, value: false }],
         }),
       ],
-    }).compileComponents();
+    });
 
+    store = TestBed.inject(Store);
+    dialogRef = TestBed.inject(DynamicDialogRef);
     fixture = TestBed.createComponent(ConfirmRegistrationDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -78,44 +81,60 @@ describe('ConfirmRegistrationDialogComponent', () => {
     expect(embargoControl?.value).toBeNull();
   });
 
-  it('should submit with immediate option and close dialog', () => {
-    const mockActions = {
-      registerDraft: jest.fn().mockReturnValue(of({})),
-    };
-    Object.defineProperty(component, 'actions', { value: mockActions, writable: true });
-
+  it('should dispatch registerDraft with immediate option and close dialog', () => {
     component.form.get('submitOption')?.setValue(SubmitType.Public);
+
     component.submit();
 
-    expect(mockActions.registerDraft).toHaveBeenCalledWith(
-      MOCK_CONFIG_DATA.draftId,
-      '',
-      MOCK_CONFIG_DATA.providerId,
-      MOCK_CONFIG_DATA.projectId,
-      MOCK_CONFIG_DATA.components
+    expect(store.dispatch).toHaveBeenCalledWith(
+      new RegisterDraft(
+        MOCK_CONFIG_DATA.draftId,
+        '',
+        MOCK_CONFIG_DATA.providerId,
+        MOCK_CONFIG_DATA.projectId,
+        MOCK_CONFIG_DATA.components
+      )
     );
-    expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    expect(dialogRef.close).toHaveBeenCalledWith(true);
   });
 
-  it('should submit with embargo and include ISO embargoDate', () => {
-    const mockActions = {
-      registerDraft: jest.fn().mockReturnValue(of({})),
-    };
-    Object.defineProperty(component, 'actions', { value: mockActions, writable: true });
-
+  it('should dispatch registerDraft with embargo and include ISO embargoDate', () => {
     const date = new Date('2025-01-01T00:00:00Z');
     component.form.get('submitOption')?.setValue(SubmitType.Embargo);
     component.form.get('embargoDate')?.setValue(date);
 
     component.submit();
 
-    expect(mockActions.registerDraft).toHaveBeenCalledWith(
-      MOCK_CONFIG_DATA.draftId,
-      date.toISOString(),
-      MOCK_CONFIG_DATA.providerId,
-      MOCK_CONFIG_DATA.projectId,
-      MOCK_CONFIG_DATA.components
+    expect(store.dispatch).toHaveBeenCalledWith(
+      new RegisterDraft(
+        MOCK_CONFIG_DATA.draftId,
+        date.toISOString(),
+        MOCK_CONFIG_DATA.providerId,
+        MOCK_CONFIG_DATA.projectId,
+        MOCK_CONFIG_DATA.components
+      )
     );
-    expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    expect(dialogRef.close).toHaveBeenCalledWith(true);
+  });
+
+  it('should return a date 3 days in the future for minEmbargoDate', () => {
+    const expected = new Date();
+    expected.setDate(expected.getDate() + 3);
+
+    const result = component.minEmbargoDate();
+
+    expect(result.getFullYear()).toBe(expected.getFullYear());
+    expect(result.getMonth()).toBe(expected.getMonth());
+    expect(result.getDate()).toBe(expected.getDate());
+  });
+
+  it('should re-enable form on submit error', () => {
+    (store.dispatch as jest.Mock).mockReturnValueOnce(throwError(() => new Error('fail')));
+
+    component.form.get('submitOption')?.setValue(SubmitType.Public);
+    component.submit();
+
+    expect(component.form.enabled).toBe(true);
+    expect(dialogRef.close).not.toHaveBeenCalled();
   });
 });