@handled-ai/design-system 0.16.0 → 0.16.2

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

@@ -0,0 +1,423 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  DataTableConditionFilter,
+  type ConditionFieldDef,
+  type ConditionFilterValue,
+  generateConditionId,
+  getOperators,
+} from "../data-table-condition-filter";
+
+// ── Mock Radix Select with inline option elements ───────────────
+vi.mock("../select", () => {
+  const SelectMockContext = React.createContext<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }>({});
+
+  const Select = ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (v: string) => void;
+  }) => (
+    <SelectMockContext.Provider value={{ value, onValueChange }}>
+      {children}
+    </SelectMockContext.Provider>
+  );
+
+  const SelectTrigger = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    size?: string;
+  }) => (
+    <span data-slot="select-trigger" className={className}>
+      {children}
+    </span>
+  );
+
+  const SelectValue = ({ placeholder }: { placeholder?: string }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return <span data-slot="select-value">{ctx.value ?? placeholder}</span>;
+  };
+
+  const SelectContent = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+  const SelectItem = ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: string;
+  }) => {
+    const ctx = React.useContext(SelectMockContext);
+    return (
+      <option
+        data-slot="select-item"
+        value={value}
+        data-selected={ctx.value === value ? "true" : undefined}
+        onClick={() => ctx.onValueChange?.(value)}
+      >
+        {children}
+      </option>
+    );
+  };
+
+  return {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  };
+});
+
+const textField: ConditionFieldDef = {
+  id: "name",
+  label: "Name",
+  type: "text",
+};
+
+const numberField: ConditionFieldDef = {
+  id: "balance",
+  label: "Account Balance",
+  type: "number",
+};
+
+const currencyField: ConditionFieldDef = {
+  id: "revenue",
+  label: "Revenue",
+  type: "currency",
+};
+
+const dateField: ConditionFieldDef = {
+  id: "created_at",
+  label: "Created At",
+  type: "date",
+};
+
+const allFields: ConditionFieldDef[] = [
+  textField,
+  numberField,
+  currencyField,
+  dateField,
+];
+
+describe("DataTableConditionFilter", () => {
+  let onConditionsChange: ReturnType<typeof vi.fn<(conditions: ConditionFilterValue[]) => void>>;
+
+  beforeEach(() => {
+    onConditionsChange = vi.fn<(conditions: ConditionFilterValue[]) => void>();
+  });
+
+  it("renders a polished empty panel with Add filter, disabled Add filter group, and quiet Clear filters", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("Filter builder")).toBeDefined();
+    expect(screen.getByText("No builder filters yet. Add a filter to start a condition row.")).toBeDefined();
+    expect(screen.getByText("Add filter")).toBeDefined();
+    expect(screen.getByText("Add filter group")).toBeDefined();
+    expect(screen.getByText("Add filter group").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(screen.getByText("Clear filters").closest("button")?.hasAttribute("disabled")).toBe(true);
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(0);
+  });
+
+  it("clicking Add filter creates a draft row without emitting an incomplete condition", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(1);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+
+  it("preserves an in-progress draft when fields are recreated with the same definition", () => {
+    const { rerender } = render(
+      <DataTableConditionFilter
+        fields={[...allFields]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+
+    rerender(
+      <DataTableConditionFilter
+        fields={[...allFields]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect((screen.getByPlaceholderText("Enter value...") as HTMLInputElement).value).toBe("Acme");
+  });
+
+  it("commits a text draft with Apply after a value is entered", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Apply"));
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("Enter in the value field commits the current draft row", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    const valueInput = screen.getByPlaceholderText("Enter value...");
+    fireEvent.change(valueInput, { target: { value: "Acme" } });
+    fireEvent.keyDown(valueInput, { key: "Enter" });
+
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed?.[0]).toMatchObject({ field: "name", operator: "eq", value: "Acme" });
+  });
+
+  it("adding another row commits existing complete drafts and labels rows Where/And", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Enter value..."), {
+      target: { value: "Acme" },
+    });
+    fireEvent.click(screen.getByText("Add filter"));
+
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getByText("And")).toBeDefined();
+    const committed = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(committed).toHaveLength(1);
+    expect(committed?.[0].value).toBe("Acme");
+  });
+
+  it("changing field resets operator and clears value", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const balanceOption = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .find((opt) => opt.textContent?.includes("Account Balance"));
+    expect(balanceOption).not.toBeUndefined();
+    fireEvent.click(balanceOption!);
+    fireEvent.click(screen.getByText("Apply"));
+
+    // The updated row is incomplete after field change, so Apply omits it.
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual([]);
+  });
+
+  it("hides value input for unary operators and commits null values", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "is_null", value: null },
+      { id: "c-2", field: "balance", operator: "is_not_null", value: null },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(2);
+    expect(container.querySelectorAll("input")).toHaveLength(0);
+    expect(screen.getAllByText("No value needed")).toHaveLength(2);
+
+    fireEvent.click(screen.getByText("Apply"));
+    expect(onConditionsChange.mock.calls.at(-1)?.[0]).toEqual(conditions);
+  });
+
+  it("removing a condition row commits remaining rows", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "test" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+    ];
+
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getAllByRole("button", { name: "Remove condition" })[0]);
+
+    const updated = onConditionsChange.mock.calls.at(-1)?.[0];
+    expect(updated).toHaveLength(1);
+    expect(updated?.[0]).toMatchObject({ field: "balance", operator: "gt", value: 100 });
+  });
+
+  it("clears all builder conditions", () => {
+    render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: "test" }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Clear filters"));
+
+    expect(onConditionsChange).toHaveBeenCalledWith([]);
+  });
+
+  it("renders currency prefix, parses currency as a number, and renders number inputs", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "revenue", operator: "eq", value: 5000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(screen.getByText("$")).toBeDefined();
+    const input = container.querySelector('input[type="number"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "6500" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe(6500);
+  });
+
+  it("renders and commits date values with a date input", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "created_at", operator: "gte", value: "2026-01-01" },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const input = container.querySelector('input[type="date"]');
+    expect(input).not.toBeNull();
+    fireEvent.change(input!, { target: { value: "2026-02-03" } });
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(onConditionsChange.mock.calls.at(-1)?.[0][0].value).toBe("2026-02-03");
+  });
+
+  it("renders all provided conditions", () => {
+    const conditions: ConditionFilterValue[] = [
+      { id: "c-1", field: "name", operator: "eq", value: "Acme" },
+      { id: "c-2", field: "balance", operator: "gt", value: 100 },
+      { id: "c-3", field: "revenue", operator: "gte", value: 50000 },
+    ];
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={conditions}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    expect(container.querySelectorAll('[data-slot="condition-row"]')).toHaveLength(3);
+    expect(screen.getByText("Where")).toBeDefined();
+    expect(screen.getAllByText("And")).toHaveLength(2);
+  });
+
+  it("operator options are scalar only and exclude in/contains", () => {
+    expect(getOperators(textField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
+    expect(getOperators({ ...textField, operators: ["eq", "in", "is_null"] })).toEqual(["eq", "is_null"]);
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "name", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).not.toContain("contains");
+    expect(optionTexts).toContain("is empty");
+  });
+
+  it("operator options change based on field type", () => {
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={allFields}
+        conditions={[{ id: "c-1", field: "balance", operator: "eq", value: null }]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    const optionTexts = Array.from(container.querySelectorAll('[data-slot="select-item"]'))
+      .map((el) => el.textContent);
+    expect(optionTexts).toContain(">");
+    expect(optionTexts).toContain("≥");
+    expect(optionTexts).toContain("<");
+    expect(optionTexts).toContain("≤");
+    expect(optionTexts).not.toContain("contains");
+  });
+
+  it("generateConditionId returns unique values", () => {
+    const ids = new Set(Array.from({ length: 100 }, () => generateConditionId()));
+    expect(ids.size).toBe(100);
+  });
+});

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

@@ -200,7 +200,7 @@ describe("DataTableFilter – preset support", () => {
 
     // Without presets, the root should be the DropdownMenu
     // which doesn't have flex-wrap class
-    const wrapper = container.firstElementChild
+    const _wrapper = container.firstElementChild
     // The button should be the first interactive child (DropdownMenu renders button)
     const button = container.querySelector("button")
     expect(button).not.toBeNull()