Project import from github

tests/layouts/default/Sidebar.test.ts

@@ -0,0 +1,268 @@
+import { mount, flushPromises } from "@vue/test-utils";
+import { describe, expect, it, vi, beforeAll, afterAll } from "vitest";
+import SidebarLayout from "~/layouts/default/Sidebar.vue";
+import { ref } from "vue";
+import type * as SidebarUI from "~/components/ui/sidebar";
+
+const { useSidebarMock } = vi.hoisted(() => ({
+  useSidebarMock: vi.fn(),
+}));
+
+// ... (existing mocks)
+
+vi.mock("~/stores/auth", () => ({
+  useAuthStore: () => ({
+    user: {
+      name: "Liviu",
+      email: "x.liviu@gmail.com",
+      image: "avatar.png",
+    },
+    signOut: vi.fn(),
+    init: 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,
+    LogIn: MockIcon,
+    LogOut: MockIcon,
+    Settings2: MockIcon,
+    Sparkles: MockIcon,
+    SquareTerminal: MockIcon,
+  };
+});
+
+describe("SidebarLayout", () => {
+  beforeAll(() => {
+    const shouldSuppress = (args: string[]) => {
+      const msg = args.join(" ");
+      return msg.includes("<Suspense> is an experimental feature");
+    };
+
+    const spyMethods = ["warn", "error", "log", "info"] as const;
+    for (const method of spyMethods) {
+      const original = console[method];
+      vi.spyOn(console, method).mockImplementation((...args) => {
+        if (shouldSuppress(args)) return;
+        original(...args);
+      });
+    }
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+  it("renders the header correctly", async () => {
+    useSidebarMock.mockReturnValue({
+      isMobile: ref(false),
+      state: ref("expanded"),
+      openMobile: ref(false),
+      setOpenMobile: vi.fn(),
+    });
+
+    const wrapper = mount({
+      components: { SidebarLayout },
+      template: "<Suspense><SidebarLayout v-bind='props' /></Suspense>",
+      setup() {
+        return {
+          props: {
+            collapsible: "icon",
+          },
+        };
+      },
+    });
+    await flushPromises();
+    expect(wrapper.text()).toContain("Glowing Fiesta");
+    expect(wrapper.text()).toContain("v1.0.0");
+  });
+
+  it("renders sidebar content correctly", async () => {
+    const user = {
+      name: "Liviu",
+      email: "x.liviu@gmail.com",
+      image: "avatar.png",
+      id: "123",
+      emailVerified: true,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    const wrapper = mount({
+      components: { SidebarLayout },
+      template: "<Suspense><SidebarLayout :user='user' /></Suspense>",
+      setup() {
+        return { user };
+      },
+    });
+    await flushPromises();
+    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", async () => {
+    const wrapper = mount({
+      components: { SidebarLayout },
+      template: "<Suspense><SidebarLayout v-bind='props' /></Suspense>",
+      setup() {
+        return {
+          props: {
+            navItems: [
+              {
+                title: "No Icon Item",
+                url: "#",
+                items: [],
+              },
+            ],
+          },
+        };
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("No Icon Item");
+    expect(wrapper.find('[data-testid="sidebar-icon"]').exists()).toBe(false);
+  });
+
+  it("renders correctly in mobile view", async () => {
+    useSidebarMock.mockReturnValue({
+      isMobile: ref(true),
+      state: ref("expanded"),
+      openMobile: ref(true),
+      setOpenMobile: vi.fn(),
+    });
+
+    const user = {
+      name: "Liviu",
+      email: "x.liviu@gmail.com",
+      image: "avatar.png",
+      id: "123",
+      emailVerified: true,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    const wrapper = mount({
+      components: { SidebarLayout },
+      template: "<Suspense><SidebarLayout :user='user' /></Suspense>",
+      setup() {
+        return { user };
+      },
+    });
+    await flushPromises();
+
+    // 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");
+  });
+});