@code-coaching/vuetiful 0.23.1 → 0.24.0

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

@@ -1,16 +1,16 @@
-import { describe, expect, it, vi } from "vitest";
-import { usePlatform } from "./platform.service";
+import { describe, expect, vi, test } 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", () => {
+describe('usePlatform', () => {
+  describe('isBrowser', () => {
+    test('should return true when window is defined', () => {
       const { isBrowser } = usePlatform();
       expect(isBrowser).toBe(true);
     });
 
-    it("should return false when window is not defined", () => {
+    test('should return false when window is not defined', () => {
       window = undefined as any;
       const { isBrowser } = usePlatform();
       expect(isBrowser).toBe(false);

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

@@ -1,5 +1,5 @@
 const usePlatform = () => {
-  const isBrowser = typeof window !== "undefined";
+  const isBrowser = typeof window !== 'undefined';
   return {
     isBrowser,
   };

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

@@ -1,21 +1,25 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, vi, test } 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();
+describe('given there is a callback', () => {
+  test('should call the callback', async () => {
+    const { useTheme } = await import('./theme.service');
+    const { applyTheme, themes } = useTheme();
 
     const callbackSpy = vi.fn();
     const callbackFunction = () => {
       callbackSpy();
     };
-    loadTheme("vuetiful", callbackFunction);
-    const link = document.querySelector("#theme") as HTMLLinkElement;
+
+    const newTheme = JSON.parse(JSON.stringify(themes[0]));
+    newTheme.name = 'new-theme';
+    applyTheme(newTheme, callbackFunction);
+
+    const link = document.querySelector('#vuetiful-theme') as HTMLLinkElement;
     // @ts-ignore
     link.onload();
 

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

@@ -1,22 +1,24 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, vi, test } 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("should create a new theme style tag", async () => {
-    const { useTheme } = await import("./theme.service");
-    const { loadTheme } = useTheme();
+describe('given there is no existing theme style tag', () => {
+  test('should create a new theme style tag', async () => {
+    const { useTheme } = await import('./theme.service');
+    const { applyTheme, themes } = useTheme();
 
     const removeObject = { remove: () => {} };
-    const removeSpy = vi.spyOn(removeObject, "remove");
-    vi.spyOn(window.document, "getElementById").mockReturnValueOnce(removeObject as any);
+    const removeSpy = vi.spyOn(removeObject, 'remove');
+    vi.spyOn(window.document, 'getElementById').mockReturnValueOnce(removeObject as any);
 
-    loadTheme("vuetiful");
+    const newTheme = JSON.parse(JSON.stringify(themes[0]));
+    newTheme.name = 'new-theme';
+    applyTheme(newTheme);
 
-    const link = document.querySelector("#theme") as HTMLLinkElement;
+    const link = document.querySelector('#vuetiful-theme') as HTMLLinkElement;
     // @ts-ignore
     link.onload();
 

package/src/utils/theme/theme-switcher.vue

@@ -1,80 +1,74 @@
-<template>
-  <div class="vuetiful-theme-switcher">
-    <v-button
-      :class="`vuetiful-theme-switcher__button ${classButton}`"
-      @click="showPopup = !showPopup"
-    >
-      Theme
-    </v-button>
-
-    <div
-      v-if="showPopup"
-      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
-      :class="`${background} ${text} ${widthPopup} ${classList}`"
-    >
-      <section class="flex items-center justify-between">
-        <div class="text-lg">Mode</div>
-        <v-light-switch />
-      </section>
-      <nav
-        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
-        :class="`${heightList} ${classList}`"
-      >
-        <v-button
-          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
-          v-for="(theme, index) in themes"
-          :class="`${classListItem} ${chosenTheme === theme.name ? 'variant-filled-surface' : ''}`"
-          :key="index"
-          @click="loadTheme(theme.name)"
-        >
-          {{ theme.name }}
-        </v-button>
-      </nav>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { CssClasses, useTheme, VButton, VLightSwitch } from "@/index";
-import { onMounted, ref } from "vue";
+import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
+import { onMounted, ref } from 'vue';
 
 defineProps({
   background: {
     type: String as () => CssClasses,
-    default: "bg-surface-50-900-token",
+    default: 'bg-surface-50-900-token',
   },
   text: {
     type: String as () => CssClasses,
-    default: "text-surface-900-50-token",
+    default: 'text-surface-900-50-token',
   },
 
   widthPopup: {
     type: String as () => CssClasses,
-    default: "w-60",
+    default: 'w-60',
   },
   heightList: {
     type: String as () => CssClasses,
-    default: "max-h-64 lg:max-h-[500px]",
+    default: 'max-h-64 lg:max-h-[500px]',
   },
 
   classButton: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classList: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
   classListItem: {
     type: String as () => CssClasses,
-    default: "",
+    default: '',
   },
 });
 
-const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
+const { applyTheme, themes, chosenTheme } = useTheme();
 
 const showPopup = ref(false);
-onMounted(() => {
-  initializeTheme();
-});
 </script>
+
+<template>
+  <div class="vuetiful-theme-switcher">
+    <v-button :class="`vuetiful-theme-switcher__button ${classButton}`" @click="showPopup = !showPopup">
+      Theme
+    </v-button>
+
+    <div
+      v-if="showPopup"
+      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
+      :class="`${background} ${text} ${widthPopup} ${classList}`"
+    >
+      <section class="flex items-center justify-between">
+        <div class="text-lg">Mode</div>
+        <v-light-switch />
+      </section>
+      <nav
+        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
+        :class="`${heightList} ${classList}`"
+      >
+        <v-button
+          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
+          v-for="(theme, index) in themes"
+          :class="`${classListItem} ${chosenTheme.name === theme.name ? 'variant-filled-surface' : ''}`"
+          :key="index"
+          @click="applyTheme(theme)"
+        >
+          {{ theme.name }}
+        </v-button>
+      </nav>
+    </div>
+  </div>
+</template>

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

@@ -1,24 +1,25 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { Theme } from "./theme.service";
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 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', () => {
+      test('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,133 +28,242 @@ 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 });
 
-          const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
+      describe('given no theme is stored', () => {
+        test('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).not.toHaveBeenCalled();
+          expect(chosenTheme.value.name).toBe(themes[0].name);
+        });
+      });
+
+      describe('given a theme is stored', () => {
+        test('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 { useTheme } = await import("./theme.service");
-          const { initializeTheme, THEMES, chosenTheme } = useTheme();
+          const customTheme = JSON.parse(JSON.stringify(themes[1]));
+          customTheme.name = 'rocket';
 
+          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
+
+          document.cookie = 'vuetiful-theme=rocket';
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
-          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+          expect(localStorageSpy).not.toHaveBeenCalled();
+          expect(chosenTheme.value).toEqual(customTheme);
         });
       });
-      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();
+      describe('given the theme cookie is not a known theme', () => {
+        test('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(THEMES.ROCKET);
+          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
 
+          document.cookie = 'vuetiful-theme=not-a-theme';
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
-          expect(chosenTheme.value).toBe(THEMES.ROCKET);
+          expect(localStorageSpy).not.toHaveBeenCalled();
+          expect(chosenTheme.value).toEqual(themes[0]);
         });
       });
 
-      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 set to custom', () => {
+        test('should set the custom theme from local storage', 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 { 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');
+          const customTheme = JSON.parse(JSON.stringify(themes[0]));
+          customTheme.name = 'custom';
+          localStorageSpy.mockReturnValueOnce(JSON.stringify(customTheme));
 
+          document.cookie = 'vuetiful-theme=custom';
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
-          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
+          expect(chosenTheme.value).toEqual(customTheme);
         });
+
+        test('should set the default theme if an invalid theme is stored', 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('not-a-theme');
+
+          document.cookie = 'vuetiful-theme=custom';
+          initializeTheme();
+
+          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
+          expect(chosenTheme.value).toEqual(themes[0]);
+        })
+
+        test('should set the default theme if no theme is stored', 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(null);
+
+          document.cookie = 'vuetiful-theme=custom';
+          initializeTheme();
+
+          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
+          expect(chosenTheme.value).toEqual(themes[0]);
+        })
       });
+
     });
   });
 
-  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();
+  describe('registerTheme', () => {
+    test('should register a theme', async () => {
+      const { useTheme } = await import('./theme.service');
+      const { registerTheme, themes } = useTheme();
+
+      const newTheme = JSON.parse(JSON.stringify(themes[0]));
+      newTheme.name = 'new-theme';
+
+      registerTheme(newTheme);
+      expect(themes).toContain(newTheme);
+    });
+
+    describe('given the theme is already registered', () => {
+      test('should update the theme', async () => {
+        const { useTheme } = await import('./theme.service');
+        const { registerTheme, themes } = useTheme();
+
+        const newTheme = JSON.parse(JSON.stringify(themes[0]));
+        newTheme.customCss = 'new-custom-css';
 
-        loadTheme(THEMES.ROCKET);
+        registerTheme(newTheme);
 
-        expect(chosenTheme.value).toBe(THEMES.ROCKET);
+        expect(themes.find((theme) => theme.name === newTheme.name)).toEqual(newTheme);
       });
     });
-    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();
+  });
+
+  describe('getThemeFromCookie', () => {
+    describe('given there is no cookie', () => {
+      test('should return default theme', async () => {
+        const { useTheme } = await import('./theme.service');
+        const { getThemeFromCookie, themes } = useTheme();
 
-        loadTheme("invalid-theme");
+        const cookie = '';
+        const theme = getThemeFromCookie(cookie);
 
-        expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+        expect(theme).toEqual(themes[0]);
       });
     });
-    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]);
+    describe('given there is a cookie', () => {
+      test('should return the theme', async () => {
+        const { useTheme } = await import('./theme.service');
+        const { getThemeFromCookie, themes } = useTheme();
+
+        const cookie = 'vuetiful-theme=rocket';
 
-        loadTheme("invalid-theme");
+        const theme = getThemeFromCookie(cookie);
 
-        expect(chosenTheme.value).toBe(themes.value[0].name);
+        const rocketTheme = themes.find((theme) => theme.name === 'rocket');
+        expect(theme).toEqual(rocketTheme);
       });
     });
   });
 
-  describe("registerAllBuiltInThemes", () => {
-    it("should register all built in themes", async () => {
-      const { useTheme } = await import("./theme.service");
-      const { registerAllBuiltInThemes, THEMES, themes } = useTheme();
+  describe('applyThemeSSR', () => {
+    test('should apply the theme', async () => {
+      const { useTheme } = await import('./theme.service');
+      const { applyThemeSSR, themes } = useTheme();
 
-      registerAllBuiltInThemes();
+      const theme = themes[0];
 
-      expect(themes.value).toHaveLength(Object.keys(THEMES).length);
+      const preHtml = '<html><head></head><body></body></html>';
+      const html = applyThemeSSR(preHtml, theme);
+
+      const style = html.includes('id="vuetiful-theme"');
+      expect(style).toBe(true);
+      const body = html.includes('data-theme="vuetiful"');
+      expect(body).toBe(true);
     });
-  });
 
-  describe("registerTheme", () => {
-    it("should register a theme", async () => {
-      const { useTheme } = await import("./theme.service");
-      const { registerTheme } = useTheme();
+    test('no customBase, no customHeadings, no gradients, no custom css', async () => {
+      const { useTheme } = await import('./theme.service');
+      const { applyThemeSSR, themes } = useTheme();
 
-      const theme: Theme = { name: "fake theme", url: "" };
-      expect(registerTheme(theme.name, "")).toEqual(theme);
+      const theme = JSON.parse(JSON.stringify(themes[0]));
+      theme.fonts.customBase = '';
+      theme.fonts.customHeadings = '';
+      theme.gradients.light = '';
+      theme.gradients.dark = '';
+      theme.customCss = '';
+
+      const preHtml = '<html><head></head><body></body></html>';
+      const html = applyThemeSSR(preHtml, theme);
+
+      const style = html.includes('id="vuetiful-theme"');
+      expect(style).toBe(true);
+      const body = html.includes('data-theme="vuetiful"');
+      expect(body).toBe(true);
     });
-  });
 
-  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();
+    test('invalid hex colors', async () => {
+      const { useTheme } = await import('./theme.service');
+      const { applyThemeSSR, themes } = useTheme();
 
-        const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+      const theme = JSON.parse(JSON.stringify(themes[0]));
+      theme.colors.primary = 'invalid';
 
-        saveThemeToStorage("invalid-theme");
+      const preHtml = '<html><head></head><body></body></html>';
+      const html = applyThemeSSR(preHtml, theme);
 
-        expect(localStorageSpy).not.toHaveBeenCalled();
-      });
+      const style = html.includes('id="vuetiful-theme"');
+      expect(style).toBe(true);
+      const body = html.includes('data-theme="vuetiful"');
+      expect(body).toBe(true);
     });
   });
 });