Merge remote-tracking branch 'upstream/feature/pbs-25-24' into test/new-unit-tests

Author: nsemets

angular.json

@@ -29,6 +29,8 @@
               "cedar-embeddable-editor",
               "cedar-artifact-viewer",
               "markdown-it-video",
+              "markdown-it-anchor",
+              "markdown-it-toc-done-right",
               "ace-builds/src-noconflict/ext-language_tools",
               "@traptitech/markdown-it-katex",
               "@citation-js/core",

jest.config.js

@@ -24,7 +24,9 @@ module.exports = {
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|@ngxs|@angular|@ngrx|parse5|entities|chart.js)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|@ngxs|@angular|@ngrx|parse5|entities|chart.js|@mdit|@citation-js|@traptitech|@sentry|@primeng|@newrelic)',
+  ],
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
   coverageDirectory: 'coverage',

package-lock.json

@@ -44,6 +44,7 @@
     "@citation-js/core": "^0.7.18",
     "@citation-js/plugin-csl": "^0.7.18",
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@mdit/plugin-img-size": "0.22.3",
     "@newrelic/browser-agent": "^1.301.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
@@ -58,6 +59,8 @@
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
     "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-toc-done-right": "^4.2.0",
     "markdown-it-video": "^0.6.3",
     "ngx-captcha": "^13.0.0",
     "ngx-cookie-service": "^19.1.2",

package.json

@@ -0,0 +1,27 @@
+declare module 'markdown-it-toc-done-right' {
+  import { PluginWithOptions } from 'markdown-it';
+
+  export interface TocOptions {
+    placeholder: string;
+    slugify: (s: string) => string;
+    uniqueSlugStartIndex: number;
+    containerClass: string;
+    containerId: string;
+    listClass: string;
+    itemClass: string;
+    linkClass: string;
+    level: number | number[];
+    listType: 'ol' | 'ul';
+    format: (s: string) => string;
+    callback: (tocCode: string, ast: TocAst) => void;
+  }
+
+  export interface TocAst {
+    l: number;
+    n: string;
+    c: TocAst[];
+  }
+
+  const markdownItTocDoneRight: PluginWithOptions<Partial<TocOptions>>;
+  export default markdownItTocDoneRight;
+}

src/@types/markdown-it-toc-done-right.d.ts

@@ -1,10 +1,17 @@
 import { Actions, createDispatchMap, ofActionSuccessful, select } from '@ngxs/store';
 
-import { filter, take } from 'rxjs';
+import { take, timer } from 'rxjs';
 
 import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router,
+  RouterOutlet,
+} from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
@@ -14,6 +21,7 @@ import { ConfirmEmailComponent } from './shared/components/confirm-email/confirm
 import { FullScreenLoaderComponent } from './shared/components/full-screen-loader/full-screen-loader.component';
 import { ToastComponent } from './shared/components/toast/toast.component';
 import { CustomDialogService } from './shared/services/custom-dialog.service';
+import { LoaderService } from './shared/services/loader.service';
 
 import { GoogleTagManagerService } from 'angular-google-tag-manager';
 
@@ -32,6 +40,7 @@ export class AppComponent implements OnInit {
   private readonly environment = inject(ENVIRONMENT);
   private readonly actions$ = inject(Actions);
   private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
+  private readonly loaderService = inject(LoaderService);
 
   unverifiedEmails = select(UserEmailsSelectors.getUnverifiedEmails);
 
@@ -50,19 +59,26 @@ export class AppComponent implements OnInit {
       this.actions.getEmails();
     });
 
-    if (this.environment.googleTagManagerId) {
-      this.router.events
-        .pipe(
-          filter((event) => event instanceof NavigationEnd),
-          takeUntilDestroyed(this.destroyRef)
-        )
-        .subscribe((event: NavigationEnd) => {
-          this.googleTagManagerService.pushTag({
-            event: 'page',
-            pageName: event.urlAfterRedirects,
-          });
+    this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        this.loaderService.show();
+      } else if (
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel ||
+        event instanceof NavigationError
+      ) {
+        timer(500)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe(() => this.loaderService.hide());
+      }
+
+      if (this.environment.googleTagManagerId && event instanceof NavigationEnd) {
+        this.googleTagManagerService.pushTag({
+          event: 'page',
+          pageName: event.urlAfterRedirects,
         });
-    }
+      }
+    });
   }
 
   private showEmailDialog() {

src/app/app.component.ts

@@ -35,7 +35,7 @@ <h2 class="flex align-items-center gap-2">
     }
   </div>
 
-  <div class="flex flex-wrap gap-1">
+  <div class="flex gap-1">
     <p class="font-bold">{{ 'common.labels.contributors' | translate }}:</p>
 
     <osf-contributors-list

src/app/features/project/overview/components/component-card/component-card.component.html

@@ -1,22 +1,104 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Store } from '@ngxs/store';
+
+import { MockProvider } from 'ng-mocks';
+
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { of } from 'rxjs';
+
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { ToastService } from '@osf/shared/services/toast.service';
+import { DeleteNodeLink, NodeLinksSelectors } from '@osf/shared/stores/node-links';
+
+import { ProjectOverviewSelectors } from '../../store';
 
 import { DeleteNodeLinkDialogComponent } from './delete-node-link-dialog.component';
 
-describe.skip('DeleteNodeLinkDialogComponent', () => {
+import { DynamicDialogRefMock } from '@testing/mocks/dynamic-dialog-ref.mock';
+import { MOCK_NODE_WITH_ADMIN } from '@testing/mocks/node.mock';
+import { ToastServiceMock } from '@testing/mocks/toast.service.mock';
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('DeleteNodeLinkDialogComponent', () => {
   let component: DeleteNodeLinkDialogComponent;
   let fixture: ComponentFixture<DeleteNodeLinkDialogComponent>;
+  let store: jest.Mocked<Store>;
+  let dialogRef: jest.Mocked<DynamicDialogRef>;
+  let dialogConfig: jest.Mocked<DynamicDialogConfig>;
+  let toastService: jest.Mocked<ToastService>;
+
+  const mockProject = { ...MOCK_NODE_WITH_ADMIN, id: 'test-project-id' };
+  const mockCurrentLink = { ...MOCK_NODE_WITH_ADMIN, id: 'linked-resource-id', title: 'Linked Resource' };
 
   beforeEach(async () => {
+    dialogConfig = {
+      data: { currentLink: mockCurrentLink },
+    } as jest.Mocked<DynamicDialogConfig>;
+
     await TestBed.configureTestingModule({
-      imports: [DeleteNodeLinkDialogComponent],
+      imports: [DeleteNodeLinkDialogComponent, OSFTestingModule],
+      providers: [
+        DynamicDialogRefMock,
+        ToastServiceMock,
+        MockProvider(DynamicDialogConfig, dialogConfig),
+        provideMockStore({
+          signals: [
+            { selector: ProjectOverviewSelectors.getProject, value: mockProject },
+            { selector: NodeLinksSelectors.getNodeLinksSubmitting, value: false },
+          ],
+        }),
+      ],
     }).compileComponents();
 
+    store = TestBed.inject(Store) as jest.Mocked<Store>;
+    store.dispatch = jest.fn().mockReturnValue(of(true));
     fixture = TestBed.createComponent(DeleteNodeLinkDialogComponent);
     component = fixture.componentInstance;
+    dialogRef = TestBed.inject(DynamicDialogRef) as jest.Mocked<DynamicDialogRef>;
+    toastService = TestBed.inject(ToastService) as jest.Mocked<ToastService>;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize currentProject selector', () => {
+    expect(component.currentProject()).toEqual(mockProject);
   });
+
+  it('should initialize isSubmitting selector', () => {
+    expect(component.isSubmitting()).toBe(false);
+  });
+
+  it('should initialize actions with deleteNodeLink mapping', () => {
+    expect(component.actions.deleteNodeLink).toBeDefined();
+  });
+
+  it('should dispatch DeleteNodeLink action with correct parameters on successful deletion', () => {
+    component.handleDeleteNodeLink();
+
+    expect(store.dispatch).toHaveBeenCalledWith(expect.any(DeleteNodeLink));
+    const call = (store.dispatch as jest.Mock).mock.calls.find((call) => call[0] instanceof DeleteNodeLink);
+    expect(call).toBeDefined();
+    const action = call[0] as DeleteNodeLink;
+    expect(action.projectId).toBe('test-project-id');
+    expect(action.linkedResource).toEqual(mockCurrentLink);
+  });
+
+  it('should show success toast on successful deletion', fakeAsync(() => {
+    component.handleDeleteNodeLink();
+    tick();
+
+    expect(toastService.showSuccess).toHaveBeenCalledWith('project.overview.dialog.toast.deleteNodeLink.success');
+  }));
+
+  it('should close dialog with hasChanges true on successful deletion', fakeAsync(() => {
+    component.handleDeleteNodeLink();
+    tick();
+
+    expect(dialogRef.close).toHaveBeenCalledWith({ hasChanges: true });
+  }));
 });

src/app/features/project/overview/components/delete-node-link-dialog/delete-node-link-dialog.component.spec.ts

@@ -8,7 +8,7 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
 
 import { ToastService } from '@osf/shared/services/toast.service';
-import { DeleteNodeLink, GetLinkedResources, NodeLinksSelectors } from '@osf/shared/stores/node-links';
+import { DeleteNodeLink, NodeLinksSelectors } from '@osf/shared/stores/node-links';
 
 import { ProjectOverviewSelectors } from '../../store';
 
@@ -28,7 +28,7 @@ export class DeleteNodeLinkDialogComponent {
   currentProject = select(ProjectOverviewSelectors.getProject);
   isSubmitting = select(NodeLinksSelectors.getNodeLinksSubmitting);
 
-  actions = createDispatchMap({ deleteNodeLink: DeleteNodeLink, getLinkedResources: GetLinkedResources });
+  actions = createDispatchMap({ deleteNodeLink: DeleteNodeLink });
 
   handleDeleteNodeLink(): void {
     const project = this.currentProject();
@@ -38,9 +38,8 @@ export class DeleteNodeLinkDialogComponent {
 
     this.actions.deleteNodeLink(project.id, currentLink).subscribe({
       next: () => {
-        this.dialogRef.close();
-        this.actions.getLinkedResources(project.id);
         this.toastService.showSuccess('project.overview.dialog.toast.deleteNodeLink.success');
+        this.dialogRef.close({ hasChanges: true });
       },
     });
   }