@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/components/auto-complete/auto-complete.test.tsx

@@ -0,0 +1,709 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SearchIcon } from "lucide-react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Autocomplete,
+  AutocompleteClear,
+  AutocompleteCollection,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  type AutocompleteOption,
+  AutocompletePopup,
+  AutocompletePrimitive,
+  AutocompleteRoot,
+  AutocompleteRow,
+  AutocompleteSeparator,
+  AutocompleteStatus,
+  AutocompleteTrigger,
+  AutocompleteValue,
+  useAutocompleteFilter,
+} from "../../components";
+
+const items: AutocompleteOption[] = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry" },
+];
+
+const openPopup = async (user: ReturnType<typeof userEvent.setup>) => {
+  const input = screen.getByRole("combobox");
+  await user.click(input);
+  await user.keyboard("{ArrowDown}");
+};
+
+describe("Autocomplete composite", () => {
+  it("renders an input with the provided placeholder", () => {
+    render(<Autocomplete items={items} placeholder="Pick a fruit" />);
+
+    expect(screen.getByPlaceholderText("Pick a fruit")).toBeInTheDocument();
+  });
+
+  it("uses the Spanish default placeholder when none is provided", () => {
+    render(<Autocomplete items={items} />);
+
+    expect(screen.getByPlaceholderText("Buscar...")).toBeInTheDocument();
+  });
+
+  it("renders disabled when disabled prop is set", () => {
+    render(<Autocomplete items={items} disabled placeholder="Disabled" />);
+
+    expect(screen.getByPlaceholderText("Disabled")).toBeDisabled();
+  });
+
+  it("renders readOnly when readOnly prop is set", () => {
+    render(<Autocomplete items={items} readOnly placeholder="ReadOnly" />);
+
+    expect(screen.getByPlaceholderText("ReadOnly")).toHaveAttribute(
+      "readonly",
+    );
+  });
+
+  it("renders the start addon when provided", () => {
+    render(
+      <Autocomplete
+        items={items}
+        startAddon={<SearchIcon data-testid="search-icon" />}
+        placeholder="With addon"
+      />,
+    );
+
+    expect(screen.getByTestId("search-icon")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="autocomplete-start-addon"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the trigger adornment when adornment='trigger'", () => {
+    render(
+      <Autocomplete
+        items={items}
+        adornment="trigger"
+        placeholder="With trigger"
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="autocomplete-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the clear adornment when adornment='clear'", () => {
+    render(
+      <Autocomplete
+        items={items}
+        adornment="clear"
+        defaultValue={items[0]}
+        placeholder="With clear"
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="autocomplete-clear"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("forwards defaultValue.label to the input", () => {
+    render(<Autocomplete items={items} defaultValue={items[1]} />);
+
+    expect(screen.getByRole("combobox")).toHaveValue("Banana");
+  });
+
+  it("forwards controlled value.label to the input", () => {
+    render(
+      <Autocomplete
+        items={items}
+        value={items[2]}
+        onValueChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("Cherry");
+  });
+
+  it("opens the popup and shows items when ArrowDown is pressed", async () => {
+    const user = userEvent.setup();
+    render(<Autocomplete items={items} placeholder="Open me" />);
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(screen.getByText("Apple")).toBeInTheDocument();
+      expect(screen.getByText("Banana")).toBeInTheDocument();
+      expect(screen.getByText("Cherry")).toBeInTheDocument();
+    });
+  });
+
+  it("calls onValueChange when an item is selected", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Autocomplete
+        items={items}
+        onValueChange={onValueChange}
+        placeholder="Select"
+      />,
+    );
+
+    await openPopup(user);
+    await waitFor(() => screen.getByText("Banana"));
+    await user.click(screen.getByText("Banana"));
+
+    // NOTE: Base UI's Autocomplete onValueChange emits the input string value,
+    // not the full item object. The composite's TOption typing is misleading.
+    expect(onValueChange).toHaveBeenCalled();
+    const lastArg =
+      onValueChange.mock.calls[onValueChange.mock.calls.length - 1][0];
+    expect(lastArg).toBe("Banana");
+  });
+
+  it("calls onValueChange when the value is cleared", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Autocomplete
+        items={items}
+        defaultValue={items[0]}
+        adornment="clear"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await user.click(
+      document.querySelector(
+        '[data-slot="autocomplete-clear"]',
+      ) as HTMLElement,
+    );
+
+    // Clear emits "" (empty string), not null — the composite's `?? null` only
+    // catches null/undefined, so an empty string passes through unchanged.
+    expect(onValueChange).toHaveBeenCalled();
+    const lastArg =
+      onValueChange.mock.calls[onValueChange.mock.calls.length - 1][0];
+    expect(lastArg).toBe("");
+  });
+
+  it("renders the loading message when isLoading is true", async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        items={items}
+        isLoading
+        loadingMessage="Loading fruits..."
+        placeholder="Loading"
+      />,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() =>
+      expect(screen.getByText("Loading fruits...")).toBeInTheDocument(),
+    );
+  });
+
+  it("uses the Spanish default loading message", async () => {
+    const user = userEvent.setup();
+    render(<Autocomplete items={items} isLoading placeholder="Loading" />);
+
+    await openPopup(user);
+
+    await waitFor(() =>
+      expect(screen.getByText("Cargando...")).toBeInTheDocument(),
+    );
+  });
+
+  it("renders the empty message when no items match the filter", async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        items={items}
+        emptyMessage="Nada acá"
+        placeholder="Search"
+      />,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByRole("combobox"), "zzz");
+
+    await waitFor(() =>
+      expect(screen.getByText("Nada acá")).toBeInTheDocument(),
+    );
+  });
+
+  it("uses the Spanish default empty message", async () => {
+    const user = userEvent.setup();
+    render(<Autocomplete items={items} placeholder="Search" />);
+
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByRole("combobox"), "xxx");
+
+    await waitFor(() =>
+      expect(screen.getByText("Sin resultados")).toBeInTheDocument(),
+    );
+  });
+
+  it("uses a custom renderOption when provided", async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        items={items}
+        renderOption={(option) => (
+          <span data-testid={`opt-${option.value}`}>★ {option.label}</span>
+        )}
+        placeholder="Custom"
+      />,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("opt-apple")).toHaveTextContent("★ Apple");
+    });
+  });
+
+  it("applies className to the input and classNames to slots", async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        items={items}
+        className="input-class"
+        classNames={{
+          popup: "popup-class",
+          list: "list-class",
+          item: "item-class",
+          status: "status-class",
+          empty: "empty-class",
+        }}
+        placeholder="Slots"
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveClass("input-class");
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="autocomplete-popup"]'),
+      ).toHaveClass("popup-class");
+      expect(
+        document.querySelector('[data-slot="autocomplete-list"]'),
+      ).toHaveClass("list-class");
+      expect(
+        document.querySelector('[data-slot="autocomplete-item"]'),
+      ).toHaveClass("item-class");
+      expect(
+        document.querySelector('[data-slot="autocomplete-status"]'),
+      ).toHaveClass("status-class");
+    });
+  });
+
+  it("forwards a custom filter function", async () => {
+    const user = userEvent.setup();
+    const filter = vi.fn(() => true);
+    render(
+      <Autocomplete items={items} filter={filter} placeholder="Filter" />,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByRole("combobox"), "a");
+
+    expect(filter).toHaveBeenCalled();
+  });
+});
+
+describe("Autocomplete primitives", () => {
+  const withRoot = (children: React.ReactNode) =>
+    render(<AutocompleteRoot items={items}>{children}</AutocompleteRoot>);
+
+  it("exposes AutocompleteRoot as a Base UI Root", () => {
+    expect(AutocompleteRoot).toBe(AutocompletePrimitive.Root);
+  });
+
+  it("renders AutocompleteInput with a startAddon", () => {
+    withRoot(
+      <AutocompleteInput
+        startAddon={<SearchIcon data-testid="search" />}
+        placeholder="Primitive input"
+      />,
+    );
+
+    expect(screen.getByTestId("search")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="autocomplete-input-group"]'),
+    ).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Primitive input")).toBeInTheDocument();
+  });
+
+  it("renders AutocompleteInput with adornment='trigger' and forwards triggerProps", () => {
+    withRoot(
+      <AutocompleteInput
+        adornment="trigger"
+        triggerProps={{ className: "trigger-cls" }}
+        placeholder="Trigger"
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="autocomplete-trigger"]'),
+    ).toHaveClass("trigger-cls");
+  });
+
+  it("renders AutocompleteInput with adornment='clear' and forwards clearProps", () => {
+    render(
+      <AutocompleteRoot items={items} defaultValue="Apple">
+        <AutocompleteInput
+          adornment="clear"
+          clearProps={{ className: "clear-cls" }}
+          placeholder="Clear"
+        />
+      </AutocompleteRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="autocomplete-clear"]'),
+    ).toHaveClass("clear-cls");
+  });
+
+  it("renders AutocompleteInput without adornment and without addon", () => {
+    withRoot(<AutocompleteInput placeholder="Plain" />);
+
+    expect(screen.getByPlaceholderText("Plain")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="autocomplete-start-addon"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector('[data-slot="autocomplete-trigger"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector('[data-slot="autocomplete-clear"]'),
+    ).toBeNull();
+  });
+
+  it("renders AutocompleteTrigger with custom children", () => {
+    withRoot(
+      <AutocompleteInput
+        adornment="trigger"
+        triggerProps={{ children: <span data-testid="custom-chev">v</span> }}
+        placeholder="Custom chev"
+      />,
+    );
+
+    expect(screen.getByTestId("custom-chev")).toBeInTheDocument();
+  });
+
+  it("renders AutocompleteClear with custom children", () => {
+    render(
+      <AutocompleteRoot items={items} defaultValue="Apple">
+        <AutocompleteInput
+          adornment="clear"
+          clearProps={{ children: <span data-testid="custom-x">x</span> }}
+          placeholder="Custom x"
+        />
+      </AutocompleteRoot>,
+    );
+
+    expect(screen.getByTestId("custom-x")).toBeInTheDocument();
+  });
+
+  it("renders AutocompletePopup with all positioning props", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Pos" />
+        <AutocompletePopup
+          side="top"
+          align="end"
+          sideOffset={8}
+          alignOffset={4}
+          className="popup-pos"
+        >
+          <AutocompleteList>
+            {(option) => (
+              <AutocompleteItem
+                key={(option as AutocompleteOption).value}
+                value={option}
+              >
+                {(option as AutocompleteOption).label}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="autocomplete-positioner"]'),
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector('[data-slot="autocomplete-popup"]'),
+      ).toHaveClass("popup-pos");
+    });
+  });
+
+  it("renders AutocompleteSeparator inside the list", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Sep" />
+        <AutocompletePopup>
+          <AutocompleteList>
+            {(option) => (
+              <AutocompleteItem
+                key={(option as AutocompleteOption).value}
+                value={option}
+              >
+                {(option as AutocompleteOption).label}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+          <AutocompleteSeparator className="sep-cls" />
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() =>
+      expect(
+        document.querySelector('[data-slot="autocomplete-separator"]'),
+      ).toHaveClass("sep-cls"),
+    );
+  });
+
+  it("renders AutocompleteGroup and AutocompleteGroupLabel", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Group" />
+        <AutocompletePopup>
+          <AutocompleteList>
+            <AutocompleteGroup className="group-cls">
+              <AutocompleteGroupLabel className="label-cls">
+                Fruits
+              </AutocompleteGroupLabel>
+              <AutocompleteItem value={items[0]}>Apple</AutocompleteItem>
+            </AutocompleteGroup>
+          </AutocompleteList>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="autocomplete-group"]'),
+      ).toHaveClass("group-cls");
+      expect(
+        document.querySelector('[data-slot="autocomplete-group-label"]'),
+      ).toHaveClass("label-cls");
+      expect(screen.getByText("Fruits")).toBeInTheDocument();
+    });
+  });
+
+  it("renders AutocompleteEmpty when there are no matches", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Empty" />
+        <AutocompletePopup>
+          <AutocompleteList>
+            {(option) => (
+              <AutocompleteItem
+                key={(option as AutocompleteOption).value}
+                value={option}
+              >
+                {(option as AutocompleteOption).label}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+          <AutocompleteEmpty className="empty-cls">
+            No results
+          </AutocompleteEmpty>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    const input = screen.getByPlaceholderText("Empty");
+    await user.click(input);
+    await user.type(input, "zzz");
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="autocomplete-empty"]'),
+      ).toHaveClass("empty-cls");
+      expect(screen.getByText("No results")).toBeInTheDocument();
+    });
+  });
+
+  it("renders standalone AutocompleteTrigger primitive", () => {
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteTrigger className="standalone-trigger">
+          <span>Toggle</span>
+        </AutocompleteTrigger>
+      </AutocompleteRoot>,
+    );
+
+    expect(screen.getByText("Toggle")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="autocomplete-trigger"]'),
+    ).toHaveClass("standalone-trigger");
+  });
+
+  it("renders standalone AutocompleteTrigger with default chevron icon", () => {
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteTrigger />
+      </AutocompleteRoot>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="autocomplete-icon"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders standalone AutocompleteClear primitive", () => {
+    render(
+      <AutocompleteRoot items={items} defaultValue="Apple">
+        <AutocompleteClear className="standalone-clear">
+          <span>x</span>
+        </AutocompleteClear>
+      </AutocompleteRoot>,
+    );
+
+    expect(screen.getByText("x")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="autocomplete-clear"]'),
+    ).toHaveClass("standalone-clear");
+  });
+
+  it("renders AutocompleteRow inside the list", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Row" />
+        <AutocompletePopup>
+          <AutocompleteList>
+            {(option) => (
+              <AutocompleteRow
+                key={(option as AutocompleteOption).value}
+                className="row-cls"
+              >
+                <AutocompleteItem value={option}>
+                  {(option as AutocompleteOption).label}
+                </AutocompleteItem>
+              </AutocompleteRow>
+            )}
+          </AutocompleteList>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() =>
+      expect(
+        document.querySelector('[data-slot="autocomplete-row"]'),
+      ).toHaveClass("row-cls"),
+    );
+  });
+
+  it("renders AutocompleteValue with the selected label", () => {
+    render(
+      <AutocompleteRoot items={items} defaultValue="Apple">
+        <AutocompleteValue>
+          {(value) => <span data-testid="picked">{value}</span>}
+        </AutocompleteValue>
+      </AutocompleteRoot>,
+    );
+
+    expect(screen.getByTestId("picked")).toHaveTextContent("Apple");
+  });
+
+  it("renders AutocompleteStatus with the provided message", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Status" />
+        <AutocompletePopup>
+          <AutocompleteStatus className="status-cls">
+            Loading
+          </AutocompleteStatus>
+          <AutocompleteList>
+            {(option) => (
+              <AutocompleteItem
+                key={(option as AutocompleteOption).value}
+                value={option}
+              >
+                {(option as AutocompleteOption).label}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-slot="autocomplete-status"]'),
+      ).toHaveClass("status-cls");
+      expect(screen.getByText("Loading")).toBeInTheDocument();
+    });
+  });
+
+  it("renders AutocompleteCollection with provided items", async () => {
+    const user = userEvent.setup();
+    render(
+      <AutocompleteRoot items={items}>
+        <AutocompleteInput placeholder="Collection" />
+        <AutocompletePopup>
+          <AutocompleteList>
+            <AutocompleteCollection>
+              {(option) => (
+                <AutocompleteItem
+                  key={(option as AutocompleteOption).value}
+                  value={option}
+                >
+                  {(option as AutocompleteOption).label}
+                </AutocompleteItem>
+              )}
+            </AutocompleteCollection>
+          </AutocompleteList>
+        </AutocompletePopup>
+      </AutocompleteRoot>,
+    );
+
+    await openPopup(user);
+
+    // AutocompletePrimitive.Collection renders a React Fragment (no DOM),
+    // so we verify it ran by checking that items rendered through its child
+    // function.
+    await waitFor(() => {
+      expect(screen.getByText("Apple")).toBeInTheDocument();
+      expect(screen.getByText("Banana")).toBeInTheDocument();
+      expect(screen.getByText("Cherry")).toBeInTheDocument();
+    });
+  });
+
+  it("exposes useAutocompleteFilter as a function", () => {
+    expect(typeof useAutocompleteFilter).toBe("function");
+  });
+
+  it("exposes the Base UI namespace via AutocompletePrimitive", () => {
+    expect(AutocompletePrimitive).toBeDefined();
+    expect(AutocompletePrimitive.Root).toBeDefined();
+    expect(AutocompletePrimitive.Popup).toBeDefined();
+    expect(AutocompletePrimitive.Item).toBeDefined();
+  });
+});