Migrate frontend test framework from Karma to Jest

core/gui/angular.json

@@ -59,13 +59,7 @@
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
+              "buildOptimizer": true
             }
           },
           "defaultConfiguration": ""
@@ -83,28 +77,10 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
+          "builder": "@angular-builders/jest:run",
           "options": {
-            "assets": ["src/assets"],
-            "fileReplacements": [
-              {
-                "replace": "src/environments/environment.ts",
-                "with": "src/environments/environment.test.ts"
-              }
-            ],
-            "karmaConfig": "./karma.conf.js",
-            "main": "src/test.ts",
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "styles": [
-              "node_modules/jointjs/css/layout.css",
-              "node_modules/jointjs/css/themes/material.css",
-              "node_modules/jointjs/css/themes/default.css",
-              "src/styles.scss"
-            ],
-            "customWebpackConfig": {
-              "path": "./custom-webpack.config.js"
-            },
-            "tsConfig": "src/tsconfig.spec.json"
+            "tsConfig": "tsconfig.spec.json",
+            "configPath": "jest.config.ts"
           }
         },
         "lint": {

core/gui/jest.config.ts

@@ -0,0 +1,40 @@
+import type { Config } from "jest";
+
+const esModules = [
+  "lodash-es",
+  "@ngrx",
+  "@angular",
+  "ng-zorro-antd",
+  "@ant-design",
+  "uuid",
+  "@ngx-formly",
+  "monaco-editor",
+  "vscode",
+  "monaco-editor-wrapper",
+  "y-monaco",
+  "@codingame",
+  "monaco-languageclient",
+  "@codingame/monaco-editor-wrapper",
+].join("|");
+
+const config: Config =  {
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: [`${__dirname}/setup.ts`],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png)$": `${__dirname}/mock-module.js`,
+  },
+  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`],
+  transform: {
+    "^.+\\.(ts|tsx)?$": [
+      "ts-jest",
+      {
+        allowSyntheticDefaultImports: true,
+      },
+    ],
+    "^.+\\.(js|mjs)$": "babel-jest",
+  },
+  testEnvironment: "jsdom", // Set the environment to jsdom
+};
+
+
+export default config;

core/gui/package.json

@@ -99,6 +99,7 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "16.0.1",
+    "@angular-builders/jest": "^18.0.0",
     "@angular-devkit/build-angular": "16.2.12",
     "@angular-eslint/eslint-plugin": "16.3.1",
     "@angular-eslint/eslint-plugin-template": "16.3.1",
@@ -112,16 +113,17 @@
     "@types/dagre": "0.7.47",
     "@types/file-saver": "2.0.5",
     "@types/graphlib": "2.1.8",
-    "@types/jasmine": "4.6.4",
+    "@types/jest": "^29.5.14",
     "@types/json-schema": "7.0.9",
     "@types/lodash": "4.14.179",
-    "@types/node": "18.15.5",
+    "@types/node": "^22.8.1",
     "@types/papaparse": "5.3.5",
     "@types/quill": "2.0.9",
     "@types/uuid": "8.3.4",
     "@types/validator": "13.12.0",
     "@typescript-eslint/eslint-plugin": "7.0.2",
     "@typescript-eslint/parser": "7.0.2",
+    "babel-jest": "^29.7.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "concurrently": "7.4.0",
     "eslint": "8.57.0",
@@ -134,10 +136,8 @@
     "fs-extra": "10.0.1",
     "git-describe": "4.1.0",
     "jasmine-core": "5.4.0",
-    "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.4.4",
-    "karma-chrome-launcher": "3.2.0",
-    "karma-jasmine": "5.1.0",
+    "jest": "^29.7.0",
+    "jest-codemods": "^0.34.0",
     "nodecat": "2.0.0",
     "nx": "20.0.3",
     "nz-tslint-rules": "0.901.2",
@@ -146,7 +146,8 @@
     "rxjs-marbles": "7.0.1",
     "sass": "1.71.1",
     "style-loader": "3.3.4",
-    "ts-node": "4.1.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "8.5.0",
     "typescript": "5.1.6",
     "webpack-bundle-analyzer": "4.5.0"
   },

core/gui/setup.ts

@@ -0,0 +1 @@
+import "jest-preset-angular/setup-jest";

core/gui/src/app/common/formly/preset-wrapper/preset-wrapper.component.spec.ts

@@ -10,7 +10,7 @@
 // import { NzDropDownModule } from "ng-zorro-antd/dropdown";
 // import { NzMenuModule } from "ng-zorro-antd/menu";
 // import { NzMessageModule } from "ng-zorro-antd/message";
-// import { PresetService } from "src/app/workspace/service/preset/preset.service";
+// import { PresetService } from "../../workspace/service/preset/preset.service";
 // import { CustomNgMaterialModule } from "../../custom-ng-material.module";
 // import { nonNull } from "../../util/assert";
 // import { TEXERA_FORMLY_CONFIG } from "../formly-config";

core/gui/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts

@@ -3,9 +3,10 @@ import { FieldWrapper, FormlyFieldConfig } from "@ngx-formly/core";
 import { merge } from "lodash";
 import { ReplaySubject } from "rxjs";
 import { takeUntil, debounceTime, filter, first } from "rxjs/operators";
-import { Preset, PresetService } from "src/app/workspace/service/preset/preset.service";
+
 import { asType } from "../../util/assert";
 import { NzMessageService } from "ng-zorro-antd/message";
+import { Preset, PresetService } from "../../../workspace/service/preset/preset.service";
 
 /**
  * PresetWrapperComponent is a custom formly form field wrapper: https://formly.dev/guide/custom-formly-wrapper

core/gui/src/app/common/service/user/config/user-config.service.spec.ts

@@ -1,6 +1,6 @@
 // import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
 // import { fakeAsync, flush, inject, TestBed, tick } from "@angular/core/testing";
-// import { AppSettings } from "src/app/common/app-setting";
+// import { AppSettings } from "../../common/app-setting";
 // import { UserConfigService, UserConfig } from "./user-config.service";
 // import { UserService } from "../user.service";
 // import { StubUserService } from "../stub-user.service";

core/gui/src/app/common/service/user/config/user-config.service.ts

@@ -1,10 +1,10 @@
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable, of, Subject } from "rxjs";
-import { AppSettings } from "src/app/common/app-setting";
 import { UserService } from "../user.service";
 import { shareReplay, tap } from "rxjs/operators";
-import { isType } from "src/app/common/util/assert";
+import { AppSettings } from "../../../app-setting";
+
 
 export type UserConfig = {
   [key: string]: string;

core/gui/src/app/common/util/json.ts

@@ -13,7 +13,7 @@ import deepMap from "deep-map";
 import {
   AttributeType,
   SchemaAttribute,
-} from "src/app/workspace/service/dynamic-schema/schema-propagation/schema-propagation.service";
+} from "../../workspace/service/dynamic-schema/schema-propagation/schema-propagation.service";
 
 export function formatBinaryData(value: string): string {
   const length = value.length;

core/gui/src/app/dashboard/component/user/filters/filters.component.spec.ts

@@ -1,15 +1,18 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { FiltersComponent } from "./filters.component";
-import { StubOperatorMetadataService } from "src/app/workspace/service/operator-metadata/stub-operator-metadata.service";
-import { OperatorMetadataService } from "src/app/workspace/service/operator-metadata/operator-metadata.service";
-import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
-import { StubWorkflowPersistService } from "src/app/common/service/workflow-persist/stub-workflow-persist.service";
+
 import { testWorkflowEntries } from "../../user-dashboard-test-fixtures";
 import { NzDropDownModule } from "ng-zorro-antd/dropdown";
 import { JWT_OPTIONS, JwtHelperService } from "@auth0/angular-jwt";
 import { FormsModule } from "@angular/forms";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
+import { OperatorMetadataService } from "../../../../workspace/service/operator-metadata/operator-metadata.service";
+import {
+  StubOperatorMetadataService
+} from "../../../../workspace/service/operator-metadata/stub-operator-metadata.service";
+import { StubWorkflowPersistService } from "../../../../common/service/workflow-persist/stub-workflow-persist.service";
 
 describe("FiltersComponent", () => {
   let component: FiltersComponent;

core/gui/src/app/dashboard/component/user/filters/filters.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { OperatorMetadataService } from "src/app/workspace/service/operator-metadata/operator-metadata.service";
+import { OperatorMetadataService } from "../../../../workspace/service/operator-metadata/operator-metadata.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { Observable, of } from "rxjs";
 import { DashboardProject } from "../../../type/dashboard-project.interface";
 import { remove } from "lodash-es";
-import { NotificationService } from "src/app/common/service/notification/notification.service";
+import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { UserProjectService } from "../../../service/user/project/user-project.service";
-import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
 import { SearchFilterParameters } from "../../../type/search-filter-parameters";
 import { UserService } from "../../../../common/service/user/user.service";
 import { switchMap } from "rxjs/operators";

core/gui/src/app/dashboard/component/user/list-item/list-item.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { ListItemComponent } from "./list-item.component";
-import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
+import { WorkflowPersistService } from "../../common/service/workflow-persist/workflow-persist.service";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { of, throwError } from "rxjs";

core/gui/src/app/dashboard/component/user/list-item/list-item.component.ts

@@ -12,18 +12,15 @@ import {
 } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NzModalService } from "ng-zorro-antd/modal";
-import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
 import { ShareAccessComponent } from "../share-access/share-access.component";
-import {
-  WorkflowPersistService,
-  DEFAULT_WORKFLOW_NAME,
-} from "src/app/common/service/workflow-persist/workflow-persist.service";
 import { firstValueFrom } from "rxjs";
 import { SearchService } from "../../../service/user/search.service";
 import { HubWorkflowDetailComponent } from "../../../../hub/component/workflow/detail/hub-workflow-detail.component";
 import { HubWorkflowService } from "../../../../hub/service/workflow/hub-workflow.service";
-import { DownloadService } from "src/app/dashboard/service/user/download/download.service";
-import { formatSize } from "src/app/common/util/size-formatter.util";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { WorkflowPersistService, DEFAULT_WORKFLOW_NAME } from "../../../../common/service/workflow-persist/workflow-persist.service";
+import { DownloadService } from "../../../service/user/download/download.service";
+import { formatSize } from "../../../../common/util/size-formatter.util";
 
 @UntilDestroy()
 @Component({

core/gui/src/app/dashboard/component/user/share-access/share-access.component.ts

@@ -10,8 +10,8 @@ import { NotificationService } from "../../../../common/service/notification/not
 import { HttpErrorResponse } from "@angular/common/http";
 import { NzMessageService } from "ng-zorro-antd/message";
 import { DatasetService } from "../../../service/user/dataset/dataset.service";
-import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
-import { WorkflowActionService } from "src/app/workspace/service/workflow-graph/model/workflow-action.service";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
+import { WorkflowActionService } from "../../../../workspace/service/workflow-graph/model/workflow-action.service";
 
 @UntilDestroy()
 @Component({

core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-explorer.component.ts

@@ -8,7 +8,8 @@ import { DatasetVersion } from "../../../../../common/type/dataset";
 import { switchMap } from "rxjs/operators";
 import { NotificationService } from "../../../../../common/service/notification/notification.service";
 import { DownloadService } from "../../../../service/user/download/download.service";
-import { formatSize } from "src/app/common/util/size-formatter.util";
+import { formatSize } from "../../../../../common/util/size-formatter.util";
+
 
 @UntilDestroy()
 @Component({

core/gui/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.spec.ts

@@ -1,13 +1,14 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { UserProjectListItemComponent } from "./user-project-list-item.component";
-import { NotificationService } from "src/app/common/service/notification/notification.service";
+
 import { UserProjectService } from "../../../../service/user/project/user-project.service";
 import { DashboardProject } from "../../../../type/dashboard-project.interface";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { StubUserService } from "../../../../../common/service/user/stub-user.service";
 import { UserService } from "../../../../../common/service/user/user.service";
 import { HighlightSearchTermsPipe } from "../../user-workflow/user-workflow-list-item/highlight-search-terms.pipe";
+import { NotificationService } from "../../../../../common/service/notification/notification.service";
 
 describe("UserProjectListItemComponent", () => {
   let component: UserProjectListItemComponent;

core/gui/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.ts

@@ -1,11 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { DashboardProject } from "../../../../type/dashboard-project.interface";
 import { UserProjectService } from "../../../../service/user/project/user-project.service";
-import { NotificationService } from "src/app/common/service/notification/notification.service";
+
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { ShareAccessComponent } from "../../share-access/share-access.component";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { UserService } from "../../../../../common/service/user/user.service";
+import { NotificationService } from "../../../../../common/service/notification/notification.service";
 
 @UntilDestroy()
 @Component({

core/gui/src/app/dashboard/component/user/user-quota/user-quota.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnInit, inject } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { File, Workflow, MongoExecution, MongoWorkflow } from "../../../../common/type/user";
-import { DatasetQuota } from "src/app/dashboard/type/quota-statistic.interface";
+import { DatasetQuota } from "../../../type/quota-statistic.interface";
 import { NzTableSortFn } from "ng-zorro-antd/table";
-import { UserQuotaService } from "src/app/dashboard/service/user/quota/user-quota.service";
-import { AdminUserService } from "src/app/dashboard/service/admin/user/admin-user.service";
+import { UserQuotaService } from "../../../service/user/quota/user-quota.service";
+import { AdminUserService } from "../../../service/admin/user/admin-user.service";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
 import * as Plotly from "plotly.js-basic-dist-min";
-import { formatSize } from "src/app/common/util/size-formatter.util";
+import { formatSize } from "../../../../common/util/size-formatter.util";
 
 type UserServiceType = AdminUserService | UserQuotaService;
 

core/gui/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component.ts

@@ -254,7 +254,7 @@ export class WorkflowExecutionHistoryComponent implements OnInit, AfterViewInit
   /**
    * display icons corresponding to workflow execution status
    *
-   * NOTES: Colors match with gui/src/app/workspace/service/joint-ui/joint-ui.service.ts line 347
+   * NOTES: Colors match with gui/../../workspace/service/joint-ui/joint-ui.service.ts line 347
    * TODO: Move colors to a config file for changing them once for many files
    */
   getExecutionStatus(statusCode: number): string[] {