@code-coaching/vuetiful 0.23.0 → 0.23.2

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

@@ -1,24 +1,26 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { Theme } from "./theme.service";
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Theme } from './theme.service';
 
 const localStorageMock = {
   getItem: vi.fn(),
   setItem: vi.fn(),
 };
 
-describe("useTheme", () => {
+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 });
+  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 localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
 
-        const { useTheme } = await import("./theme.service");
+        const { useTheme } = await import('./theme.service');
         const { initializeTheme } = useTheme();
 
         initializeTheme();
@@ -27,68 +29,74 @@ describe("useTheme", () => {
       });
     });
 
-    describe("given in browser", () => {
+    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 });
+      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 localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
 
-          const { useTheme } = await import("./theme.service");
+          const { useTheme } = await import('./theme.service');
           const { initializeTheme, THEMES, chosenTheme } = useTheme();
 
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          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");
+      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");
+          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
           localStorageSpy.mockReturnValueOnce(THEMES.ROCKET);
 
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          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 });
+      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 { useTheme } = await import('./theme.service');
           const { initializeTheme, THEMES, chosenTheme } = useTheme();
 
-          const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
-          localStorageSpy.mockReturnValueOnce("invalid-theme");
+          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
+          localStorageSpy.mockReturnValueOnce('invalid-theme');
 
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
+          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");
+  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);
@@ -96,34 +104,34 @@ describe("useTheme", () => {
         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");
+    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");
+        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");
+    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: "" };
+        const theme: Theme = { name: 'fake theme', url: '' };
         overwriteThemes([themes.value[1], theme]);
 
-        loadTheme("invalid-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");
+  describe('registerAllBuiltInThemes', () => {
+    it('should register all built in themes', async () => {
+      const { useTheme } = await import('./theme.service');
       const { registerAllBuiltInThemes, THEMES, themes } = useTheme();
 
       registerAllBuiltInThemes();
@@ -132,25 +140,25 @@ describe("useTheme", () => {
     });
   });
 
-  describe("registerTheme", () => {
-    it("should register a theme", async () => {
-      const { useTheme } = await import("./theme.service");
+  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);
+      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");
+  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");
+        const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
 
-        saveThemeToStorage("invalid-theme");
+        saveThemeToStorage('invalid-theme');
 
         expect(localStorageSpy).not.toHaveBeenCalled();
       });

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

@@ -1,5 +1,5 @@
-import { readonly, Ref, ref } from "vue";
-import { usePlatform } from "../platform/platform.service";
+import { readonly, Ref, ref } from 'vue';
+import { usePlatform } from '../platform/platform.service';
 
 const { isBrowser } = usePlatform();
 
@@ -9,13 +9,13 @@ export interface Theme {
 }
 
 const THEMES = {
-  VUETIFUL: "vuetiful",
-  ROCKET: "rocket",
-  SAHARA: "sahara",
-  SEAFOAM: "seafoam",
-  SEASONAL: "seasonal",
-  SKELETON: "skeleton",
-  VINTAGE: "vintage",
+  VUETIFUL: 'vuetiful',
+  ROCKET: 'rocket',
+  SAHARA: 'sahara',
+  SEAFOAM: 'seafoam',
+  SEASONAL: 'seasonal',
+  SKELETON: 'skeleton',
+  VINTAGE: 'vintage',
 };
 
 const builtInUrl = (name: string): string => {
@@ -43,14 +43,14 @@ const useTheme = () => {
     if (!theme) return;
 
     if (isBrowser) {
-      localStorage.setItem("vuetiful-theme", theme.name);
-      document.body.setAttribute("data-theme", theme.name);
+      localStorage.setItem('vuetiful-theme', theme.name);
+      document.body.setAttribute('data-theme', theme.name);
     }
   };
 
   const initializeTheme = (callback?: Function): void => {
     if (isBrowser) {
-      const storedTheme = localStorage.getItem("vuetiful-theme");
+      const storedTheme = localStorage.getItem('vuetiful-theme');
       if (storedTheme) loadTheme(storedTheme, callback);
       else loadTheme(defaultTheme, callback);
     }
@@ -58,27 +58,26 @@ const useTheme = () => {
 
   const loadTheme = (themeName: string, callback?: Function) => {
     let themeToLoad = themes.value.find((t) => t.name === themeName);
-    if (!themeToLoad)
-      themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
+    if (!themeToLoad) themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
 
     const theme: Theme = themeToLoad;
     chosenTheme.value = theme.name;
 
-    const existingStyle = document.getElementById("theme");
+    const existingStyle = document.getElementById('theme');
     let themeUrl = theme.url;
 
-    const link = document.createElement("link");
-    link.id = "theme";
+    const link = document.createElement('link');
+    link.id = 'theme';
     link.href = themeUrl;
-    link.type = "text/css";
-    link.rel = "stylesheet";
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
     link.onload = () => {
       if (existingStyle) existingStyle.remove();
       saveThemeToStorage(theme.name);
       if (callback) callback();
     };
 
-    const head = document.querySelector("head");
+    const head = document.querySelector('head');
     if (head) head.appendChild(link);
   };