refactor(Jobs): replace old table with dynamic mat table

src/app/jobs/jobs-dashboard-new/jobs-dashboard-new.component.html

@@ -1,7 +1,22 @@
-<shared-table
+<dynamic-mat-table
+  [tableName]="tableName"
+  [columns]="columns"
   [dataSource]="dataSource"
-  [columnsdef]="columns"
-  [pageSize]="5"
-  (rowClick)="onRowClick($event)"
+  [pagination]="pagination"
+  [pagingMode]="paginationMode"
+  [setting]="setting"
+  [pending]="pending"
+  [rowSelectionMode]="rowSelectionMode"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  [globalTextSearchPlaceholder]="'Initiator, Type, Parameters...'"
+  (globalTextSearchChange)="onGlobalTextSearchChange($event)"
+  (globalTextSearchApply)="onGlobalTextSearchAction()"
+  (onRowEvent)="onRowEvent($event)"
+  (settingChange)="onSettingChange($event)"
+  (paginationChange)="onPaginationChange($event)"
+  [emptyMessage]="'No jobs available'"
+  [emptyIcon]="'folder'"
+  class="mat-elevation-z2"
 >
-</shared-table>
+</dynamic-mat-table>

src/app/jobs/jobs-dashboard-new/jobs-dashboard-new.component.spec.ts

@@ -1,51 +1,85 @@
-import { NO_ERRORS_SCHEMA } from "@angular/compiler";
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-import { ActivatedRoute, Router } from "@angular/router";
-import { AppConfigService } from "app-config.service";
 import {
-  MockActivatedRoute,
-  MockAppConfigService,
-  MockAuthService,
-  MockHttp,
-  MockRouter,
-} from "shared/MockStubs";
-import { ExportExcelService } from "shared/services/export-excel.service";
+  ComponentFixture,
+  TestBed,
+  inject,
+  waitForAsync,
+} from "@angular/core/testing";
+
 import { JobsDashboardNewComponent } from "./jobs-dashboard-new.component";
-import { SharedTableModule } from "shared/modules/shared-table/shared-table.module";
-import { SharedScicatFrontendModule } from "shared/shared.module";
-import { HttpClient } from "@angular/common/http";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { InternalStorage } from "shared/services/auth/base.storage";
-import { AuthService } from "shared/services/auth/auth.service";
-import { provideLuxonDateAdapter } from "@angular/material-luxon-adapter";
+import { MockStore } from "shared/MockStubs";
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { StoreModule, Store } from "@ngrx/store";
+import { Router } from "@angular/router";
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { AppConfigService } from "app-config.service";
+import { ScicatDataService } from "shared/services/scicat-data-service";
+import { ExportExcelService } from "shared/services/export-excel.service";
+import { RowEventType } from "shared/modules/dynamic-material-table/models/table-row.model";
+import { provideMockStore } from "@ngrx/store/testing";
+import { selectJobsDashboardPageViewModel } from "state-management/selectors/jobs.selectors";
+
+const getConfig = () => ({});
 
 describe("JobsDashboardNewComponent", () => {
   let component: JobsDashboardNewComponent;
   let fixture: ComponentFixture<JobsDashboardNewComponent>;
 
-  beforeEach(waitForAsync(() => {
-    const appconfig = new MockAppConfigService(null);
-    const authService = new MockAuthService();
+  const router = {
+    navigateByUrl: jasmine.createSpy("navigateByUrl"),
+  };
+  let store: MockStore;
+
+  const jobsVm = {
+    jobs: [],
+    count: 0,
+    currentPage: 0,
+    jobsPerPage: 5,
+    filters: {
+      skip: 0,
+      limit: 5,
+      sortField: "creationTime:desc",
+      mode: undefined,
+    },
+    tableSettings: { columns: [] },
+  };
 
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      declarations: [JobsDashboardNewComponent],
       imports: [
-        SharedTableModule,
-        SharedScicatFrontendModule,
-        BrowserAnimationsModule,
+        FlexLayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        StoreModule.forRoot({}),
       ],
-      providers: [
-        { provide: ActivatedRoute, useClass: MockActivatedRoute },
-        { provide: ExportExcelService, useValue: {} },
-        { provide: Router, useClass: MockRouter },
-        { provide: HttpClient, useClass: MockHttp },
-        { provide: AppConfigService, useValue: appconfig },
-        { provide: AuthService, useValue: authService },
-        { provide: InternalStorage },
-        provideLuxonDateAdapter(),
-      ],
-    }).compileComponents();
+      declarations: [JobsDashboardNewComponent],
+    });
+
+    TestBed.overrideComponent(JobsDashboardNewComponent, {
+      set: {
+        providers: [
+          {
+            provide: Router,
+            useValue: router,
+          },
+          {
+            provide: AppConfigService,
+            useValue: { getConfig },
+          },
+          { provide: ScicatDataService, useValue: {} },
+          { provide: ExportExcelService, useValue: {} },
+          provideMockStore({
+            selectors: [
+              { selector: selectJobsDashboardPageViewModel, value: jobsVm },
+            ],
+          }),
+        ],
+      },
+    });
+
+    TestBed.compileComponents();
   }));
 
   beforeEach(() => {
@@ -54,11 +88,30 @@ describe("JobsDashboardNewComponent", () => {
     fixture.detectChanges();
   });
 
+  beforeEach(inject([Store], (mockStore: MockStore) => {
+    store = mockStore;
+  }));
+
   afterEach(() => {
     fixture.destroy();
   });
 
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  describe("#onRowEvent", () => {
+    it("should navigate to a Job detail", () => {
+      const job = { id: "job-1" };
+      const id = encodeURIComponent(job.id);
+
+      component.onRowEvent({
+        event: RowEventType.RowClick,
+        sender: { row: job },
+      } as any);
+
+      expect(router.navigateByUrl).toHaveBeenCalledTimes(1);
+      expect(router.navigateByUrl).toHaveBeenCalledWith("/user/jobs/" + id);
+    });
+  });
 });