@code-coaching/vuetiful 0.1.4 → 0.3.0

package/src/utils/dark-mode/dark-mode.service.test.ts

@@ -0,0 +1,234 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+};
+const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
+
+describe("useDarkMode", () => {
+  afterEach(() => {
+    vi.resetModules();
+  });
+  describe("getModeUserPrefers", () => {
+    describe("given not in browser", () => {
+      it("should return default modeUserPrefers", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+
+        const { useDarkMode } = await import("./dark-mode.service");
+        const { getModeUserPrefers } = useDarkMode();
+        expect(getModeUserPrefers()).toBe(undefined);
+      });
+    });
+
+    describe("given in browser", () => {
+      describe("given no modeUserPrefers in localStorage", () => {
+        it("should return default modeUserPrefers", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeUserPrefers } = useDarkMode();
+
+          window.localStorage = localStorageMock as any;
+          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce(null);
+
+          expect(getModeUserPrefers()).toBe(undefined);
+        });
+      });
+      describe("given modeUserPrefers in localStorage", () => {
+        it("should return the value", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeUserPrefers } = useDarkMode();
+
+          window.localStorage = localStorageMock as any;
+          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+
+          expect(getModeUserPrefers()).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe("getModeOsPrefers", () => {
+    describe("given not in browser", () => {
+      it("should return default modeOsPrefers", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+
+        const { useDarkMode } = await import("./dark-mode.service");
+        const { getModeOsPrefers } = useDarkMode();
+        expect(getModeOsPrefers()).toBe(false);
+      });
+    });
+
+    describe("given in browser", () => {
+      describe("given prefers-color-scheme: light", () => {
+        it("should return true", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+          const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeOsPrefers, MODE } = useDarkMode();
+
+          window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
+          expect(getModeOsPrefers()).toBe(MODE.LIGHT);
+          expect(localStorageSpy).toHaveBeenCalledWith("modeOsPrefers", "true");
+        });
+      });
+      describe("given prefers-color-scheme: dark", () => {
+        it("should return false", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+          const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeOsPrefers, MODE } = useDarkMode();
+
+          window.matchMedia = matchMediaMock(MODE.DARK) as any;
+          expect(getModeOsPrefers()).toBe(MODE.DARK);
+          expect(localStorageSpy).toHaveBeenCalledWith("modeOsPrefers", "false");
+        });
+      });
+    });
+  });
+
+  describe("getModeAutoPrefers", () => {
+    describe("given not in browser", () => {
+      it("should return default modeAutoPrefers", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+
+        const { useDarkMode } = await import("./dark-mode.service");
+        const { getModeAutoPrefers } = useDarkMode();
+        expect(getModeAutoPrefers()).toBe(false);
+      });
+    });
+
+    describe("given in browser", () => {
+      describe("given no modeUserPrefers in localStorage", () => {
+        it("should return default modeAutoPrefers", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeAutoPrefers } = useDarkMode();
+
+          window.localStorage = localStorageMock as any;
+          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce(null);
+
+          expect(getModeAutoPrefers()).toBe(false);
+        });
+      });
+      describe("given modeUserPrefers in localStorage", () => {
+        it("should return the value", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useDarkMode } = await import("./dark-mode.service");
+          const { getModeAutoPrefers } = useDarkMode();
+
+          window.localStorage = localStorageMock as any;
+          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+
+          expect(getModeAutoPrefers()).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe("setModeUserPrefers", () => {
+    describe("given not in browser", () => {
+      it("should set modeUserPrefers", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+        vi.spyOn(window.localStorage, "setItem");
+
+        const { useDarkMode } = await import("./dark-mode.service");
+        const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
+
+        setModeUserPrefers(true);
+        expect(modeUserPrefers.value).toBe(true);
+        expect(window.localStorage.setItem).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("given in browser", () => {
+      it("should set modeUserPrefers and localStorage", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+        const { useDarkMode } = await import("./dark-mode.service");
+        const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
+
+        const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+
+        setModeUserPrefers(true);
+        expect(modeUserPrefers.value).toBe(true);
+        expect(localStorageSpy).toHaveBeenCalledWith("modeUserPrefers", "true");
+      });
+    });
+  });
+
+  describe("setModeCurrent", () => {
+    it("light mode set", async () => {
+      const { useDarkMode } = await import("./dark-mode.service");
+      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+
+      setModeCurrent(MODE.LIGHT);
+      expect(currentMode.value).toBe(MODE.LIGHT);
+      expect(document.documentElement.classList.contains("dark")).toBe(false);
+    });
+    it("dark mode set", async () => {
+      const { useDarkMode } = await import("./dark-mode.service");
+      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+
+      setModeCurrent(MODE.DARK);
+      expect(currentMode.value).toBe(MODE.DARK);
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+  });
+
+  describe("initializeMode", () => {
+    it("should set currentMode", async () => {
+      const { useDarkMode } = await import("./dark-mode.service");
+      const { initializeMode, currentMode, getModeAutoPrefers } = useDarkMode();
+
+      const mode = getModeAutoPrefers();
+      initializeMode();
+      expect(currentMode.value).toBe(mode);
+    });
+  });
+
+  describe("autoModeWatcher", () => {
+    describe("given mode changes", () => {
+      it("should set modeCurrent", async () => {
+        const { useDarkMode } = await import("./dark-mode.service");
+        const darkMode = useDarkMode();
+
+        const mql = {
+          matches: true,
+          onchange: () => {
+            darkMode.setModeCurrent(mql.matches);
+          },
+        };
+        vi.spyOn(window, "matchMedia").mockReturnValueOnce(mql as any);
+
+        darkMode.autoModeWatcher();
+
+        mql.matches = false;
+        mql.onchange?.();
+        expect(darkMode.currentMode.value).toBe(false);
+
+        mql.matches = true;
+        mql.onchange?.();
+        expect(darkMode.currentMode.value).toBe(true);
+      });
+    });
+  });
+});

package/src/utils/dark-mode/{dark-mode.ts → dark-mode.service.ts}

@@ -1,5 +1,5 @@
 import { readonly, Ref, ref } from "vue";
-import { usePlatform } from "../platform/platform";
+import { usePlatform } from "../platform/platform.service";
 
 const { isBrowser } = usePlatform();
 
@@ -14,7 +14,8 @@ const modeUserPrefers: Ref<boolean | undefined> = ref(undefined);
 
 const useDarkMode = () => {
   const getModeOsPrefers = (): boolean => {
-    const prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
+    let prefersLightMode = false;
+    if (isBrowser) prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
     setModeOsPrefers(prefersLightMode);
     return prefersLightMode;
   };
@@ -30,8 +31,8 @@ const useDarkMode = () => {
   const getModeAutoPrefers = (): boolean => {
     const os = getModeOsPrefers();
     const user = getModeUserPrefers();
-    const modeValue = user !== undefined ? user : os;
-    return modeValue;
+    if (user === undefined) return os;
+    return user;
   };
 
   const setModeOsPrefers = (value: boolean) => {

package/src/utils/dark-mode/dark-mode.vue

@@ -26,7 +26,7 @@
 <script lang="ts">
 import type { CssClasses } from "@/index";
 import { computed, ComputedRef, defineComponent, onMounted } from "vue";
-import { useDarkMode } from "./dark-mode";
+import { useDarkMode } from "./dark-mode.service";
 
 export default defineComponent({
   props: {

package/src/utils/index.test.ts

@@ -0,0 +1,11 @@
+// test that all exports are defined
+import * as utils from "./index";
+import { describe, it, expect } from "vitest";
+
+describe("utils", () => {
+  Object.entries(utils).forEach(([key, value]) => {
+    it(`${key} is defined`, () => {
+      expect(value).toBeDefined();
+    });
+  });
+})

package/src/utils/index.ts

@@ -1,8 +1,7 @@
-import { useDarkMode } from "./dark-mode/dark-mode";
+import CodeBlock from "./code-block/code-block.vue";
+import { useDarkMode } from "./dark-mode/dark-mode.service";
 import DarkModeSwitch from "./dark-mode/dark-mode.vue";
-import { useTheme } from "./theme/theme";
 import ThemeSwitcher from "./theme/theme-switcher.vue";
-
-import CodeBlock from "./code-block/code-block.vue";
+import { useTheme } from "./theme/theme.service";
 
 export { DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme, CodeBlock };

package/src/utils/platform/platform.service.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from "vitest";
+import { usePlatform } from "./platform.service";
+
+const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
+
+describe("usePlatform", () => {
+  describe("isBrowser", () => {
+    it("should return true when window is defined", () => {
+      const { isBrowser } = usePlatform();
+      expect(isBrowser).toBe(true);
+    });
+
+    it("should return false when window is not defined", () => {
+      window = undefined as any;
+      const { isBrowser } = usePlatform();
+      expect(isBrowser).toBe(false);
+    });
+  });
+});

package/src/utils/theme/callback.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * No clue why, but when this test is added to theme.service.test.ts, it fails.
+ * Running it in isolation works fine.
+ */
+
+describe("given there is a callback", () => {
+  it("should call the callback", async () => {
+    const { useTheme } = await import("./theme.service");
+    const { loadTheme } = useTheme();
+
+    const callbackSpy = vi.fn();
+    const callbackFunction = () => {
+      callbackSpy();
+    };
+    loadTheme("vuetiful", callbackFunction);
+    const link = document.querySelector("#theme") as HTMLLinkElement;
+    // @ts-ignore
+    link.onload();
+
+    expect(callbackSpy).toHaveBeenCalled();
+  });
+});

package/src/utils/theme/remove.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * No clue why, but when this test is added to theme.service.test.ts, it fails.
+ * Running it in isolation works fine.
+ */
+
+describe("given there is no existing theme style tag", () => {
+  it.only("should create a new theme style tag", async () => {
+    const { useTheme } = await import("./theme.service");
+    const { loadTheme } = useTheme();
+
+    const removeObject = { remove: () => {} };
+    const removeSpy = vi.spyOn(removeObject, "remove");
+    vi.spyOn(window.document, "getElementById").mockReturnValueOnce(removeObject as any);
+
+    loadTheme("vuetiful");
+
+    const link = document.querySelector("#theme") as HTMLLinkElement;
+    // @ts-ignore
+    link.onload();
+
+    expect(removeSpy).toHaveBeenCalled();
+  });
+});

package/src/utils/theme/theme.service.test.ts

@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Theme } from "./theme.service";
+
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+};
+
+describe("useTheme", () => {
+  afterEach(() => {
+    vi.resetModules();
+  });
+  describe("initializetheme", () => {
+    describe("given not in browser", () => {
+      it("should set the theme to the default theme if no theme is stored", async () => {
+        const platform = await import("../platform/platform.service");
+        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+
+        const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
+
+        const { useTheme } = await import("./theme.service");
+        const { initializeTheme } = useTheme();
+
+        initializeTheme();
+
+        expect(localStorageSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("given in browser", () => {
+      beforeEach(() => {
+        window.localStorage = localStorageMock as any;
+      });
+      describe("given no theme is stored", () => {
+        it("should set the theme to the default theme", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
+
+          const { useTheme } = await import("./theme.service");
+          const { initializeTheme, THEMES, chosenTheme } = useTheme();
+
+          initializeTheme();
+
+          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+        });
+      });
+      describe("given a theme is stored", () => {
+        it("should set the theme to the stored theme", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useTheme } = await import("./theme.service");
+          const { initializeTheme, THEMES, chosenTheme } = useTheme();
+
+          const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
+          localStorageSpy.mockReturnValueOnce(THEMES.ROCKET);
+
+          initializeTheme();
+
+          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          expect(chosenTheme.value).toBe(THEMES.ROCKET);
+        });
+      });
+
+      describe("given the theme is not valid", () => {
+        it("should set the theme to the default theme", async () => {
+          const platform = await import("../platform/platform.service");
+          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+
+          const { useTheme } = await import("./theme.service");
+          const { initializeTheme, THEMES, chosenTheme } = useTheme();
+
+          const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
+          localStorageSpy.mockReturnValueOnce("invalid-theme");
+
+          initializeTheme();
+
+          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+        });
+      });
+    });
+  });
+
+  describe("loadTheme", () => {
+    describe("given theme name exists in themes", () => {
+      it("should set the theme to the given theme", async () => {
+        const { useTheme } = await import("./theme.service");
+        const { loadTheme, THEMES, chosenTheme } = useTheme();
+
+        loadTheme(THEMES.ROCKET);
+
+        expect(chosenTheme.value).toBe(THEMES.ROCKET);
+      });
+    });
+    describe("given theme name does not exist in themes", () => {
+      it("should set the theme to the default theme", async () => {
+        const { useTheme } = await import("./theme.service");
+        const { loadTheme, THEMES, chosenTheme } = useTheme();
+
+        loadTheme("invalid-theme");
+
+        expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+      });
+    });
+    describe("given default theme is not in themes", () => {
+      it("should set the theme to the first theme in the themes object", async () => {
+        const { useTheme } = await import("./theme.service");
+        const { loadTheme, THEMES, chosenTheme, overwriteThemes, themes } = useTheme();
+
+        const theme: Theme = { name: "fake theme", url: "" };
+        overwriteThemes([themes.value[1], theme]);
+
+        loadTheme("invalid-theme");
+
+        expect(chosenTheme.value).toBe(themes.value[0].name);
+      });
+    });
+  });
+
+  describe("registerAllBuiltInThemes", () => {
+    it("should register all built in themes", async () => {
+      const { useTheme } = await import("./theme.service");
+      const { registerAllBuiltInThemes, THEMES, themes } = useTheme();
+
+      registerAllBuiltInThemes();
+
+      expect(themes.value).toHaveLength(Object.keys(THEMES).length);
+    });
+  });
+
+  describe("registerTheme", () => {
+    it("should register a theme", async () => {
+      const { useTheme } = await import("./theme.service");
+      const { registerTheme } = useTheme();
+
+      const theme: Theme = { name: "fake theme", url: "" };
+      expect(registerTheme(theme.name, "")).toEqual(theme);
+    });
+  });
+
+  describe("saveThemeToStorage", () => {
+    describe("given the theme does not exist", () => {
+      it("should not save the theme to storage", async () => {
+        const { useTheme } = await import("./theme.service");
+        const { saveThemeToStorage } = useTheme();
+
+        const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+
+        saveThemeToStorage("invalid-theme");
+
+        expect(localStorageSpy).not.toHaveBeenCalled();
+      });
+    })
+  })
+
+});

package/src/utils/theme/{theme.ts → theme.service.ts}

@@ -1,9 +1,9 @@
 import { readonly, Ref, ref } from "vue";
-import { usePlatform } from "../platform/platform";
+import { usePlatform } from "../platform/platform.service";
 
 const { isBrowser } = usePlatform();
 
-interface Theme {
+export interface Theme {
   name: string;
   url: string;
 }
@@ -38,7 +38,7 @@ const defaultTheme = THEMES.VUETIFUL;
 const chosenTheme = ref(defaultTheme);
 
 const useTheme = () => {
-  const setTheme = (name: string): void => {
+  const saveThemeToStorage = (name: string): void => {
     const theme = themes.value.find((t) => t.name === name);
     if (!theme) return;
 
@@ -74,10 +74,8 @@ const useTheme = () => {
     link.rel = "stylesheet";
     link.onload = () => {
       if (existingStyle) existingStyle.remove();
-      setTheme(theme.name);
-      if (callback) {
-        callback();
-      }
+      saveThemeToStorage(theme.name);
+      if (callback) callback();
     };
 
     const head = document.querySelector("head");
@@ -102,6 +100,7 @@ const useTheme = () => {
 
     initializeTheme,
     loadTheme,
+    saveThemeToStorage,
 
     THEMES,
     overwriteThemes,

package/dist/types/constants/MyConstants.d.ts

@@ -1 +0,0 @@
-export declare const MAGIC_NUM = 100;

package/dist/types/constants/index.d.ts

@@ -1,2 +0,0 @@
-import * as MyConstants from './MyConstants';
-export { MyConstants };

package/src/constants/MyConstants.ts

@@ -1 +0,0 @@
-export const MAGIC_NUM = 100

package/src/constants/index.ts

@@ -1,5 +0,0 @@
-import * as MyConstants from './MyConstants'
-
-export {
-  MyConstants
-}