[Closes #1] [Closes !5] Migrated from PrimeVue to shadcn

tests/app.test.ts

@@ -1,17 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { VueWrapper } from "@vue/test-utils";
 import { mount } from "@vue/test-utils";
-import App from "../app/app.vue";
+import App from "~/app.vue";
 
 describe("app.vue", () => {
-  const wrapper: VueWrapper = mount(App, {
-    global: {
-      stubs: {
-        NuxtRouteAnnouncer: true,
-        NuxtWelcome: true,
-      },
-    },
-  });
+  const wrapper: VueWrapper = mount(App);
   it("renders without crashing", () => {
     expect(wrapper.exists()).toBe(true);
   });

tests/layouts/Default.test.ts

@@ -1,11 +1,38 @@
-import { describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
 import DefaultLayout from "~/layouts/Default.vue";
 
 describe("Default.vue", () => {
-  const wrapper: VueWrapper = mount(DefaultLayout, {});
+  afterEach(() => {
+    vi.useRealTimers();
+  });
 
   it("loads without crashing", () => {
+    const wrapper = mount(DefaultLayout);
     expect(wrapper.exists()).toBe(true);
   });
+
+  describe("Footer", () => {
+    it("footer is displayed", () => {
+      const wrapper = mount(DefaultLayout);
+      const footer = wrapper.find("[data-testid='footer']");
+      expect(footer.exists()).toBe(true);
+    });
+
+    it("footer shows only 2025 when current year is 2025", () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date(2025, 0, 1));
+      const wrapper = mount(DefaultLayout);
+      const footer = wrapper.find("[data-testid='footer']");
+      expect(footer.text()).toBe("Glowing Fiesta 2025");
+    });
+
+    it("footer shows range when current year is not 2025", () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date(2069, 0, 1));
+      const wrapper = mount(DefaultLayout);
+      const footer = wrapper.find("[data-testid='footer']");
+      expect(footer.text()).toBe("Glowing Fiesta 2025 - 2069");
+    });
+  });
 });

tests/layouts/default/Footer.test.ts

@@ -1,54 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
-import Footer from "~/layouts/default/Footer.vue";
-
-describe("Footer.vue", () => {
-  const RealDate = Date;
-
-  const mockDate = (year: number) => {
-    globalThis.Date = class extends RealDate {
-      constructor(...args: any[]) {
-        super(args.length === 0 ? `${year}-01-01` : args[0]);
-      }
-
-      static now() {
-        return new RealDate(`${year}-01-01`).getTime();
-      }
-    } as any as DateConstructor;
-  };
-
-  afterEach(() => {
-    globalThis.Date = RealDate;
-  });
-
-  it("loads without crashing", () => {
-    const wrapper: VueWrapper = mount(Footer, {});
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find(".layout-footer").exists()).toBe(true);
-    expect(wrapper.find(".layout-footer").classes()).toContain("font-bold");
-  });
-
-  it("displays only 'Glowing Fiesta 2025' when current year is 2025", () => {
-    mockDate(2025);
-
-    const wrapper = mount(Footer);
-    expect(wrapper.text()).toBe("Glowing Fiesta 2025(with auto-deploy)");
-    expect(wrapper.text()).not.toContain(" - ");
-  });
-
-  it("displays 'Glowing Fiesta 2025 - 2034' when current year is 2034", () => {
-    mockDate(2034);
-
-    const wrapper = mount(Footer);
-    expect(wrapper.text()).toBe("Glowing Fiesta 2025 - 2034(with auto-deploy)");
-  });
-
-  it("has proper structure / content", () => {
-    const wrapper = mount(Footer);
-    const footer = wrapper.find("footer");
-
-    expect(footer.exists()).toBe(true);
-    expect(footer.element.tagName).toBe("FOOTER");
-    expect(wrapper.findAll("div")).toHaveLength(2);
-  });
-});

tests/layouts/default/Sidebar.test.ts

@@ -1,11 +1,186 @@
-import { describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
-import Sidebar from "~/layouts/default/Sidebar.vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import SidebarLayout from "~/layouts/default/Sidebar.vue";
+import { ref } from "vue";
+import type * as SidebarUI from "~/components/ui/sidebar";
 
-describe("Sidebar.vue", () => {
-  it("loads without crashing", () => {
-    const wrapper: VueWrapper = mount(Sidebar, {});
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find(".layout-sidebar").exists()).toBe(true);
+const { useSidebarMock } = vi.hoisted(() => ({
+  useSidebarMock: vi.fn(),
+}));
+
+// Mock the UI components and hook
+vi.mock("~/components/ui/sidebar", async (importOriginal) => {
+  const actual = await importOriginal<typeof SidebarUI>();
+  const { ref } = await import("vue");
+  const MockComponent = {
+    template: "<div><slot /></div>",
+    inheritAttrs: false,
+  };
+
+  // Default implementation
+  useSidebarMock.mockReturnValue({
+    isMobile: ref(false),
+    state: ref("expanded"),
+    openMobile: ref(false),
+    setOpenMobile: vi.fn(),
+  });
+
+  return {
+    ...actual,
+    Sidebar: MockComponent,
+    SidebarContent: MockComponent,
+    SidebarFooter: MockComponent,
+    SidebarGroup: MockComponent,
+    SidebarHeader: MockComponent,
+    SidebarMenu: MockComponent,
+    SidebarMenuItem: MockComponent,
+    SidebarMenuButton: MockComponent,
+    SidebarRail: MockComponent,
+    SidebarMenuSub: MockComponent,
+    SidebarMenuSubButton: MockComponent,
+    SidebarMenuSubItem: MockComponent,
+    useSidebar: useSidebarMock,
+  };
+});
+
+// Mock other UI components to avoid rendering complexity
+vi.mock("~/components/ui/dropdown-menu", () => {
+  const MockComponent = { template: "<div><slot /></div>" };
+  return {
+    DropdownMenu: MockComponent,
+    DropdownMenuContent: MockComponent,
+    DropdownMenuGroup: MockComponent,
+    DropdownMenuItem: MockComponent,
+    DropdownMenuLabel: MockComponent,
+    DropdownMenuSeparator: MockComponent,
+    DropdownMenuTrigger: MockComponent,
+  };
+});
+
+vi.mock("~/components/ui/collapsible", () => {
+  const MockComponent = { template: "<div><slot /></div>" };
+  return {
+    Collapsible: MockComponent,
+    CollapsibleContent: MockComponent,
+    CollapsibleTrigger: MockComponent,
+  };
+});
+
+vi.mock("~/components/ui/avatar", () => {
+  const MockComponent = { template: "<div><slot /></div>" };
+  return {
+    Avatar: MockComponent,
+    AvatarFallback: MockComponent,
+    AvatarImage: MockComponent,
+  };
+});
+
+vi.mock("@/components/ui/sheet", () => {
+  const MockComponent = { template: "<div><slot /></div>" };
+  return {
+    Sheet: MockComponent,
+    SheetContent: MockComponent,
+  };
+});
+
+vi.mock("@/components/ui/sheet/SheetDescription.vue", () => ({
+  default: { template: "<div><slot /></div>" },
+}));
+vi.mock("@/components/ui/sheet/SheetHeader.vue", () => ({
+  default: { template: "<div><slot /></div>" },
+}));
+vi.mock("lucide-vue-next", () => {
+  const MockIcon = { template: '<svg class="lucide-mock" />' };
+  return {
+    BadgeCheck: MockIcon,
+    Bell: MockIcon,
+    ChevronRight: MockIcon,
+    ChevronsUpDown: MockIcon,
+    CreditCard: MockIcon,
+    BookOpen: MockIcon,
+    HandCoins: MockIcon,
+    LogOut: MockIcon,
+    Settings2: MockIcon,
+    Sparkles: MockIcon,
+    SquareTerminal: MockIcon,
+  };
+});
+
+describe("SidebarLayout", () => {
+  it("renders the header correctly", () => {
+    useSidebarMock.mockReturnValue({
+      isMobile: ref(false),
+      state: ref("expanded"),
+      openMobile: ref(false),
+      setOpenMobile: vi.fn(),
+    });
+
+    const wrapper = mount(SidebarLayout, {
+      props: {
+        collapsible: "icon",
+      },
+    });
+    expect(wrapper.text()).toContain("Glowing Fiesta");
+    expect(wrapper.text()).toContain("v1.0.0");
+  });
+
+  it("renders sidebar content correctly", () => {
+    const wrapper = mount(SidebarLayout);
+    const text = wrapper.text();
+
+    // Navigation groups
+    expect(text).toContain("Playground");
+    expect(text).toContain("Documentation");
+    expect(text).toContain("Settings");
+
+    // User information
+    expect(text).toContain("Liviu");
+    expect(text).toContain("x.liviu@gmail.com");
+
+    // Sub-items
+    expect(text).toContain("History");
+    expect(text).toContain("Starred");
+    expect(text).toContain("Introduction");
+    expect(text).toContain("Get Started");
+  });
+
+  it("does not render icon if item.icon is missing", () => {
+    const wrapper = mount(SidebarLayout, {
+      props: {
+        navItems: [
+          {
+            title: "No Icon Item",
+            url: "#",
+            items: [],
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.text()).toContain("No Icon Item");
+    expect(wrapper.find('[data-testid="sidebar-icon"]').exists()).toBe(false);
+  });
+
+  it("renders correctly in mobile view", () => {
+    useSidebarMock.mockReturnValue({
+      isMobile: ref(true),
+      state: ref("expanded"),
+      openMobile: ref(true),
+      setOpenMobile: vi.fn(),
+    });
+
+    const wrapper = mount(SidebarLayout);
+
+    // When isMobile is true, it renders a Sheet.
+    // Since we mocked Sheet components as simple divs with slots, the content should still be present.
+    // However, the structure is different.
+    // We can verify that the content is still rendered (passed through the slot).
+    const text = wrapper.text();
+    expect(text).toContain("Glowing Fiesta");
+    expect(text).toContain("Liviu");
+
+    // Check specific specific mock interaction if needed, or just that it doesn't crash
+    // and renders the menu items.
+    expect(text).toContain("Playground");
   });
 });

tests/layouts/default/Topbar.test.ts

@@ -1,159 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
-import Topbar from "~/layouts/default/Topbar.vue";
-
-describe("Topbar.vue", () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    document.documentElement.className = "";
-    document.body.innerHTML = '<div class="layout-wrapper"></div>';
-    wrapper = mount(Topbar);
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  describe("Component Rendering", () => {
-    it("loads without crashing", () => {
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.find(".layout-topbar").exists()).toBe(true);
-    });
-
-    it("renders the logo image and text", () => {
-      const logo = wrapper.find(".layout-topbar-logo");
-      expect(logo.exists()).toBe(true);
-      expect(logo.find("img").attributes("alt")).toBe("Git like tree using red, white-ish and blue colours.");
-      expect(logo.text()).toContain("Glowing Fiesta");
-    });
-
-    it("renders the menu toggle button", () => {
-      const menuButton = wrapper.find(".layout-menu-button");
-      expect(menuButton.exists()).toBe(true);
-      expect(menuButton.find(".pi-bars").exists()).toBe(true);
-    });
-
-    it("renders the dark mode toggle button", () => {
-      const darkModeButton = wrapper.find(".layout-topbar-action-highlight");
-      expect(darkModeButton.exists()).toBe(true);
-    });
-
-    it("renders the topbar menu items", () => {
-      const menuButtons = wrapper.findAll(".layout-topbar-menu button");
-      expect(menuButtons).toHaveLength(3);
-      expect(menuButtons[0].text()).toContain("Calendar");
-      expect(menuButtons[1].text()).toContain("Messages");
-      expect(menuButtons[2].text()).toContain("Profile");
-    });
-  });
-
-  describe("Dark Mode Toggle", () => {
-    it("starts with sun icon (light mode)", () => {
-      const darkModeButton = wrapper.find(".layout-topbar-action-highlight");
-      expect(darkModeButton.find(".pi-sun").exists()).toBe(true);
-      expect(darkModeButton.find(".pi-moon").exists()).toBe(false);
-    });
-
-    it("toggles to moon icon when clicked", async () => {
-      const darkModeButton = wrapper.find(".layout-topbar-action-highlight");
-      await darkModeButton.trigger("click");
-
-      expect(darkModeButton.find(".pi-moon").exists()).toBe(true);
-      expect(darkModeButton.find(".pi-sun").exists()).toBe(false);
-    });
-
-    it("removes app-dark class when toggled off", async () => {
-      expect(document.documentElement.classList.contains("app-dark")).toBe(false);
-      const darkModeButton = wrapper.find(".layout-topbar-action-highlight");
-
-      // Toggle on
-      await darkModeButton.trigger("click");
-      expect(document.documentElement.classList.contains("app-dark")).toBe(true);
-
-      // Toggle off
-      await darkModeButton.trigger("click");
-      expect(document.documentElement.classList.contains("app-dark")).toBe(false);
-    });
-
-    it("updates isDarkTheme ref when toggled", async () => {
-      const darkModeButton = wrapper.find(".layout-topbar-action-highlight");
-
-      // @ts-expect-error: it's a test accessing vm property
-      expect(wrapper.vm.isDarkTheme).toBe(false);
-
-      await darkModeButton.trigger("click");
-
-      // @ts-expect-error: it's a test accessing vm property
-      expect(wrapper.vm.isDarkTheme).toBe(true);
-
-      await darkModeButton.trigger("click");
-      // @ts-expect-error: it's a test accessing vm property
-      expect(wrapper.vm.isDarkTheme).toBe(false);
-    });
-  });
-
-  describe("Menu Toggle", () => {
-    it("toggles layout-static-inactive class on layout wrapper", async () => {
-      const menuButton = wrapper.find(".layout-menu-button");
-      const layoutWrapper = document.querySelector(".layout-wrapper");
-
-      expect(layoutWrapper?.classList.contains("layout-static-inactive")).toBe(false);
-
-      await menuButton.trigger("click");
-      expect(layoutWrapper?.classList.contains("layout-static-inactive")).toBe(true);
-
-      await menuButton.trigger("click");
-      expect(layoutWrapper?.classList.contains("layout-static-inactive")).toBe(false);
-    });
-
-    it("handles missing layout wrapper gracefully", async () => {
-      document.body.innerHTML = "";
-
-      const menuButton = wrapper.find(".layout-menu-button");
-
-      // Should not throw error
-      expect(() => menuButton.trigger("click")).not.toThrow();
-    });
-  });
-
-  describe("Logo Link", () => {
-    it("links to home page", () => {
-      const logoLink = wrapper.find(".layout-topbar-logo");
-      expect(logoLink.exists()).toBe(true);
-    });
-
-    it("has correct image source", () => {
-      const img = wrapper.find(".layout-topbar-logo img");
-      expect(img.attributes("src")).toContain("data:image/svg+xml");
-    });
-  });
-
-  describe("Topbar Actions", () => {
-    it("renders Calendar action button with icon", () => {
-      const buttons = wrapper.findAll(".layout-topbar-menu button");
-      const calendarButton = buttons[0];
-
-      expect(calendarButton.find(".pi-calendar").exists()).toBe(true);
-      expect(calendarButton.text()).toContain("Calendar");
-    });
-
-    it("renders Messages action button with icon", () => {
-      const buttons = wrapper.findAll(".layout-topbar-menu button");
-      const messagesButton = buttons[1];
-
-      expect(messagesButton.find(".pi-inbox").exists()).toBe(true);
-      expect(messagesButton.text()).toContain("Messages");
-    });
-
-    it("renders Profile action button with icon", () => {
-      const buttons = wrapper.findAll(".layout-topbar-menu button");
-      const profileButton = buttons[2];
-
-      expect(profileButton.find(".pi-user").exists()).toBe(true);
-      expect(profileButton.text()).toContain("Profile");
-    });
-  });
-});

tests/pages/config/Account.test.ts

@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
-import AccountPage from "~/pages/config/Account.vue";
-
-describe("Account.vue", () => {
-  const wrapper: VueWrapper = mount(AccountPage, {});
-
-  it("loads without crashing", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-});

tests/pages/config/Settings.test.ts

@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
-import SettingsPage from "~/pages/config/Settings.vue";
-
-describe("Settings.vue", () => {
-  const wrapper: VueWrapper = mount(SettingsPage, {});
-
-  it("loads without crashing", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-});

tests/pages/index.test.ts

@@ -1,11 +1,52 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, beforeEach } from "vitest";
 import { mount, type VueWrapper } from "@vue/test-utils";
 import IndexPage from "~/pages/index.vue";
 
 describe("pages/index.vue", () => {
-  const wrapper: VueWrapper = mount(IndexPage, {});
+  let wrapper: VueWrapper;
+
+  beforeEach(() => {
+    wrapper = mount(IndexPage);
+  });
 
   it("loads without crashing", () => {
     expect(wrapper.exists()).toBe(true);
   });
+
+  it("displays initial state correctly", () => {
+    const displayElement = wrapper.find(".text-lime-500");
+    expect(displayElement.exists()).toBe(true);
+    expect(displayElement.text()).toBe("None");
+  });
+
+  it("updates text when Default button is clicked", async () => {
+    // Find button method 1: by text content inside button elements
+    const buttons = wrapper.findAll("button");
+    const defaultBtn = buttons.find((b) => b.text() === "Default");
+
+    expect(defaultBtn?.exists()).toBe(true);
+
+    await defaultBtn?.trigger("click");
+    expect(wrapper.find(".text-lime-500").text()).toBe("default");
+  });
+
+  it("updates text when other buttons are clicked", async () => {
+    const testCases = [
+      { label: "Outline", expected: "outline" },
+      { label: "Ghost", expected: "ghost" },
+      { label: "Link", expected: "link" },
+      { label: "Secondary", expected: "secondary" },
+      { label: "Destructive", expected: "destructive" },
+    ];
+
+    for (const { label, expected } of testCases) {
+      const buttons = wrapper.findAll("button");
+      const btn = buttons.find((b) => b.text() === label);
+
+      expect(btn?.exists(), `Button with label ${label} should exist`).toBe(true);
+      await btn?.trigger("click");
+
+      expect(wrapper.find(".text-lime-500").text()).toBe(expected);
+    }
+  });
 });

tests/plugins/50-ssr-width.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from "vitest";
+import { provideSSRWidth } from "@vueuse/core";
+
+// Mock @vueuse/core
+vi.mock("@vueuse/core", () => ({
+  provideSSRWidth: vi.fn(),
+}));
+
+describe("SSR Width Plugin", () => {
+  it("should call provideSSRWidth with 1024 and vueApp", async () => {
+    // Mock global defineNuxtPlugin
+    vi.stubGlobal("defineNuxtPlugin", (plugin: any) => plugin);
+
+    // Dynamic import to ensure global is set first
+    const { default: plugin } = await import("~/plugins/50-ssr-width");
+
+    const mockVueApp = {};
+    const mockNuxtApp = {
+      vueApp: mockVueApp,
+    };
+
+    // The plugin default export is the function passed to defineNuxtPlugin
+    // because of our mock above.
+    plugin(mockNuxtApp);
+
+    expect(provideSSRWidth).toHaveBeenCalledTimes(1);
+    expect(provideSSRWidth).toHaveBeenCalledWith(1024, mockVueApp);
+
+    vi.unstubAllGlobals();
+  });
+});

tests/setup.ts

@@ -1,8 +1,5 @@
 import { vi } from "vitest";
 import { config } from "@vue/test-utils";
-import PrimeVue from "primevue/config";
-import Button from "primevue/button";
-import Ripple from "primevue/ripple";
 
 Object.defineProperty(global, "import", {
   value: {
@@ -13,12 +10,10 @@ Object.defineProperty(global, "import", {
   writable: true,
 });
 
-config.global.plugins = [PrimeVue];
 config.global.stubs = {
   NuxtLayout: true,
   NuxtPage: true,
   Divider: true,
+  NuxtRouteAnnouncer: true,
   NuxtLink: { template: "<a><slot /></a>" },
 };
-config.global.components = { Button };
-config.global.directives = { Ripple };