@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/combobox/combobox.test.tsx

@@ -0,0 +1,461 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxRoot,
+  ComboboxRow,
+  ComboboxSearchInput,
+  ComboboxSelectTrigger,
+  ComboboxSeparator,
+  ComboboxStatus,
+} from "../../components";
+import { Field } from "../field/field";
+
+const items = [
+  { id: "1", name: "Apple" },
+  { id: "2", name: "Banana" },
+  { id: "3", name: "Cherry" },
+];
+
+function getInput(): HTMLInputElement {
+  return document.querySelector(
+    '[data-slot="combobox-input"]',
+  ) as HTMLInputElement;
+}
+
+describe("Combobox (single mode)", () => {
+  it("renders an input with role combobox and the placeholder", () => {
+    render(<Combobox items={items} placeholder="Pick fruit" />);
+
+    const input = screen.getByRole("combobox");
+    expect(input).toHaveAttribute("placeholder", "Pick fruit");
+    expect(input).toHaveAttribute("data-slot", "combobox-input");
+  });
+
+  it("opens and filters the list as the user types", async () => {
+    render(<Combobox items={items} placeholder="Pick" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "an");
+
+    const options = screen.getAllByRole("option");
+    expect(options.map((o) => o.textContent)).toEqual(["Banana"]);
+  });
+
+  it("fires onValueChange with the selected item object", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        items={items}
+        placeholder="Pick"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "Cherry");
+    await userEvent.click(screen.getByRole("option"));
+
+    expect(onValueChange.mock.calls[0][0]).toEqual({ id: "3", name: "Cherry" });
+  });
+
+  it("shows the default empty text when nothing matches", async () => {
+    render(<Combobox items={items} placeholder="Pick" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "zzz");
+
+    expect(
+      document.querySelector('[data-slot="combobox-empty"]'),
+    ).toHaveTextContent("Sin resultados.");
+  });
+
+  it("shows a custom empty text", async () => {
+    render(<Combobox items={items} placeholder="Pick" emptyText="Nada acá" />);
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "zzz");
+
+    expect(
+      document.querySelector('[data-slot="combobox-empty"]'),
+    ).toHaveTextContent("Nada acá");
+  });
+
+  it("renders a start addon", () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="Pick"
+        startAddon={<span data-testid="addon">@</span>}
+      />,
+    );
+
+    expect(screen.getByTestId("addon")).toBeInTheDocument();
+  });
+
+  it("renders the clear control by default and hides it when showClear is false", () => {
+    const { unmount } = render(<Combobox items={items} placeholder="P" />);
+    expect(
+      document.querySelector('[data-slot="combobox-trigger"]'),
+    ).toBeInTheDocument();
+    unmount();
+
+    render(<Combobox items={items} placeholder="P" showClear={false} />);
+    // With showClear=false the end adornment still renders the trigger toggle.
+    expect(
+      document.querySelector('[data-slot="combobox-input"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("reflects a controlled value in the input", () => {
+    render(<Combobox items={items} placeholder="P" value={items[1]} />);
+
+    expect(getInput().value).toBe("Banana");
+  });
+
+  it("uses renderItem to customize option content", async () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="P"
+        renderItem={(item) => <span data-testid="custom">{item.name}!</span>}
+      />,
+    );
+
+    await userEvent.click(getInput());
+    await userEvent.type(getInput(), "Apple");
+
+    expect(screen.getByTestId("custom")).toHaveTextContent("Apple!");
+  });
+
+  it("applies classNames to input, popup, list and item slots", async () => {
+    render(
+      <Combobox
+        items={items}
+        placeholder="P"
+        classNames={{
+          input: "input-cls",
+          popup: "popup-cls",
+          list: "list-cls",
+          item: "item-cls",
+          empty: "empty-cls",
+        }}
+      />,
+    );
+
+    expect(getInput()).toHaveClass("input-cls");
+
+    await userEvent.click(getInput());
+    await userEvent.type(getInput(), "Apple");
+
+    expect(document.querySelector('[data-slot="combobox-popup"]')).toHaveClass(
+      "popup-cls",
+    );
+    expect(document.querySelector('[data-slot="combobox-list"]')).toHaveClass(
+      "list-cls",
+    );
+    expect(document.querySelector('[data-slot="combobox-item"]')).toHaveClass(
+      "item-cls",
+    );
+  });
+});
+
+describe("Combobox getId / getLabel defaults", () => {
+  it("handles { label, value } shaped items", () => {
+    const opts = [
+      { label: "One", value: "1" },
+      { label: "Two", value: "2" },
+    ];
+    render(<Combobox items={opts} placeholder="P" value={opts[0]} />);
+
+    expect(getInput().value).toBe("One");
+  });
+
+  it("handles plain string items", () => {
+    render(<Combobox items={["x", "y", "z"]} placeholder="P" value="y" />);
+
+    expect(getInput().value).toBe("y");
+  });
+
+  it("respects custom getLabel and getId", () => {
+    const opts = [
+      { code: "AR", country: "Argentina" },
+      { code: "BR", country: "Brazil" },
+    ];
+    render(
+      <Combobox
+        items={opts}
+        placeholder="P"
+        value={opts[1]}
+        getLabel={(o) => o.country}
+        getId={(o) => o.code}
+      />,
+    );
+
+    expect(getInput().value).toBe("Brazil");
+  });
+
+  it("handles { title } shaped items", () => {
+    const opts = [{ title: "First" }, { title: "Second" }];
+    render(<Combobox items={opts} placeholder="P" value={opts[1]} />);
+
+    expect(getInput().value).toBe("Second");
+  });
+});
+
+describe("Combobox (multiple mode)", () => {
+  it("renders chips for the default selected values", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0], items[1]]}
+      />,
+    );
+
+    const chips = document.querySelectorAll('[data-slot="combobox-chip"]');
+    expect([...chips].map((c) => c.getAttribute("aria-label"))).toEqual([
+      "Apple",
+      "Banana",
+    ]);
+  });
+
+  it("renders the chips container and a chips search input", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="Search"
+        defaultValue={[]}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders a remove control on each chip", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Quitar" })).toBeInTheDocument();
+  });
+
+  it("fires onValueChange when selecting an option", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[]}
+        defaultOpen
+        onValueChange={onValueChange}
+      />,
+    );
+
+    // With the popup open the chips search input is mounted.
+    const chipsInput = document.querySelector(
+      '[data-slot="combobox-chips-input"]',
+    ) as HTMLInputElement;
+    await userEvent.type(chipsInput, "Apple");
+    await userEvent.click(screen.getByRole("option"));
+
+    expect(onValueChange.mock.calls[0][0]).toEqual([items[0]]);
+  });
+
+  it("renders a start addon alongside the chips", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+        startAddon={<span data-testid="chips-addon">#</span>}
+      />,
+    );
+
+    expect(screen.getByTestId("chips-addon")).toBeInTheDocument();
+  });
+});
+
+describe("Combobox Field integration", () => {
+  it("marks multiple-mode chips aria-invalid inside an invalid Field", () => {
+    render(
+      <Field label="Fruits" invalid>
+        <Combobox
+          multiple
+          items={items}
+          placeholder="P"
+          defaultValue={[items[0]]}
+        />
+      </Field>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("does not set aria-invalid when standalone", () => {
+    render(
+      <Combobox
+        multiple
+        items={items}
+        placeholder="P"
+        defaultValue={[items[0]]}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("does not set aria-invalid inside a valid Field", () => {
+    render(
+      <Field label="Fruits">
+        <Combobox
+          multiple
+          items={items}
+          placeholder="P"
+          defaultValue={[items[0]]}
+        />
+      </Field>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).not.toHaveAttribute("aria-invalid");
+  });
+});
+
+describe("Combobox escape-hatch primitives", () => {
+  it("composes a select-style trigger with grouped items", () => {
+    render(
+      <ComboboxRoot
+        items={items}
+        itemToStringLabel={(i: (typeof items)[number]) => i.name}
+        defaultOpen
+      >
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxStatus>Status</ComboboxStatus>
+          <ComboboxList>
+            {(item: (typeof items)[number]) => (
+              <ComboboxItem key={item.id} value={item}>
+                {item.name}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-select-trigger"]'),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="combobox-status"]'),
+    ).toHaveTextContent("Status");
+    expect(screen.getAllByRole("option").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("omits the end adornment when neither trigger nor clear is shown", () => {
+    render(
+      <ComboboxRoot items={items}>
+        <ComboboxInput showTrigger={false} showClear={false} />
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-input"]'),
+    ).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="combobox-trigger"]')).toBeNull();
+    expect(document.querySelector('[data-slot="combobox-clear"]')).toBeNull();
+  });
+
+  it("renders a select trigger with a clear control when showClear", () => {
+    render(
+      <ComboboxRoot items={items}>
+        <ComboboxSelectTrigger placeholder="Choose" showClear />
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-select-trigger-group"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("composes search input, separators and collection", () => {
+    render(
+      <ComboboxRoot items={items} defaultOpen>
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxSearchInput placeholder="Search" className="search-cls" />
+          <ComboboxList>
+            <ComboboxCollection>
+              {(item: (typeof items)[number]) => (
+                <ComboboxRow key={item.id} className="row-cls">
+                  <ComboboxItem value={item}>{item.name}</ComboboxItem>
+                </ComboboxRow>
+              )}
+            </ComboboxCollection>
+          </ComboboxList>
+          <ComboboxSeparator className="sep-cls" />
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="combobox-search-input"]'),
+    ).toHaveClass("search-cls");
+    expect(
+      document.querySelector('[data-slot="combobox-separator"]'),
+    ).toHaveClass("sep-cls");
+  });
+
+  it("renders a group with a label inside an open popup", () => {
+    render(
+      <ComboboxRoot items={items} defaultOpen>
+        <ComboboxSelectTrigger placeholder="Choose" />
+        <ComboboxPopup>
+          <ComboboxList>
+            <ComboboxGroup className="grp-cls">
+              <ComboboxGroupLabel className="grp-label-cls">
+                Fruits
+              </ComboboxGroupLabel>
+            </ComboboxGroup>
+          </ComboboxList>
+        </ComboboxPopup>
+      </ComboboxRoot>,
+    );
+
+    expect(document.querySelector('[data-slot="combobox-group"]')).toHaveClass(
+      "grp-cls",
+    );
+    expect(
+      document.querySelector('[data-slot="combobox-group-label"]'),
+    ).toHaveTextContent("Fruits");
+  });
+});