Merge pull request #7971 from getkirby/test/vitest

bastianallgeier · web-flow · commit 191d853ee02e · 2026-02-24T13:27:29.000+01:00
test: vitest performance improvements
diff --git a/panel/package-lock.json b/panel/package-lock.json
diff --git a/panel/package.json b/panel/package.json
@@ -9,7 +9,7 @@
 		"lint": "eslint \"src/**/*.{js,vue}\"",
 		"lint:fix": "npm run lint -- --fix",
 		"format": "prettier --write \"src/**/*.{js,vue}\"",
-		"test:unit": "vitest run"
+		"test:unit": "vitest run --no-isolate"
 	},
 	"dependencies": {
 		"autosize": "^6.0.1",
@@ -32,8 +32,8 @@
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-vue": "^9.33.0",
-		"glob": "^13.0.1",
-		"jsdom": "^27.4.0",
+		"glob": "^13.0.3",
+		"happy-dom": "^17.5.6",
 		"prettier": "^3.8.1",
 		"terser": "^5.46.0",
 		"vite": "^7.3.1",
diff --git a/panel/src/helpers/color.test.js b/panel/src/helpers/color.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import color from "./color.js";
 
diff --git a/panel/src/helpers/field.test.js b/panel/src/helpers/field.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import { form } from "./field";
 
diff --git a/panel/src/helpers/link.test.js b/panel/src/helpers/link.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import { length } from "./object.js";
 import link from "./link.js";
diff --git a/panel/src/helpers/string.sanitizeHTML.test.js b/panel/src/helpers/string.sanitizeHTML.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import { sanitizeHTML } from "./string.js";
 
diff --git a/panel/src/helpers/url.base.test.js b/panel/src/helpers/url.base.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import url from "./url.js";
 
@@ -14,8 +10,11 @@ describe("$helper.url.base", () => {
 	it("should return the base href", () => {
 		const base = document.createElement("base");
 		base.href = "http://localhost:3000";
+		document.head.appendChild(base);
 
 		const result = url.base();
+
+		base.remove();
 		expect(result).toStrictEqual(new URL("http://localhost:3000"));
 	});
 });
diff --git a/panel/src/helpers/url.isSameOrigin.test.js b/panel/src/helpers/url.isSameOrigin.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import url from "./url.js";
 
diff --git a/panel/src/helpers/url.isUrl.test.js b/panel/src/helpers/url.isUrl.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import url from "./url.js";
 import urls from "@/../../tests/Toolkit/fixtures/urls.json";
diff --git a/panel/src/helpers/url.makeAbsolute.test.js b/panel/src/helpers/url.makeAbsolute.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import url from "./url.js";
 
diff --git a/panel/src/helpers/writer.test.js b/panel/src/helpers/writer.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import {
 	allowedExtensions,
@@ -246,8 +242,16 @@ describe("createExtensionsFromPlugins", () => {
 
 	it("should handle multiple plugins", () => {
 		const plugins = {
-			foo: { get schema() { return {}; } },
-			bar: { get schema() { return {}; } }
+			foo: {
+				get schema() {
+					return {};
+				}
+			},
+			bar: {
+				get schema() {
+					return {};
+				}
+			}
 		};
 
 		const result = createExtensionsFromPlugins(plugins, Mark.prototype);
diff --git a/panel/src/panel/dialog.test.js b/panel/src/panel/dialog.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Dialog from "./dialog.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/drag.test.js b/panel/src/panel/drag.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Drag from "./drag.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/drawer.test.js b/panel/src/panel/drawer.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Drawer from "./drawer.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/dropdown.test.js b/panel/src/panel/dropdown.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Dropdown from "./dropdown.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/events.drag.test.js b/panel/src/panel/events.drag.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import Events from "./events.js";
 
diff --git a/panel/src/panel/events.keychain.test.js b/panel/src/panel/events.keychain.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import Events from "./events.js";
 
diff --git a/panel/src/panel/events.keydown.test.js b/panel/src/panel/events.keydown.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Events from "./events.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/events.keyup.test.js b/panel/src/panel/events.keyup.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import Events from "./events.js";
 
diff --git a/panel/src/panel/feature.test.js b/panel/src/panel/feature.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Feature, { defaults } from "./feature.js";
 
diff --git a/panel/src/panel/history.test.js b/panel/src/panel/history.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import History from "./history.js";
 
diff --git a/panel/src/panel/language.test.js b/panel/src/panel/language.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import Language from "./language.js";
 
diff --git a/panel/src/panel/modal.test.js b/panel/src/panel/modal.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Modal, { defaults } from "./modal.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/notification.test.js b/panel/src/panel/notification.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Notification from "./notification.js";
 import Panel from "./panel.js";
diff --git a/panel/src/panel/panel.test.js b/panel/src/panel/panel.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Panel from "./panel.js";
 import Vue from "vue";
diff --git a/panel/src/panel/plugins.test.js b/panel/src/panel/plugins.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Plugins from "./plugins.js";
 import Vue from "vue";
diff --git a/panel/src/panel/request.body.test.js b/panel/src/panel/request.body.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import { body } from "./request.js";
 
diff --git a/panel/src/panel/request.globals.test.js b/panel/src/panel/request.globals.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import { globals } from "./request.js";
 
diff --git a/panel/src/panel/request.headers.test.js b/panel/src/panel/request.headers.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import { headers } from "./request.js";
 
diff --git a/panel/src/panel/state.test.js b/panel/src/panel/state.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import State from "./state.js";
 
diff --git a/panel/src/panel/system.test.js b/panel/src/panel/system.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment node
- */
-
 import { describe, expect, it } from "vitest";
 import System from "./system";
 
diff --git a/panel/src/panel/translation.test.js b/panel/src/panel/translation.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import Translation from "./translation.js";
 
diff --git a/panel/src/panel/user.test.js b/panel/src/panel/user.test.js
@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { describe, expect, it } from "vitest";
 import User from "./user.js";
 
diff --git a/panel/src/panel/view.test.js b/panel/src/panel/view.test.js
@@ -1,8 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import View from "./view.js";
 
 // dummy panel to avoid dependencies
@@ -23,7 +19,7 @@ const Panel = () => {
 	};
 };
 
-describe.concurrent("panel.view", () => {
+describe("panel.view", () => {
 	it("should have a default state", async () => {
 		const view = View(Panel());
 
@@ -62,6 +58,7 @@ describe.concurrent("panel.view", () => {
 	});
 
 	it("should push the state", async () => {
+		const pushState = vi.spyOn(window.history, "pushState");
 		const panel = Panel();
 		const view = View(panel);
 
@@ -70,7 +67,8 @@ describe.concurrent("panel.view", () => {
 			title: "Site"
 		});
 
-		expect(window.location.pathname).toStrictEqual("/site");
+		expect(pushState).toHaveBeenCalledWith(null, null, "/site");
+		pushState.mockRestore();
 	});
 
 	it("should not set an invalid state", async () => {
diff --git a/panel/vite.config.js b/panel/vite.config.js
@@ -106,8 +106,10 @@ function createPlugins(mode) {
  */
 function createTest() {
 	return {
-		environment: "node",
+		css: false,
+		environment: "happy-dom",
 		include: ["**/*.test.js"],
+		reporter: "dot",
 		setupFiles: ["vitest.setup.js"]
 	};
 }
