From 4b3a36a0f5e0e2fd4e5849fcddfcfd11721c52db Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Sat, 2 May 2026 22:44:10 +0200
Subject: [PATCH] [#66563] Configure Vitest

Wire the frontend test target to Vitest and add shared setup for Angular
specs under esbuild.

https://community.openproject.org/wp/66563
---
 frontend/angular.json            | 17 +++++------------
 frontend/ci-plugins-generator.js | 13 +++++++++++++
 frontend/src/test-providers.ts   |  5 +++++
 frontend/src/test-setup.ts       |  9 +++++++++
 frontend/tsconfig.spec.json      |  6 +++---
 5 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/test-providers.ts
 create mode 100644 frontend/src/test-setup.ts

diff --git a/frontend/angular.json b/frontend/angular.json
index 3e00785415f..0040b61b954 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -146,20 +146,13 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "preserveSymlinks": true,
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
-            "scripts": [],
-            "styles": [],
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/assets/sass/"
-              ]
-            },
-            "assets": []
+            "buildTarget": "::development",
+            "runner": "vitest",
+            "providersFile": "src/test-providers.ts",
+            "setupFiles": ["src/test-setup.ts"]
           }
         },
         "lint": {
diff --git a/frontend/ci-plugins-generator.js b/frontend/ci-plugins-generator.js
index f3bfd7e3bc4..7d15215410e 100644
--- a/frontend/ci-plugins-generator.js
+++ b/frontend/ci-plugins-generator.js
@@ -68,4 +68,17 @@ function generatePluginModule(plugins) {
   fs.writeFileSync(fileRegister, result);
 };
 
+function generatePluginStyles(plugins) {
+  const fileRegister = path.join(railsRoot, 'frontend/src/app/features/plugins/linked-plugins.styles.sass');
+  console.log(`Regenerating frontend plugin sass ${fileRegister}.`);
+
+  const imports = plugins
+    .filter(([, pluginPath]) => fs.existsSync(path.join(pluginPath, 'frontend', 'module', 'global_styles')))
+    .map(([name]) => `@import "./linked/${name}/global_styles"`)
+    .join('\n');
+
+  fs.writeFileSync(fileRegister, `// Generated by ci-plugins-generator.js\n${imports}\n`);
+};
+
 generatePluginModule(allFrontendPlugins);
+generatePluginStyles(allFrontendPlugins);
diff --git a/frontend/src/test-providers.ts b/frontend/src/test-providers.ts
new file mode 100644
index 00000000000..eb3b478321b
--- /dev/null
+++ b/frontend/src/test-providers.ts
@@ -0,0 +1,5 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+
+export default [
+  provideZonelessChangeDetection(),
+];
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
new file mode 100644
index 00000000000..bd280168ac3
--- /dev/null
+++ b/frontend/src/test-setup.ts
@@ -0,0 +1,9 @@
+import { I18n } from 'i18n-js';
+import { registerDialogStreamAction } from 'core-turbo/dialog-stream-action';
+
+registerDialogStreamAction();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+(window as any).global = window;
+
+window.I18n = new I18n();
diff --git a/frontend/tsconfig.spec.json b/frontend/tsconfig.spec.json
index 450f3a66ce3..1e14aa0ae16 100644
--- a/frontend/tsconfig.spec.json
+++ b/frontend/tsconfig.spec.json
@@ -3,11 +3,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
-     ]
+      "vitest/globals"
+    ]
   },
   "files": [
-    "src/test.ts",
+    "src/test-setup.ts",
     "src/polyfills.ts"
   ],
   "include": [