feat(frontend): migrate test runner Karma → Vitest

frontend/.gitignore

@@ -9,6 +9,9 @@
 /out-tsc
 src/environments/version.ts
 
+# test coverage
+/coverage
+
 # dependencies
 /node_modules
 

frontend/angular.json

@@ -64,6 +64,10 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "test": {
+              "tsConfig": "src/tsconfig.test.json",
+              "main": "src/main.test.ts"
             }
           },
           "defaultConfiguration": ""
@@ -81,28 +85,31 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
+          "builder": "@angular/build:unit-test",
           "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"
+            "buildTarget": "gui:build:test",
+            "runner": "vitest",
+            "runnerConfig": "vitest.config.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "include": ["**/*.spec.ts"],
+            "setupFiles": ["src/jsdom-svg-polyfill.ts"],
+            "exclude": [
+              "**/workflow-result.service.spec.ts",
+              "**/download.service.spec.ts",
+              "**/preset.service.spec.ts",
+              "**/*.component.spec.ts",
+              "**/coeditor-presence.service.spec.ts",
+              "**/execute-workflow.service.spec.ts",
+              "**/user.service.spec.ts",
+              "**/workflow-websocket.service.spec.ts",
+              "**/workflow-result-export.service.spec.ts",
+              "**/udf-debug.service.spec.ts",
+              "**/user-config.service.spec.ts",
+              "**/operator-menu.service.spec.ts",
+              "**/workflow-console.service.spec.ts",
+              "**/operator-reuse-cache-status.service.spec.ts",
+              "**/drag-drop.service.spec.ts"
+            ]
           }
         }
       }

frontend/package.json

@@ -11,7 +11,7 @@
     "build:ci": "node --max-old-space-size=8192 ./node_modules/nx/dist/bin/nx.js build --configuration=production --progress=false --source-map=false",
     "analyze": "ng build --configuration=production --stats-json && webpack-bundle-analyzer dist/stats.json",
     "test": "ng test --watch=false",
-    "test:ci": "node --max-old-space-size=8192 ./node_modules/nx/dist/bin/nx.js test --watch=false --progress=false --code-coverage",
+    "test:ci": "node --max-old-space-size=8192 ./node_modules/nx/dist/bin/nx.js test --watch=false --progress=false --coverage --coverage-reporters=lcovonly",
     "prettier:fix": "prettier --write ./src",
     "lint": "eslint ./src",
     "eslint:fix": "yarn eslint --fix ./src",
@@ -108,9 +108,7 @@
     "@types/dagre": "0.7.47",
     "@types/file-saver": "2.0.5",
     "@types/graphlib": "2.1.8",
-    "@types/jasmine": "4.6.4",
     "@types/json-schema": "7.0.9",
-    "@types/karma-coverage": "^2",
     "@types/lodash": "4.14.179",
     "@types/lodash-es": "4.17.4",
     "@types/node": "24.10.1",
@@ -122,17 +120,14 @@
     "@typescript-eslint/parser": "8.59.0",
     "@typescript-eslint/types": "8.59.0",
     "@typescript-eslint/utils": "8.59.0",
+    "@vitest/coverage-v8": "4.0.8",
     "concurrently": "7.4.0",
     "eslint": "8.57.0",
     "eslint-plugin-rxjs": "5.0.3",
     "eslint-plugin-rxjs-angular": "2.0.1",
     "fs-extra": "10.0.1",
     "git-describe": "4.1.0",
-    "jasmine-core": "5.4.0",
-    "karma": "6.4.4",
-    "karma-chrome-launcher": "3.2.0",
-    "karma-coverage": "^2.2.1",
-    "karma-jasmine": "5.1.0",
+    "jsdom": "25.0.1",
     "nodecat": "2.0.0",
     "nx": "22.7.0",
     "prettier": "3.2.5",
@@ -142,6 +137,7 @@
     "style-loader": "3.3.4",
     "ts-proto": "2.2.0",
     "typescript": "5.9.3",
+    "vitest": "4.0.8",
     "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.5.0"
   },

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

@@ -105,7 +105,7 @@
 //   describe("functional api", () => {
 //     it("should properly apply a preset", () => {
 //       const presetService = TestBed.inject(PresetService);
-//       spyOn(presetService, "applyPreset");
+//       vi.spyOn(presetService, "applyPreset");
 
 //       component.applyPreset(testPreset);
 //       expect(presetService.applyPreset).toHaveBeenCalledOnceWith(
@@ -119,8 +119,8 @@
 //       const presetService = TestBed.inject(PresetService);
 //       const otherPreset = { testkey: "otherPresetValue2", otherkey: "otherPresetValue2" };
 //       const existingPresets = [testPreset, otherPreset];
-//       spyOn(presetService, "getPresets").and.returnValue(existingPresets);
-//       const deletePreset = spyOn(presetService, "deletePreset");
+//       vi.spyOn(presetService, "getPresets").mockReturnValue(existingPresets);
+//       const deletePreset = vi.spyOn(presetService, "deletePreset");
 
 //       component.deletePreset(testPreset);
 //       expect(deletePreset).toHaveBeenCalledTimes(1);
@@ -132,12 +132,12 @@
 //     });
 
 //     it("should properly generate a preset title", () => {
-//       expect(component.getEntryTitle(testPreset)).toEqual(jasmine.any(String));
+//       expect(component.getEntryTitle(testPreset)).toEqual(expect.any(String));
 //       expect(component.getEntryTitle(testPreset).replace(/\s\s+/g, "")).not.toEqual("");
 //     });
 
 //     it("should properly generate a preset description", () => {
-//       expect(component.getEntryDescription(testPreset)).toEqual(jasmine.any(String));
+//       expect(component.getEntryDescription(testPreset)).toEqual(expect.any(String));
 //       expect(component.getEntryDescription(testPreset).replace(/\s\s+/g, "")).not.toEqual("");
 //     });
 
@@ -158,7 +158,7 @@
 //     it("should update search results when dropdown becomes visible", () => {
 //       const debugElement = fixture.debugElement.query(By.directive(PresetWrapperComponent));
 //       component.searchResults = [];
-//       spyOn(component, "getSearchResults").and.returnValue([testPreset]);
+//       vi.spyOn(component, "getSearchResults").mockReturnValue([testPreset]);
 
 //       expect(component.searchResults).toEqual([]);
 //       // trigger nzVisibleChange, as if the dropdown menu was triggered
@@ -178,7 +178,7 @@
 //       const debugElement = fixture.debugElement.query(By.directive(PresetWrapperComponent));
 
 //       // trigger dropdown menu
-//       spyOn(component, "getSearchResults").and.returnValue(searchResults);
+//       vi.spyOn(component, "getSearchResults").mockReturnValue(searchResults);
 //       debugElement.query(By.css(".preset-field")).nativeElement.dispatchEvent(new Event("click"));
 //       fixture.detectChanges();
 //       tick(1000);
@@ -205,8 +205,8 @@
 
 //       const searchResults = [testPreset];
 //       const debugElement = fixture.debugElement.query(By.directive(PresetWrapperComponent));
-//       spyOn(component, "getSearchResults").and.returnValue(searchResults);
-//       spyOn(component, "applyPreset");
+//       vi.spyOn(component, "getSearchResults").mockReturnValue(searchResults);
+//       vi.spyOn(component, "applyPreset");
 
 //       // trigger dropdown menu
 //       debugElement.query(By.css(".preset-field")).nativeElement.dispatchEvent(new Event("click"));
@@ -229,8 +229,8 @@
 
 //       const searchResults = [testPreset];
 //       const debugElement = fixture.debugElement.query(By.directive(PresetWrapperComponent));
-//       spyOn(component, "getSearchResults").and.returnValue(searchResults);
-//       spyOn(component, "deletePreset");
+//       vi.spyOn(component, "getSearchResults").mockReturnValue(searchResults);
+//       vi.spyOn(component, "deletePreset");
 
 //       // trigger dropdown menu
 //       debugElement.query(By.css(".preset-field")).nativeElement.dispatchEvent(new Event("click"));
@@ -249,7 +249,7 @@
 //     it("should set new search results whenever the value of the field changes", fakeAsync(() => {
 //       const inputfield = fixture.debugElement.query(By.css(".preset-field input")).nativeElement;
 //       const searchResults = [testPreset];
-//       spyOn(component, "getSearchResults").and.returnValue(searchResults);
+//       vi.spyOn(component, "getSearchResults").mockReturnValue(searchResults);
 
 //       // trigger input event as if typing
 //       inputfield.value = "asdf";

frontend/src/app/common/service/user/config/user-config.service.spec.ts

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -45,7 +46,7 @@
 //   describe("Dictionary Service", () => {
 //     describe("Backend interface", () => {
 //       let httpMock: HttpTestingController;
-//       let dictEventSubjectNextSpy: jasmine.Spy;
+//       let dictEventSubjectNextSpy: Mock;
 
 //       beforeEach(() => {
 //         httpMock = TestBed.inject(HttpTestingController);
@@ -55,7 +56,7 @@
 //         // clear dict
 //         (dictionaryService as any).updateDict({});
 
-//         dictEventSubjectNextSpy = spyOn((dictionaryService as any).dictionaryChangedSubject, "next");
+//         dictEventSubjectNextSpy = vi.spyOn((dictionaryService as any).dictionaryChangedSubject, "next");
 //         dictEventSubjectNextSpy.calls.reset();
 //       });
 

frontend/src/app/dashboard/component/dashboard.component.spec.ts

@@ -36,6 +36,7 @@ import {
   Router,
   UrlSegment,
 } from "@angular/router";
+import type { Mock } from "vitest";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { commonTestProviders } from "../../common/testing/test-utils";
 
@@ -70,24 +71,24 @@ describe("DashboardComponent", () => {
 
   beforeEach(async () => {
     userServiceMock = {
-      isAdmin: jasmine.createSpy("isAdmin").and.returnValue(false),
-      isLogin: jasmine.createSpy("isLogin").and.returnValue(false),
-      userChanged: jasmine.createSpy("userChanged").and.returnValue(of(null)),
+      isAdmin: vi.fn().mockReturnValue(false),
+      isLogin: vi.fn().mockReturnValue(false),
+      userChanged: vi.fn().mockReturnValue(of(null)),
     };
 
     routerMock = {
       events: of(new NavigationEnd(1, "/dashboard", "/dashboard")),
       url: "/dashboard",
-      navigateByUrl: jasmine.createSpy("navigateByUrl"),
+      navigateByUrl: vi.fn(),
     };
 
     flarumServiceMock = {
-      auth: jasmine.createSpy("auth").and.returnValue(of({ token: "dummyToken" })),
-      register: jasmine.createSpy("register").and.returnValue(of(null)),
+      auth: vi.fn().mockReturnValue(of({ token: "dummyToken" })),
+      register: vi.fn().mockReturnValue(of(null)),
     };
 
     cdrMock = {
-      detectChanges: jasmine.createSpy("detectChanges"),
+      detectChanges: vi.fn(),
     };
 
     ngZoneMock = {
@@ -139,7 +140,7 @@ describe("DashboardComponent", () => {
   });
 
   it("should render Google sign-in button when user is NOT logged in", () => {
-    (userServiceMock.isLogin as jasmine.Spy).and.returnValue(false);
+    (userServiceMock.isLogin as Mock).mockReturnValue(false);
     fixture.detectChanges();
 
     const googleSignInBtn = fixture.debugElement.query(By.css("asl-google-signin-button"));