[ENG-10364] Part 3: Add unit tests for preprints (#900)

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

## Summary of Changes
1. Update unit tests for preprints details components.

Author: nsemets

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.html

@@ -1,7 +1,7 @@
-<p-card>
-  @if (preprint()) {
-    @let preprintValue = preprint()!;
+@let preprintValue = preprint();
 
+<p-card>
+  @if (preprintValue) {
     <div class="flex flex-column gap-4">
       @if (preprintValue.customPublicationCitation) {
         <section class="flex flex-column gap-2">
@@ -19,12 +19,17 @@ <h3>{{ 'preprints.details.originalPublicationDate' | translate }}</h3>
         </section>
       }
 
-      @if (preprintValue.doi) {
+      @if (preprintValue.articleDoiLink) {
         <section class="flex flex-column gap-2">
           <h3>{{ 'preprints.details.publicationDoi' | translate }}</h3>
 
-          <a class="font-bold word-break-word" [href]="preprint()?.articleDoiLink">
-            {{ preprint()?.articleDoiLink }}
+          <a
+            class="font-bold word-break-word"
+            [href]="preprintValue.articleDoiLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ preprintValue.articleDoiLink }}
           </a>
         </section>
       }

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.scss

@@ -1,3 +0,0 @@
-.white-space-pre-line {
-  white-space: pre-line;
-}

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.spec.ts

@@ -1,63 +1,59 @@
-import { MockComponents, MockPipe } from 'ng-mocks';
+import { Store } from '@ngxs/store';
+
+import { MockComponents } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
 import { LicenseDisplayComponent } from '@osf/shared/components/license-display/license-display.component';
-import { InterpolatePipe } from '@osf/shared/pipes/interpolate.pipe';
 import { SubjectsSelectors } from '@osf/shared/stores/subjects';
 
 import { CitationSectionComponent } from '../citation-section/citation-section.component';
 
 import { AdditionalInfoComponent } from './additional-info.component';
 
 import { PREPRINT_MOCK } from '@testing/mocks/preprint.mock';
-import { OSFTestingModule } from '@testing/osf.testing.module';
-import { provideMockStore } from '@testing/providers/store-provider.mock';
+import { provideOSFCore } from '@testing/osf.testing.provider';
+import { BaseSetupOverrides, mergeSignalOverrides, provideMockStore } from '@testing/providers/store-provider.mock';
 
 describe('AdditionalInfoComponent', () => {
   let component: AdditionalInfoComponent;
   let fixture: ComponentFixture<AdditionalInfoComponent>;
+  let store: Store;
 
-  const mockPreprint = PREPRINT_MOCK;
+  interface SetupOverrides extends BaseSetupOverrides {
+    preprintProviderId?: string;
+  }
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        AdditionalInfoComponent,
-        OSFTestingModule,
-        ...MockComponents(CitationSectionComponent, LicenseDisplayComponent),
-        MockPipe(InterpolatePipe),
-      ],
+  function setup(overrides: SetupOverrides = {}) {
+    TestBed.configureTestingModule({
+      imports: [AdditionalInfoComponent, ...MockComponents(CitationSectionComponent, LicenseDisplayComponent)],
       providers: [
+        provideOSFCore(),
         provideMockStore({
-          signals: [
-            {
-              selector: PreprintSelectors.getPreprint,
-              value: mockPreprint,
-            },
-            {
-              selector: PreprintSelectors.isPreprintLoading,
-              value: false,
-            },
-            {
-              selector: SubjectsSelectors.getSelectedSubjects,
-              value: [],
-            },
-            {
-              selector: SubjectsSelectors.areSelectedSubjectsLoading,
-              value: false,
-            },
-          ],
+          signals: mergeSignalOverrides(
+            [
+              { selector: PreprintSelectors.getPreprint, value: PREPRINT_MOCK },
+              { selector: PreprintSelectors.isPreprintLoading, value: false },
+              { selector: SubjectsSelectors.getSelectedSubjects, value: [] },
+              { selector: SubjectsSelectors.areSelectedSubjectsLoading, value: false },
+            ],
+            overrides.selectorOverrides
+          ),
         }),
       ],
-    }).compileComponents();
+    });
 
     fixture = TestBed.createComponent(AdditionalInfoComponent);
     component = fixture.componentInstance;
-    fixture.componentRef.setInput('preprintProviderId', 'osf');
+    store = TestBed.inject(Store);
+    fixture.componentRef.setInput('preprintProviderId', overrides.preprintProviderId ?? 'osf');
     fixture.detectChanges();
+  }
+
+  beforeEach(() => {
+    setup();
   });
 
   it('should create', () => {
@@ -66,12 +62,12 @@ describe('AdditionalInfoComponent', () => {
 
   it('should return license from preprint when available', () => {
     const license = component.license();
-    expect(license).toBe(mockPreprint.embeddedLicense);
+    expect(license).toBe(PREPRINT_MOCK.embeddedLicense);
   });
 
   it('should return license options record from preprint when available', () => {
     const licenseOptionsRecord = component.licenseOptionsRecord();
-    expect(licenseOptionsRecord).toEqual(mockPreprint.licenseOptions);
+    expect(licenseOptionsRecord).toEqual(PREPRINT_MOCK.licenseOptions);
   });
 
   it('should have skeleton data array with 5 null elements', () => {
@@ -89,4 +85,36 @@ describe('AdditionalInfoComponent', () => {
       queryParams: { search: 'test-tag' },
     });
   });
+
+  it('should not render DOI link when articleDoiLink is missing', () => {
+    const doiLink = fixture.nativeElement.querySelector('a[href*="doi.org"]');
+    expect(doiLink).toBeNull();
+  });
+
+  it('should render DOI link when articleDoiLink is available', () => {
+    setup({
+      selectorOverrides: [
+        {
+          selector: PreprintSelectors.getPreprint,
+          value: {
+            ...PREPRINT_MOCK,
+            articleDoiLink: 'https://doi.org/10.1234/sample.article-doi',
+          },
+        },
+      ],
+    });
+
+    const doiLink = fixture.nativeElement.querySelector('a[href*="doi.org"]') as HTMLAnchorElement | null;
+    expect(doiLink).not.toBeNull();
+    expect(doiLink?.getAttribute('href')).toBe('https://doi.org/10.1234/sample.article-doi');
+    expect(doiLink?.textContent?.trim()).toBe('https://doi.org/10.1234/sample.article-doi');
+  });
+
+  it('should not dispatch subject fetch when preprint id is missing', () => {
+    setup({
+      selectorOverrides: [{ selector: PreprintSelectors.getPreprint, value: null }],
+    });
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
 });

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.ts

@@ -19,41 +19,33 @@ import { CitationSectionComponent } from '../citation-section/citation-section.c
 
 @Component({
   selector: 'osf-preprint-additional-info',
-  imports: [Card, TranslatePipe, Tag, Skeleton, DatePipe, CitationSectionComponent, LicenseDisplayComponent],
+  imports: [Card, Tag, Skeleton, CitationSectionComponent, LicenseDisplayComponent, DatePipe, TranslatePipe],
   templateUrl: './additional-info.component.html',
   styleUrl: './additional-info.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AdditionalInfoComponent {
-  private actions = createDispatchMap({
-    fetchSubjects: FetchSelectedSubjects,
-  });
-  private router = inject(Router);
+  private readonly router = inject(Router);
+  private readonly actions = createDispatchMap({ fetchSubjects: FetchSelectedSubjects });
 
-  preprintProviderId = input.required<string>();
+  readonly preprintProviderId = input.required<string>();
 
-  preprint = select(PreprintSelectors.getPreprint);
-  isPreprintLoading = select(PreprintSelectors.isPreprintLoading);
+  readonly preprint = select(PreprintSelectors.getPreprint);
+  readonly isPreprintLoading = select(PreprintSelectors.isPreprintLoading);
 
-  subjects = select(SubjectsSelectors.getSelectedSubjects);
-  areSelectedSubjectsLoading = select(SubjectsSelectors.areSelectedSubjectsLoading);
+  readonly subjects = select(SubjectsSelectors.getSelectedSubjects);
+  readonly areSelectedSubjectsLoading = select(SubjectsSelectors.areSelectedSubjectsLoading);
 
-  license = computed(() => {
-    const preprint = this.preprint();
-    if (!preprint) return null;
-    return preprint.embeddedLicense;
-  });
+  readonly license = computed(() => this.preprint()?.embeddedLicense ?? null);
+  readonly licenseOptionsRecord = computed(() => (this.preprint()?.licenseOptions ?? {}) as Record<string, string>);
 
-  licenseOptionsRecord = computed(() => (this.preprint()?.licenseOptions ?? {}) as Record<string, string>);
-
-  skeletonData = Array.from({ length: 5 }, () => null);
+  readonly skeletonData = new Array(5).fill(null);
 
   constructor() {
     effect(() => {
-      const preprint = this.preprint();
-      if (!preprint) return;
-
-      this.actions.fetchSubjects(this.preprint()!.id, ResourceType.Preprint);
+      const preprintId = this.preprint()?.id;
+      if (!preprintId) return;
+      this.actions.fetchSubjects(preprintId, ResourceType.Preprint);
     });
   }
 

src/app/features/preprints/components/preprint-details/citation-section/citation-section.component.html

@@ -4,6 +4,7 @@
       <p-accordion-header class="p-0 justify-content-between">
         <h3>{{ 'project.overview.metadata.citation' | translate }}</h3>
       </p-accordion-header>
+
       <p-accordion-content>
         @if (areCitationsLoading()) {
           <p-skeleton height="3.5rem"></p-skeleton>
@@ -18,25 +19,28 @@ <h3>{{ citation.title }}</h3>
           </div>
 
           <p-divider />
+
           <p>{{ 'project.overview.metadata.getMoreCitations' | translate }}</p>
+
           <p-select
             class="mt-2 w-full"
-            [placeholder]="'project.overview.metadata.citationInputPlaceholder' | translate"
-            [loading]="areCitationStylesLoading()"
-            [options]="citationStylesOptions()"
-            [filter]="true"
-            (onFilter)="handleCitationStyleFilterSearch($event)"
             optionLabel="label"
             optionValue="value"
             appendTo="body"
-            [emptyFilterMessage]="filterMessage() | translate"
+            [filter]="true"
+            [placeholder]="'project.overview.metadata.citationInputPlaceholder' | translate"
             [emptyMessage]="'project.overview.metadata.citationInputPlaceholder' | translate"
+            [emptyFilterMessage]="filterMessage() | translate"
+            [loading]="areCitationStylesLoading()"
+            [options]="citationStylesOptions()"
             (onChange)="handleGetStyledCitation($event)"
+            (onFilter)="handleCitationStyleFilterSearch($event)"
           >
             <ng-template #selectedItem let-selectedOption>
               {{ selectedOption.label }}
             </ng-template>
           </p-select>
+
           @if (styledCitation()) {
             <p class="mt-2">{{ styledCitation()?.citation }}</p>
           }