paseo/packages/app/src/components/ui/combobox-options.test.ts

import { describe, expect, it } from "vitest";

import {
  buildVisibleComboboxOptions,
  getComboboxFallbackIndex,
  orderVisibleComboboxOptions,
} from "./combobox-options";

describe("buildVisibleComboboxOptions", () => {
  const options = [
    { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" as const },
    { id: "/Users/me/project-b", label: "/Users/me/project-b", kind: "directory" as const },
  ];

  it("keeps a custom row visible while searching with no matches", () => {
    const visible = buildVisibleComboboxOptions({
      options,
      searchQuery: "/tmp/new-project",
      searchable: true,
      allowCustomValue: true,
      customValuePrefix: "",
      customValueKind: "directory",
    });

    expect(visible).toHaveLength(1);
    expect(visible[0]).toEqual({
      id: "/tmp/new-project",
      label: "/tmp/new-project",
      description: undefined,
      kind: "directory",
    });
  });

  it("does not duplicate a row when search exactly matches an existing option", () => {
    const visible = buildVisibleComboboxOptions({
      options,
      searchQuery: "/Users/me/project-a",
      searchable: true,
      allowCustomValue: true,
      customValuePrefix: "",
      customValueKind: "directory",
    });

    expect(visible).toEqual([
      { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" },
    ]);
  });
});

describe("combobox above-search ordering", () => {
  const visible = [
    { id: "/tmp/new-project", label: "/tmp/new-project", kind: "directory" as const },
    { id: "/Users/me/project-a", label: "/Users/me/project-a", kind: "directory" as const },
    { id: "/Users/me/project-b", label: "/Users/me/project-b", kind: "directory" as const },
  ];

  it("renders first logical option closest to the search box in above-search mode", () => {
    const ordered = orderVisibleComboboxOptions(visible, "above-search");
    expect(ordered.map((option) => option.id)).toEqual([
      "/Users/me/project-b",
      "/Users/me/project-a",
      "/tmp/new-project",
    ]);
    expect(getComboboxFallbackIndex(ordered.length, "above-search")).toBe(2);
  });

  it("keeps normal top-down order in below-search mode", () => {
    const ordered = orderVisibleComboboxOptions(visible, "below-search");
    expect(ordered.map((option) => option.id)).toEqual([
      "/tmp/new-project",
      "/Users/me/project-a",
      "/Users/me/project-b",
    ]);
    expect(getComboboxFallbackIndex(ordered.length, "below-search")).toBe(0);
  });
});