Migrate test suite from Jest to Bun with web component testing

.gitignore

@@ -1,3 +1,4 @@
 .claude/
 node_modules/
-test-results/
+test-results/
+coverage/

Makefile

@@ -31,6 +31,12 @@ test-coverage: # Run unit tests with coverage
 	@echo "Running unit tests with coverage.."
 	bun run test:coverage
 
+test-coverage-html: # Generate HTML coverage report
+	@echo "Generating HTML coverage report.."
+	bun test tests/unit --coverage --coverage-reporter=lcov
+	genhtml coverage/lcov.info --output-directory coverage/html
+	@echo "Coverage report generated in coverage/html/index.html"
+
 test-integration: # Run integration tests with Playwright
 	@echo "Running integration tests.."
 	bun run test:integration
@@ -45,7 +51,7 @@ test-all: # Run both unit and integration tests
 # command, you need to add it to .PHONY below, otherwise it
 # won't work. E.g. `make run` wouldn't work if you have
 # `run` file in pwd.
-.PHONY: help
+.PHONY: help dev format lint check test-unit test-coverage test-coverage-html test-integration test-all
 
 # -----------------------------------------------------------
 # -----       (Makefile helpers and decoration)      --------

bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = ["./happydom.js"]

happydom.js

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@happy-dom/global-registrator": "^18.0.1",
     "@playwright/test": "^1.54.2"
   }
 }

public_html/search.js

@@ -186,9 +186,9 @@ function setupUI(windowObj = window) {
   }
 }
 
-function toggleDarkMode() {
-  const html = document.documentElement;
-  const storage = typeof window !== "undefined" ? window.localStorage : null;
+function toggleDarkMode(windowObj = window) {
+  const html = windowObj.document.documentElement;
+  const storage = windowObj?.localStorage ?? null;
 
   if (html.classList.contains("dark-mode")) {
     html.classList.remove("dark-mode");
@@ -241,7 +241,7 @@ function initializeDarkModeToggle(windowObj = window) {
   const toggleButton = windowObj.document.querySelector(".dark-mode-toggle");
   if (!toggleButton) return;
 
-  toggleButton.addEventListener("click", toggleDarkMode);
+  toggleButton.addEventListener("click", () => toggleDarkMode(windowObj));
 }
 
 function isServiceWorkerSupported(windowObj = window) {
@@ -299,16 +299,6 @@ function toggleSettingsPanel(windowObj = window) {
   }
 }
 
-function showSaveMessage(windowObj = window) {
-  const saveMessage = windowObj.document.getElementById("save-message");
-  if (saveMessage) {
-    saveMessage.classList.add("visible");
-    windowObj.setTimeout(() => {
-      saveMessage.classList.remove("visible");
-    }, 2000);
-  }
-}
-
 function initializeSettings(windowObj = window) {
   registerSettingsComponents(windowObj);
 
@@ -532,7 +522,6 @@ if (typeof module !== "undefined" && module.exports) {
     registerServiceWorker,
     initializePWA,
     toggleSettingsPanel,
-    showSaveMessage,
     initializeSettings,
     shouldEnableCaching,
     SettingsDialog,

tests/unit/search-components.spec.js

@@ -0,0 +1,140 @@
+import { beforeAll, describe, expect, mock, test } from "bun:test";
+
+const {
+  SaveMessage,
+  SettingsDialog,
+  SettingOption,
+} = require("../../public_html/search.js");
+
+describe("Web Components", () => {
+  beforeAll(() => {
+    // Register all components once for all tests
+    customElements.define("save-message", SaveMessage);
+    customElements.define("settings-dialog", SettingsDialog);
+    customElements.define("setting-option", SettingOption);
+  });
+  describe("SaveMessage", () => {
+    test("renders with correct class, id, and text content", () => {
+      document.body.innerHTML = "<save-message></save-message>";
+
+      const saveMessage = document.querySelector("save-message");
+      expect(saveMessage?.classList.contains("save-message")).toBe(true);
+      expect(saveMessage?.id).toBe("save-message");
+      expect(saveMessage?.textContent).toBe("✓ Changes saved automatically");
+    });
+  });
+
+  describe("SettingsDialog", () => {
+    test("renders with correct structure and content", () => {
+      document.body.innerHTML = "<settings-dialog></settings-dialog>";
+
+      const settingsDialog = document.querySelector("settings-dialog");
+
+      const header = settingsDialog?.querySelector(".settings-header");
+      expect(header).toBeTruthy();
+
+      const closeButton = settingsDialog?.querySelector(".close-button");
+      expect(closeButton).toBeTruthy();
+      expect(closeButton?.textContent).toBe("×");
+
+      const saveMessage = settingsDialog?.querySelector("save-message");
+      expect(saveMessage).toBeTruthy();
+
+      const body = settingsDialog?.querySelector(".settings-body");
+      expect(body).toBeTruthy();
+
+      const bangList = settingsDialog?.querySelector(".bang-list");
+      expect(bangList).toBeTruthy();
+    });
+
+    test("handles bang selection with localStorage", () => {
+      const mockStorage = {
+        getItem: () => "d", // default bang
+        setItem: mock(),
+      };
+      const mockWindow = {
+        localStorage: mockStorage,
+        customElements: {
+          define: () => {},
+        },
+      };
+
+      document.body.innerHTML = "<settings-dialog></settings-dialog>";
+
+      const settingsDialog = document.querySelector("settings-dialog");
+      settingsDialog.setWindow(mockWindow);
+      settingsDialog.render();
+
+      const googleOption = settingsDialog.querySelector(
+        'setting-option[bang-key="g"]',
+      );
+      expect(googleOption).toBeTruthy();
+
+      googleOption.setWindow(mockWindow);
+      googleOption.connectedCallback(); // Manually trigger render
+
+      const googleRadio = googleOption.querySelector('input[value="g"]');
+      expect(googleRadio).toBeTruthy();
+
+      googleRadio.checked = true;
+      googleRadio.dispatchEvent(new Event("change", { bubbles: true }));
+
+      expect(mockStorage.setItem).toHaveBeenCalledWith("default-bang", "g");
+    });
+  });
+
+  describe("SettingOption", () => {
+    test("renders with correct structure and attributes", () => {
+      document.body.innerHTML = `<setting-option bang-key="g" bang-url="https://www.google.com/search?q={{{s}}}" bang-description="Google Search"></setting-option>`;
+
+      const settingOption = document.querySelector("setting-option");
+      settingOption.connectedCallback(); // Manually trigger render
+
+      const settingRow = settingOption.querySelector(".setting-row");
+      expect(settingRow).toBeTruthy();
+
+      const bangTrigger = settingOption.querySelector(".bang-trigger");
+      expect(bangTrigger).toBeTruthy();
+      expect(bangTrigger.textContent).toBe("g!");
+
+      const bangDescription = settingOption.querySelector(".bang-description");
+      expect(bangDescription).toBeTruthy();
+      expect(bangDescription.textContent).toBe("Google Search");
+      expect(bangDescription.title).toBe(
+        "https://www.google.com/search?q={{{s}}}",
+      );
+
+      const radio = settingOption.querySelector('input[type="radio"]');
+      expect(radio).toBeTruthy();
+      expect(radio.name).toBe("default-bang");
+      expect(radio.value).toBe("g");
+      expect(radio.checked).toBe(false);
+    });
+
+    test("handles selected attribute and change events", () => {
+      const mockStorage = {
+        setItem: mock(),
+      };
+      const mockWindow = {
+        localStorage: mockStorage,
+      };
+
+      document.body.innerHTML = `<setting-option bang-key="w" bang-url="https://en.wikipedia.org/wiki/Special:Search?search={{{s}}}" bang-description="Wikipedia" selected></setting-option>`;
+
+      const settingOption = document.querySelector("setting-option");
+      settingOption.setWindow(mockWindow);
+      settingOption.connectedCallback(); // Manually trigger render
+
+      const radio = settingOption.querySelector('input[type="radio"]');
+      expect(radio.checked).toBe(true);
+
+      radio.checked = false;
+      radio.dispatchEvent(new Event("change", { bubbles: true }));
+
+      radio.checked = true;
+      radio.dispatchEvent(new Event("change", { bubbles: true }));
+
+      expect(mockStorage.setItem).toHaveBeenCalledWith("default-bang", "w");
+    });
+  });
+});