fix(presets): preset with minWpmCustom should not activate minWpm (@fehmer, @Miodec) (monkeytypegame#6857)

fehmer · Miodec · web-flow · commit 568012af6ef7 · 2025-08-10T13:45:04.000+02:00
Co-authored-by: Miodec &lt;jack@monkeytype.com&gt;
diff --git a/frontend/__tests__/controllers/preset-controller.spec.ts b/frontend/__tests__/controllers/preset-controller.spec.ts
@@ -0,0 +1,163 @@
+import * as PresetController from "../../src/ts/controllers/preset-controller";
+import { Preset } from "@monkeytype/schemas/presets";
+import * as DB from "../../src/ts/db";
+import * as UpdateConfig from "../../src/ts/config";
+import * as Notifications from "../../src/ts/elements/notifications";
+import * as TestLogic from "../../src/ts/test/test-logic";
+import * as TagController from "../../src/ts/controllers/tag-controller";
+import { deepClone } from "../../src/ts/utils/misc";
+
+describe("PresetController", () => {
+  describe("apply", () => {
+    vi.mock("../../src/ts/test/test-logic", () => ({
+      restart: vi.fn(),
+    }));
+    const dbGetSnapshotMock = vi.spyOn(DB, "getSnapshot");
+    const configApplyMock = vi.spyOn(UpdateConfig, "apply");
+    const configSaveFullConfigMock = vi.spyOn(
+      UpdateConfig,
+      "saveFullConfigToLocalStorage"
+    );
+    const configGetConfigChangesMock = vi.spyOn(
+      UpdateConfig,
+      "getConfigChanges"
+    );
+    const notificationAddMock = vi.spyOn(Notifications, "add");
+    const testRestartMock = vi.spyOn(TestLogic, "restart");
+    const tagControllerClearMock = vi.spyOn(TagController, "clear");
+    const tagControllerSetMock = vi.spyOn(TagController, "set");
+    const tagControllerSaveActiveMock = vi.spyOn(
+      TagController,
+      "saveActiveToLocalStorage"
+    );
+
+    beforeEach(() => {
+      [
+        dbGetSnapshotMock,
+        configApplyMock,
+        configSaveFullConfigMock,
+        configGetConfigChangesMock,
+        notificationAddMock,
+        testRestartMock,
+        tagControllerClearMock,
+        tagControllerSetMock,
+        tagControllerSaveActiveMock,
+      ].forEach((it) => it.mockClear());
+
+      configApplyMock.mockResolvedValue();
+    });
+
+    it("should apply for full preset", async () => {
+      //GIVEN
+      const preset = givenPreset({ config: { punctuation: true } });
+
+      //WHEN
+      await PresetController.apply(preset._id);
+
+      //THEN
+      expect(configApplyMock).toHaveBeenCalledWith(preset.config);
+      expect(tagControllerClearMock).toHaveBeenCalled();
+      expect(testRestartMock).toHaveBeenCalled();
+      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", 1, {
+        duration: 2,
+      });
+      expect(configSaveFullConfigMock).toHaveBeenCalled();
+    });
+
+    it("should apply for full preset with tags", async () => {
+      //GIVEN
+      const preset = givenPreset({
+        config: { tags: ["tagOne", "tagTwo"] },
+      });
+
+      //WHEN
+      await PresetController.apply(preset._id);
+
+      //THEN
+      expect(tagControllerClearMock).toHaveBeenCalled();
+      expect(tagControllerSetMock).toHaveBeenNthCalledWith(
+        1,
+        "tagOne",
+        true,
+        false
+      );
+      expect(tagControllerSetMock).toHaveBeenNthCalledWith(
+        2,
+        "tagTwo",
+        true,
+        false
+      );
+      expect(tagControllerSaveActiveMock).toHaveBeenCalled();
+    });
+
+    it("should ignore unknown preset", async () => {
+      //WHEN
+      await PresetController.apply("unknown");
+      //THEN
+      expect(notificationAddMock).not.toHaveBeenCalled();
+      expect(configApplyMock).not.toHaveBeenCalled();
+    });
+
+    it("should apply for partial preset", async () => {
+      //GIVEN
+      const preset = givenPreset({
+        config: { punctuation: true },
+        settingGroups: ["test"],
+      });
+
+      UpdateConfig.setNumbers(true);
+      const oldConfig = deepClone(UpdateConfig.default);
+
+      //WHEN
+      await PresetController.apply(preset._id);
+
+      //THEN
+      expect(configApplyMock).toHaveBeenCalledWith({
+        ...oldConfig,
+        numbers: true,
+        punctuation: true,
+      });
+      expect(testRestartMock).toHaveBeenCalled();
+      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", 1, {
+        duration: 2,
+      });
+      expect(configSaveFullConfigMock).toHaveBeenCalled();
+    });
+
+    it("should apply for partial preset with tags", async () => {
+      //GIVEN
+      const preset = givenPreset({
+        config: { tags: ["tagOne", "tagTwo"] },
+        settingGroups: ["test", "behavior"],
+      });
+
+      //WHEN
+      await PresetController.apply(preset._id);
+
+      //THEN
+      expect(tagControllerClearMock).toHaveBeenCalled();
+      expect(tagControllerSetMock).toHaveBeenNthCalledWith(
+        1,
+        "tagOne",
+        true,
+        false
+      );
+      expect(tagControllerSetMock).toHaveBeenNthCalledWith(
+        2,
+        "tagTwo",
+        true,
+        false
+      );
+      expect(tagControllerSaveActiveMock).toHaveBeenCalled();
+    });
+
+    const givenPreset = (partialPreset: Partial<Preset>): Preset => {
+      const preset: Preset = {
+        _id: "1",
+        ...partialPreset,
+      } as any;
+      dbGetSnapshotMock.mockReturnValue({ presets: [preset] } as any);
+      return preset;
+    };
+  });
+});
diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
@@ -1100,6 +1100,9 @@ describe("Config", () => {
   describe("apply", () => {
     it("should fill missing values with defaults", async () => {
       //GIVEN
+      replaceConfig({
+        mode: "words",
+      });
       await Config.apply({
         numbers: true,
         punctuation: true,
@@ -1198,26 +1201,46 @@ describe("Config", () => {
         numbers: true,
       });
       await Config.apply({
+        ...Config.getConfigChanges(),
         punctuation: true,
       });
       const config = getConfig();
       expect(config.numbers).toBe(true);
     });
 
-    it("should reset all values to default if fullReset is true", async () => {
+    it("should not enable minWpm if not provided", async () => {
       replaceConfig({
-        numbers: true,
-        theme: "serika",
+        minWpm: "off",
+      });
+      await Config.apply({
+        minWpmCustomSpeed: 100,
+      });
+      const config = getConfig();
+      expect(config.minWpm).toBe("off");
+      expect(config.minWpmCustomSpeed).toEqual(100);
+    });
+
+    it("should apply minWpm if part of the full config", async () => {
+      replaceConfig({
+        minWpm: "off",
+      });
+      await Config.apply({
+        minWpm: "custom",
+        minWpmCustomSpeed: 100,
+      });
+      const config = getConfig();
+      expect(config.minWpm).toBe("custom");
+      expect(config.minWpmCustomSpeed).toEqual(100);
+    });
+
+    it("should keep the keymap off when applying keymapLayout", async () => {
+      replaceConfig({});
+      await Config.apply({
+        keymapLayout: "qwerty",
       });
-      await Config.apply(
-        {
-          punctuation: true,
-        },
-        true
-      );
       const config = getConfig();
-      expect(config.numbers).toBe(false);
-      expect(config.theme).toEqual("serika_dark");
+      expect(config.keymapLayout).toEqual("qwerty");
+      expect(config.keymapMode).toEqual("off");
     });
   });
 });
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
@@ -20,11 +20,7 @@ import { Config, FunboxName } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Language } from "@monkeytype/schemas/languages";
 import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
-import {
-  migrateConfig,
-  replaceLegacyValues,
-  sanitizeConfig,
-} from "./utils/config";
+import { migrateConfig } from "./utils/config";
 import { getDefaultConfig } from "./constants/default-config";
 import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
 import { ZodSchema } from "zod";
@@ -819,41 +815,28 @@ const lastConfigsToApply: Set<keyof Config> = new Set([
   "funbox",
 ]);
 
-export async function apply(
-  configToApply: Config | Partial<Config>,
-  fullReset = false
-): Promise<void> {
-  if (configToApply === undefined || configToApply === null) return;
+export async function apply(partialConfig: Partial<Config>): Promise<void> {
+  if (partialConfig === undefined || partialConfig === null) return;
 
-  //remove additional keys, migrate old values if needed
-  configToApply = sanitizeConfig(replaceLegacyValues(configToApply));
+  //migrate old values if needed, remove additional keys and merge with default config
+  const fullConfig: Config = migrateConfig(partialConfig);
 
   ConfigEvent.dispatch("fullConfigChange");
 
   const defaultConfig = getDefaultConfig();
-  for (const key of typedKeys(fullReset ? defaultConfig : configToApply)) {
+  for (const key of typedKeys(fullConfig)) {
     //@ts-expect-error this is fine, both are of type config
     config[key] = defaultConfig[key];
   }
 
-  const partialKeys = typedKeys(configToApply);
-  const partialKeysToApplyFirst = partialKeys.filter(
+  const configKeysToReset: (keyof Config)[] = [];
+
+  const firstKeys = typedKeys(fullConfig).filter(
     (key) => !lastConfigsToApply.has(key)
   );
-  const partialKeysToApplyLast = Array.from(lastConfigsToApply.values()).filter(
-    (key) => partialKeys.includes(key)
-  );
-  const partialKeysToApply = [
-    ...partialKeysToApplyFirst,
-    ...partialKeysToApplyLast,
-  ];
-
-  const configKeysToReset: (keyof Config)[] = [];
 
-  for (const configKey of partialKeysToApply) {
-    const configValue = configToApply[
-      configKey
-    ] as ConfigSchemas.Config[keyof Config];
+  for (const configKey of [...firstKeys, ...lastConfigsToApply]) {
+    const configValue = fullConfig[configKey];
 
     const set = genericSet(configKey, configValue, true);
 
@@ -888,7 +871,7 @@ export async function loadFromLocalStorage(): Promise<void> {
   if (newConfig === undefined) {
     await reset();
   } else {
-    await apply(newConfig, true);
+    await apply(newConfig);
     saveFullConfigToLocalStorage(true);
   }
   loadDone();
@@ -921,7 +904,7 @@ export async function applyFromJson(json: string): Promise<void> {
         },
       }
     );
-    await apply(parsedConfig, true);
+    await apply(parsedConfig);
     saveFullConfigToLocalStorage();
     Notifications.add("Done", 1);
   } catch (e) {
diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts
@@ -154,7 +154,7 @@ async function getDataAndInit(): Promise<boolean> {
     console.log(
       "no local config or local and db configs are different - applying db"
     );
-    await UpdateConfig.apply(snapshot.config, true);
+    await UpdateConfig.apply(snapshot.config);
     UpdateConfig.saveFullConfigToLocalStorage(true);
 
     //funboxes might be different and they wont activate on the account page
diff --git a/frontend/src/ts/controllers/preset-controller.ts b/frontend/src/ts/controllers/preset-controller.ts
@@ -1,10 +1,11 @@
 import { Preset } from "@monkeytype/schemas/presets";
-import * as UpdateConfig from "../config";
+import Config, * as UpdateConfig from "../config";
 import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
 import * as TestLogic from "../test/test-logic";
 import * as TagController from "./tag-controller";
 import { SnapshotPreset } from "../constants/default-snapshot";
+import { deepClone } from "../utils/misc";
 
 export async function apply(_id: string): Promise<void> {
   const snapshot = DB.getSnapshot();
@@ -15,10 +16,14 @@ export async function apply(_id: string): Promise<void> {
     return;
   }
 
-  await UpdateConfig.apply(
-    presetToApply.config,
-    !isPartialPreset(presetToApply)
-  );
+  if (isPartialPreset(presetToApply)) {
+    await UpdateConfig.apply({
+      ...deepClone(Config),
+      ...presetToApply.config,
+    });
+  } else {
+    await UpdateConfig.apply(presetToApply.config);
+  }
 
   if (
     !isPartialPreset(presetToApply) ||
diff --git a/frontend/src/ts/utils/config.ts b/frontend/src/ts/utils/config.ts
@@ -30,14 +30,14 @@ function mergeWithDefaultConfig(config: PartialConfig): Config {
 /**
  * remove all values from the config which are not valid
  */
-export function sanitizeConfig(
+function sanitizeConfig(
   config: ConfigSchemas.PartialConfig
 ): ConfigSchemas.PartialConfig {
   //make sure to use strip()
   return sanitize(ConfigSchemas.PartialConfigSchema.strip(), config);
 }
 
-export function replaceLegacyValues(
+function replaceLegacyValues(
   configObj: ConfigSchemas.PartialConfig
 ): ConfigSchemas.PartialConfig {
   //@ts-expect-error legacy configs
