Chore: homepage tests (#6278)

src/components/bookmarks/group.jsx

@@ -32,7 +32,7 @@ export default function BookmarksGroup({
         layout?.header === false ? "px-1" : "p-1 pb-0",
       )}
     >
-      <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
+      <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed)}>
         {({ open }) => (
           <>
             {layout?.header !== false && (

src/components/bookmarks/group.test.jsx

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@headlessui/react", async () => {
+  const React = await import("react");
+  const { Fragment } = React;
+
+  function Transition({ as: As = Fragment, children }) {
+    if (As === Fragment) return <>{children}</>;
+    return <As>{children}</As>;
+  }
+
+  function Disclosure({ defaultOpen = true, children }) {
+    const content = typeof children === "function" ? children({ open: defaultOpen }) : children;
+    return <div>{content}</div>;
+  }
+
+  function DisclosureButton(props) {
+    return <button type="button" {...props} />;
+  }
+
+  const DisclosurePanel = React.forwardRef(function DisclosurePanel(props, ref) {
+    // HeadlessUI uses a boolean `static` prop; avoid forwarding it to the DOM.
+    const { static: _static, ...rest } = props;
+    return <div ref={ref} data-testid="disclosure-panel" {...rest} />;
+  });
+
+  Disclosure.Button = DisclosureButton;
+  Disclosure.Panel = DisclosurePanel;
+
+  return { Disclosure, Transition };
+});
+
+vi.mock("components/bookmarks/list", () => ({
+  default: function BookmarksListMock({ bookmarks }) {
+    return <div data-testid="bookmarks-list">count:{bookmarks?.length ?? 0}</div>;
+  },
+}));
+
+vi.mock("components/errorboundry", () => ({
+  default: function ErrorBoundaryMock({ children }) {
+    return <>{children}</>;
+  },
+}));
+
+vi.mock("components/resolvedicon", () => ({
+  default: function ResolvedIconMock() {
+    return <div data-testid="resolved-icon" />;
+  },
+}));
+
+import BookmarksGroup from "./group";
+
+describe("components/bookmarks/group", () => {
+  it("renders the group header and list", () => {
+    render(
+      <BookmarksGroup
+        bookmarks={{ name: "Bookmarks", bookmarks: [{ name: "A" }] }}
+        layout={{ icon: "mdi:test" }}
+        disableCollapse={false}
+        groupsInitiallyCollapsed={false}
+      />,
+    );
+
+    expect(screen.getByText("Bookmarks")).toBeInTheDocument();
+    expect(screen.getByTestId("resolved-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("bookmarks-list")).toHaveTextContent("count:1");
+  });
+
+  it("sets the panel height to 0 when initially collapsed", async () => {
+    render(
+      <BookmarksGroup
+        bookmarks={{ name: "Bookmarks", bookmarks: [] }}
+        layout={{ initiallyCollapsed: true }}
+        groupsInitiallyCollapsed={false}
+      />,
+    );
+
+    const panel = screen.getByTestId("disclosure-panel");
+    await waitFor(() => {
+      expect(panel.style.height).toBe("0px");
+    });
+  });
+});

src/components/bookmarks/group.transition.test.jsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@headlessui/react", async () => {
+  const React = await import("react");
+  const { Fragment, useEffect } = React;
+
+  function Transition({ as: As = Fragment, beforeEnter, beforeLeave, children }) {
+    useEffect(() => {
+      beforeEnter?.();
+      setTimeout(() => beforeLeave?.(), 200);
+    }, [beforeEnter, beforeLeave]);
+
+    if (As === Fragment) return <>{children}</>;
+    return <As>{children}</As>;
+  }
+
+  function Disclosure({ defaultOpen = true, children }) {
+    const content = typeof children === "function" ? children({ open: defaultOpen }) : children;
+    return <div>{content}</div>;
+  }
+
+  function DisclosureButton(props) {
+    return <button type="button" {...props} />;
+  }
+
+  const DisclosurePanel = React.forwardRef(function DisclosurePanel(props, ref) {
+    const { static: _static, ...rest } = props;
+    return (
+      <div
+        ref={(node) => {
+          if (node) Object.defineProperty(node, "scrollHeight", { value: 50, configurable: true });
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        data-testid="disclosure-panel"
+        {...rest}
+      />
+    );
+  });
+
+  Disclosure.Button = DisclosureButton;
+  Disclosure.Panel = DisclosurePanel;
+
+  return { Disclosure, Transition };
+});
+
+vi.mock("components/bookmarks/list", () => ({
+  default: function BookmarksListMock() {
+    return <div data-testid="bookmarks-list" />;
+  },
+}));
+
+vi.mock("components/errorboundry", () => ({
+  default: function ErrorBoundaryMock({ children }) {
+    return <>{children}</>;
+  },
+}));
+
+vi.mock("components/resolvedicon", () => ({
+  default: function ResolvedIconMock() {
+    return <div data-testid="resolved-icon" />;
+  },
+}));
+
+import BookmarksGroup from "./group";
+
+describe("components/bookmarks/group transition hooks", () => {
+  it("runs the Transition beforeEnter/beforeLeave height calculations and applies maxGroupColumns", async () => {
+    vi.useFakeTimers();
+
+    render(
+      <BookmarksGroup
+        bookmarks={{ name: "Bookmarks", bookmarks: [] }}
+        layout={{ initiallyCollapsed: false }}
+        groupsInitiallyCollapsed={false}
+        maxGroupColumns="7"
+      />,
+    );
+
+    const wrapper = screen.getByText("Bookmarks").closest(".bookmark-group");
+    expect(wrapper?.className).toContain("3xl:basis-1/7");
+
+    const panel = screen.getByTestId("disclosure-panel");
+    await act(async () => {
+      vi.runAllTimers();
+    });
+
+    expect(panel.style.height).toBe("0px");
+
+    vi.useRealTimers();
+  });
+});

src/components/bookmarks/item.test.jsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+
+vi.mock("components/resolvedicon", () => ({
+  default: ({ icon }) => <div data-testid="resolved-icon" data-icon={icon} />,
+}));
+
+import Item from "./item";
+
+describe("components/bookmarks/item", () => {
+  it("falls back description to href hostname and uses settings.target", () => {
+    renderWithProviders(<Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A" }} iconOnly={false} />, {
+      settings: { target: "_self", cardBlur: "" },
+    });
+
+    expect(screen.getByText("example.com")).toBeInTheDocument();
+    expect(screen.getByRole("link").getAttribute("target")).toBe("_self");
+  });
+
+  it("renders icon-only layout with icon when provided", () => {
+    renderWithProviders(
+      <Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A", icon: "mdi-home" }} iconOnly />,
+      { settings: { target: "_self" } },
+    );
+
+    expect(screen.getByTestId("resolved-icon").getAttribute("data-icon")).toBe("mdi-home");
+  });
+
+  it("renders the non-icon-only layout with an icon when provided", () => {
+    renderWithProviders(
+      <Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A", icon: "mdi-home" }} iconOnly={false} />,
+      { settings: { target: "_self", cardBlur: "" } },
+    );
+
+    expect(screen.getByTestId("resolved-icon").getAttribute("data-icon")).toBe("mdi-home");
+  });
+});

src/components/bookmarks/list.test.jsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { Item } = vi.hoisted(() => ({
+  Item: vi.fn(({ bookmark, iconOnly }) => (
+    <li data-testid="bookmark-item" data-name={bookmark.name} data-icononly={String(iconOnly)} />
+  )),
+}));
+
+vi.mock("components/bookmarks/item", () => ({
+  default: Item,
+}));
+
+import List from "./list";
+
+describe("components/bookmarks/list", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders items with iconOnly when iconsOnly is set", () => {
+    render(<List bookmarks={[{ name: "A", href: "http://a" }]} layout={{ iconsOnly: true }} bookmarksStyle="text" />);
+
+    expect(Item).toHaveBeenCalled();
+    expect(Item.mock.calls[0][0].iconOnly).toBe(true);
+  });
+
+  it("applies gridTemplateColumns in icons style", () => {
+    const { container } = render(
+      <List bookmarks={[{ name: "A", href: "http://a" }]} layout={{ header: false }} bookmarksStyle="icons" />,
+    );
+
+    const ul = container.querySelector("ul");
+    expect(ul.style.gridTemplateColumns).toContain("minmax(60px");
+  });
+});