Uncodedtech · pull · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025
diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
@@ -145,26 +145,26 @@ describe("Config", () => {
       Config.setConfig("confidenceMode", "max");
 
       //THEN
-      expect(dispatchConfigEventMock).not.toHaveBeenCalledWith(
-        "freedomMode",
-        false,
-        true,
-        true,
-      );
+      expect(dispatchConfigEventMock).not.toHaveBeenCalledWith({
+        key: "freedomMode",
+        newValue: false,
+        nosave: true,
+        previousValue: true,
+      });
 
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "stopOnError",
-        "off",
-        false,
-        "letter",
-      );
+      expect(dispatchConfigEventMock).toHaveBeenCalledWith({
+        key: "stopOnError",
+        newValue: "off",
+        nosave: false,
+        previousValue: "letter",
+      });
 
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "confidenceMode",
-        "max",
-        false,
-        "off",
-      );
+      expect(dispatchConfigEventMock).toHaveBeenCalledWith({
+        key: "confidenceMode",
+        newValue: "max",
+        nosave: false,
+        previousValue: "off",
+      });
     });
 
     it("saves to localstorage if nosave=false", async () => {
@@ -186,12 +186,6 @@ describe("Config", () => {
 
       //hide loading
       expect(accountButtonLoadingMock).toHaveBeenNthCalledWith(2, false);
-
-      //send event
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "saveToLocalStorage",
-        expect.stringContaining("numbers"),
-      );
     });
 
     it("saves configOverride values to localstorage if nosave=false", async () => {
@@ -210,16 +204,6 @@ describe("Config", () => {
         minWpmCustomSpeed: 120,
         minWpm: "custom",
       });
-
-      //send event
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "saveToLocalStorage",
-        expect.stringContaining("minWpmCustomSpeed"),
-      );
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "saveToLocalStorage",
-        expect.stringContaining("minWpm"),
-      );
     });
 
     it("does not save to localstorage if nosave=true", async () => {
@@ -228,55 +212,54 @@ describe("Config", () => {
       replaceConfig({ numbers: false });
 
       //WHEN
-      Config.setConfig("numbers", true, true);
+      Config.setConfig("numbers", true, {
+        nosave: true,
+      });
 
       //THEN
       //wait for debounce
       await vi.advanceTimersByTimeAsync(2500);
 
       expect(accountButtonLoadingMock).not.toHaveBeenCalled();
       expect(dbSaveConfigMock).not.toHaveBeenCalled();
-
-      expect(dispatchConfigEventMock).not.toHaveBeenCalledWith(
-        "saveToLocalStorage",
-        expect.any(String),
-      );
     });
 
     it("dispatches event on set", () => {
       //GIVEN
       replaceConfig({ numbers: false });
 
       //WHEN
-      Config.setConfig("numbers", true, true);
+      Config.setConfig("numbers", true, {
+        nosave: true,
+      });
 
       //THEN
 
-      expect(dispatchConfigEventMock).toHaveBeenCalledWith(
-        "numbers",
-        true,
-        true,
-        false,
-      );
+      expect(dispatchConfigEventMock).toHaveBeenCalledWith({
+        key: "numbers",
+        newValue: true,
+        nosave: true,
+        previousValue: false,
+      });
     });
 
     it("triggers resize if property is set", () => {
       ///WHEN
-      Config.setConfig("maxLineWidth", 50, false);
+      Config.setConfig("maxLineWidth", 50);
 
       expect(miscTriggerResizeMock).toHaveBeenCalled();
     });
 
     it("does not triggers resize if property is not set", () => {
       ///WHEN
-      Config.setConfig("startGraphsAtZero", true, false);
+      Config.setConfig("startGraphsAtZero", true);
 
       expect(miscTriggerResizeMock).not.toHaveBeenCalled();
     });
 
     it("does not triggers resize if property on nosave", () => {
       ///WHEN
-      Config.setConfig("maxLineWidth", 50, true);
+      Config.setConfig("maxLineWidth", 50, { nosave: true });
 
       expect(miscTriggerResizeMock).not.toHaveBeenCalled();
     });

diff --git a/frontend/__tests__/setup-tests.ts b/frontend/__tests__/setup-tests.ts
@@ -1,5 +1,7 @@
 import { vi } from "vitest";
 import $ from "jquery";
+import { ElementWithUtils } from "../src/ts/utils/dom";
+
 //@ts-expect-error add to globl
 global["$"] = $;
 //@ts-expect-error add to globl
@@ -19,33 +21,52 @@ vi.mock("../src/ts/firebase", () => ({
 }));
 
 vi.mock("../src/ts/utils/dom", () => {
-  const createMockElement = (): any => {
-    const mock = {
-      qsr: vi.fn(),
+  const createMockElement = (): ElementWithUtils => {
+    return {
+      disable: vi.fn().mockReturnThis(),
+      enable: vi.fn().mockReturnThis(),
+      isDisabled: vi.fn().mockReturnValue(false),
+      getAttribute: vi.fn(),
+      hasAttribute: vi.fn().mockReturnValue(false),
+      setAttribute: vi.fn().mockReturnThis(),
+      removeAttribute: vi.fn().mockReturnThis(),
+      isChecked: vi.fn().mockReturnValue(false),
+      hide: vi.fn().mockReturnThis(),
+      show: vi.fn().mockReturnThis(),
+      addClass: vi.fn().mockReturnThis(),
+      removeClass: vi.fn().mockReturnThis(),
+      hasClass: vi.fn().mockReturnValue(false),
+      toggleClass: vi.fn().mockReturnThis(),
+      on: vi.fn().mockReturnThis(),
+      onChild: vi.fn().mockReturnThis(),
+      setHtml: vi.fn().mockReturnThis(),
+      setText: vi.fn().mockReturnThis(),
+      remove: vi.fn(),
+      setStyle: vi.fn().mockReturnThis(),
+      getStyle: vi.fn().mockReturnValue({}),
+      isFocused: vi.fn().mockReturnValue(false),
       qs: vi.fn().mockReturnValue(null),
-      find: vi.fn(),
-      addClass: vi.fn(),
-      removeClass: vi.fn(),
-      hide: vi.fn(),
-      show: vi.fn(),
-      setText: vi.fn(),
-      prependHtml: vi.fn(),
-      empty: vi.fn(),
-      appendHtml: vi.fn(),
+      qsr: vi.fn().mockImplementation(() => createMockElement()),
+      qsa: vi.fn().mockReturnValue([]),
+      empty: vi.fn().mockReturnThis(),
+      appendHtml: vi.fn().mockReturnThis(),
+      append: vi.fn().mockReturnThis(),
+      prependHtml: vi.fn().mockReturnThis(),
+      dispatch: vi.fn().mockReturnThis(),
+      offset: vi.fn().mockReturnValue({ top: 0, left: 0 }),
+      wrapWith: vi.fn().mockImplementation(() => createMockElement()),
+      setValue: vi.fn().mockReturnThis(),
+      getValue: vi.fn().mockReturnValue(""),
+      getParent: vi.fn().mockImplementation(() => createMockElement()),
+      replaceWith: vi.fn().mockReturnThis(),
+      getOffsetWidth: vi.fn().mockReturnValue(0),
+      getOffsetHeight: vi.fn().mockReturnValue(0),
+      getOffsetTop: vi.fn().mockReturnValue(0),
+      getOffsetLeft: vi.fn().mockReturnValue(0),
+      animate: vi.fn().mockResolvedValue(null),
+      promiseAnimate: vi.fn().mockResolvedValue(null),
       native: document.createElement("div"),
     };
-
-    // Make chainable methods return the mock itself
-    mock.qsr.mockImplementation(() => createMockElement());
-    mock.addClass.mockReturnValue(mock);
-    mock.removeClass.mockReturnValue(mock);
-    mock.hide.mockReturnValue(mock);
-    mock.show.mockReturnValue(mock);
-    mock.setText.mockReturnValue(mock);
-    mock.prependHtml.mockReturnValue(mock);
-    mock.empty.mockReturnValue(mock);
-
-    return mock;
   };
 
   return {

diff --git a/frontend/__tests__/utils/url-handler.spec.ts b/frontend/__tests__/utils/url-handler.spec.ts
@@ -56,8 +56,12 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("mode", "time", true);
-      expect(setConfigMock).toHaveBeenCalledWith("time", 60, true);
+      expect(setConfigMock).toHaveBeenCalledWith("mode", "time", {
+        nosave: true,
+      });
+      expect(setConfigMock).toHaveBeenCalledWith("time", 60, {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets time", () => {
@@ -70,8 +74,12 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("mode", "time", true);
-      expect(setConfigMock).toHaveBeenCalledWith("time", 30, true);
+      expect(setConfigMock).toHaveBeenCalledWith("mode", "time", {
+        nosave: true,
+      });
+      expect(setConfigMock).toHaveBeenCalledWith("time", 30, {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets word count", () => {
@@ -84,8 +92,12 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("mode", "words", true);
-      expect(setConfigMock).toHaveBeenCalledWith("words", 50, true);
+      expect(setConfigMock).toHaveBeenCalledWith("mode", "words", {
+        nosave: true,
+      });
+      expect(setConfigMock).toHaveBeenCalledWith("words", 50, {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets quote length", () => {
@@ -98,8 +110,10 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("mode", "quote", true);
-      expect(setConfigMock).toHaveBeenCalledWith("quoteLength", [-2], false);
+      expect(setConfigMock).toHaveBeenCalledWith("mode", "quote", {
+        nosave: true,
+      });
+      expect(setConfigMock).toHaveBeenCalledWith("quoteLength", [-2]);
       expect(setSelectedQuoteIdMock).toHaveBeenCalledWith(512);
       expect(restartTestMock).toHaveBeenCalled();
     });
@@ -111,7 +125,9 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("punctuation", true, true);
+      expect(setConfigMock).toHaveBeenCalledWith("punctuation", true, {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets numbers", () => {
@@ -122,7 +138,9 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("numbers", false, true);
+      expect(setConfigMock).toHaveBeenCalledWith("numbers", false, {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets language", () => {
@@ -133,7 +151,9 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("language", "english", true);
+      expect(setConfigMock).toHaveBeenCalledWith("language", "english", {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets difficulty", () => {
@@ -144,7 +164,9 @@ describe("url-handler", () => {
       loadTestSettingsFromUrl("");
 
       //THEN
-      expect(setConfigMock).toHaveBeenCalledWith("difficulty", "master", true);
+      expect(setConfigMock).toHaveBeenCalledWith("difficulty", "master", {
+        nosave: true,
+      });
       expect(restartTestMock).toHaveBeenCalled();
     });
     it("sets funbox", () => {
@@ -160,7 +182,9 @@ describe("url-handler", () => {
       expect(setConfigMock).toHaveBeenCalledWith(
         "funbox",
         ["crt", "choo_choo"],
-        true,
+        {
+          nosave: true,
+        },
       );
       expect(restartTestMock).toHaveBeenCalled();
     });
@@ -177,7 +201,9 @@ describe("url-handler", () => {
       expect(setConfigMock).toHaveBeenCalledWith(
         "funbox",
         ["crt", "choo_choo"],
-        true,
+        {
+          nosave: true,
+        },
       );
       expect(restartTestMock).toHaveBeenCalled();
     });

diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
@@ -76,8 +76,8 @@ export function update(themes: Theme[]): void {
 }
 
 // subscribe to theme-related config events to update the theme command list
-ConfigEvent.subscribe((eventKey, _eventValue) => {
-  if (eventKey === "favThemes") {
+ConfigEvent.subscribe(({ key }) => {
+  if (key === "favThemes") {
     // update themes list when favorites change
     try {
       update(ThemesList);