@handled-ai/design-system 0.16.0 → 0.16.2

package/src/components/__tests__/data-table-filter.test.tsx

@@ -1,9 +1,80 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import React from "react";
-import { render } from "@testing-library/react";
-import { DataTableFilter } from "../data-table-filter";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { ListFilter } from "lucide-react";
 
+import { DataTableFilter } from "../data-table-filter";
+import type { DataTableFilterCategory } from "../data-table-filter";
+import type { ConditionFieldDef } from "../data-table-condition-filter";
+
+/**
+ * Radix DropdownMenu renders content inside a portal which makes it
+ * difficult to test in happy-dom. We mock the DropdownMenu primitives
+ * to render children inline so we can assert on the component's
+ * rendering logic directly.
+ */
+vi.mock("../dropdown-menu", async () => {
+  const ReactMod = await import("react");
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const DropdownMenu = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu", ...props }, children);
+  const DropdownMenuTrigger = ({ children, asChild, ...props }: any) => {
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, { "data-slot": "dropdown-menu-trigger", ...props } as any);
+    }
+    return ReactMod.createElement("button", { "data-slot": "dropdown-menu-trigger", ...props }, children);
+  };
+  const DropdownMenuContent = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-content", ...props }, children);
+  const DropdownMenuItem = ({ children, onSelect, className, ...props }: any) =>
+    ReactMod.createElement(
+      "div",
+      {
+        "data-slot": "dropdown-menu-item",
+        role: "menuitem",
+        className,
+        onClick: (e: any) => onSelect?.(e),
+        ...props,
+      },
+      children
+    );
+  const DropdownMenuSub = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub", ...props }, children);
+  const DropdownMenuSubTrigger = ({ children, className, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub-trigger", role: "menuitem", className, ...props }, children);
+  const DropdownMenuSubContent = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-sub-content", ...props }, children);
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+
+  return {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent,
+  };
+});
+
+vi.mock("radix-ui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("radix-ui")>();
+  const ReactMod = await import("react");
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const Root = ({ children }: any) => ReactMod.createElement("div", { "data-slot": "popover-root" }, children);
+  const Trigger = ({ children, asChild, ...props }: any) => {
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, { "data-slot": "popover-trigger", ...props } as any);
+    }
+    return ReactMod.createElement("button", { "data-slot": "popover-trigger", ...props }, children);
+  };
+  const Portal = ({ children }: any) => ReactMod.createElement(ReactMod.Fragment, null, children);
+  const Content = ({ children, ...props }: any) => ReactMod.createElement("div", { "data-slot": "popover-content", ...props }, children);
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  return { ...actual, Popover: { Root, Trigger, Portal, Content } };
+});
+
 const defaultProps = {
   categories: [
     {
@@ -38,4 +109,221 @@ describe("DataTableFilter", () => {
     expect(button!.className).toContain("text-primary-foreground");
     expect(button!.className).toContain("h-8");
   });
+
+  it("renders boolean category as direct toggle row", () => {
+    const onToggle = vi.fn();
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{}}
+        onToggleFilter={onToggle}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+    expect(document.querySelector('[data-slot="dropdown-menu-sub-trigger"]')).toBeNull();
+
+    fireEvent.click(item!);
+    expect(onToggle).toHaveBeenCalledWith("archived", "true");
+  });
+
+  it("shows check icon on active boolean category", () => {
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{ archived: ["true"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+    expect(item!.className).toContain("text-brand-purple");
+    expect(item!.querySelector("svg.ml-auto")).not.toBeNull();
+  });
+
+  it("renders single-select category with submenu", () => {
+    const singleCategory: DataTableFilterCategory = {
+      id: "priority",
+      label: "Priority",
+      icon: ListFilter,
+      options: ["High", "Medium", "Low"],
+      type: "single",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[singleCategory]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Priority");
+  });
+
+  it("shows filled circle indicator for selected single-select option", () => {
+    const singleCategory: DataTableFilterCategory = {
+      id: "priority",
+      label: "Priority",
+      icon: ListFilter,
+      options: ["High", "Medium", "Low"],
+      type: "single",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[singleCategory]}
+        selectedFilters={{ priority: ["High"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const highItem = screen.getByText("High").closest('[data-slot="dropdown-menu-item"]');
+    expect(highItem).not.toBeNull();
+    expect(highItem!.querySelector("span.rounded-full")).not.toBeNull();
+    expect(highItem!.textContent).not.toContain("Applied");
+
+    const mediumItem = screen.getByText("Medium").closest('[data-slot="dropdown-menu-item"]');
+    expect(mediumItem).not.toBeNull();
+    expect(mediumItem!.querySelector("span.rounded-full")).toBeNull();
+  });
+
+  it("boolean category keeps dropdown open on click", () => {
+    const onToggle = vi.fn();
+    const boolCategory: DataTableFilterCategory = {
+      id: "archived",
+      label: "Archived",
+      icon: ListFilter,
+      options: [],
+      type: "boolean",
+    };
+
+    render(
+      <DataTableFilter
+        categories={[boolCategory]}
+        selectedFilters={{}}
+        onToggleFilter={onToggle}
+      />
+    );
+
+    const item = screen.getByText("Archived").closest('[data-slot="dropdown-menu-item"]');
+    expect(item).not.toBeNull();
+
+    const preventDefaultSpy = vi.fn();
+    const mockEvent = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(mockEvent, "preventDefault", { value: preventDefaultSpy });
+    item!.dispatchEvent(mockEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(onToggle).toHaveBeenCalledWith("archived", "true");
+  });
+
+  it("multi-select category still works as before", () => {
+    const multiCategory: DataTableFilterCategory = {
+      id: "status",
+      label: "Status",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[multiCategory]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const subTrigger = document.querySelector('[data-slot="dropdown-menu-sub-trigger"]');
+    expect(subTrigger).not.toBeNull();
+    expect(subTrigger!.textContent).toContain("Status");
+
+    const openItem = screen.getByText("Open").closest('[data-slot="dropdown-menu-item"]');
+    expect(openItem).not.toBeNull();
+    expect(openItem!.textContent).toContain("Applied");
+    expect(openItem!.querySelector("span.rounded-full")).toBeNull();
+  });
+
+  it("does not expose the condition builder entry point without condition fields", () => {
+    render(<DataTableFilter {...defaultProps} />);
+
+    expect(screen.queryByText("Add filter")).toBeNull();
+    expect(document.querySelector('[data-slot="condition-filter"]')).toBeNull();
+  });
+
+  it("exposes a condition builder popover entry point when condition fields are provided", () => {
+    const conditionFields: ConditionFieldDef[] = [
+      { id: "balance", label: "Account Balance", type: "currency" },
+    ];
+
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={conditionFields}
+        conditionFilters={[
+          { id: "c-1", field: "balance", operator: "gt", value: 1000 },
+        ]}
+        onConditionFiltersChange={() => {}}
+      />
+    );
+
+    const builderEntry = document.querySelector('[data-slot="popover-trigger"]');
+    expect(builderEntry).not.toBeNull();
+    expect(builderEntry!.textContent).toContain("1");
+    expect(document.querySelector('[data-slot="condition-filter"]')).not.toBeNull();
+    expect(screen.getByText("Filter builder")).toBeDefined();
+  });
+
+
+  it("opens the condition builder without closing the menu selection", () => {
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={[{ id: "name", label: "Name", type: "text" }]}
+      />
+    );
+
+    const builderEntry = document.querySelector('[data-slot="popover-trigger"]');
+    expect(builderEntry).not.toBeNull();
+
+    const preventDefaultSpy = vi.fn();
+    const mockEvent = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(mockEvent, "preventDefault", { value: preventDefaultSpy });
+    builderEntry!.dispatchEvent(mockEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(screen.getByText("Filter builder")).toBeDefined();
+  });
+
+  it("uses the custom condition builder label when provided", () => {
+    render(
+      <DataTableFilter
+        {...defaultProps}
+        conditionFields={[{ id: "name", label: "Name", type: "text" }]}
+        conditionBuilderLabel="Advanced filters"
+      />
+    );
+
+    expect(screen.getByText("Advanced filters")).toBeDefined();
+  });
 });