siftlode/frontend/src/components/ui/SegmentedToggle.dom.test.tsx

// @vitest-environment jsdom
//
// Rendering integration of the shared SegmentedToggle. Labels are plain props (no i18n); the active
// paint is CSS (`.pill[aria-pressed]`), so we assert the aria-pressed contract, not styling.
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import SegmentedToggle from "./SegmentedToggle";

const OPTS = [
  { value: "or", label: "Any" },
  { value: "and", label: "All" },
] as const;

afterEach(cleanup);

describe("SegmentedToggle", () => {
  it("renders one button per option with the given labels", () => {
    render(<SegmentedToggle options={OPTS} value="or" onChange={vi.fn()} ariaLabel="Match" />);
    expect(screen.getAllByRole("button").map((b) => b.textContent)).toEqual(["Any", "All"]);
  });

  it("marks exactly the active option aria-pressed", () => {
    render(<SegmentedToggle options={OPTS} value="and" onChange={vi.fn()} ariaLabel="Match" />);
    expect(screen.getByRole("button", { name: "Any" }).getAttribute("aria-pressed")).toBe("false");
    expect(screen.getByRole("button", { name: "All" }).getAttribute("aria-pressed")).toBe("true");
  });

  it("clicking an option fires onChange with its value", () => {
    const onChange = vi.fn();
    render(<SegmentedToggle options={OPTS} value="or" onChange={onChange} ariaLabel="Match" />);
    fireEvent.click(screen.getByRole("button", { name: "All" }));
    expect(onChange).toHaveBeenCalledWith("and");
  });

  it("exposes the group aria-label", () => {
    render(<SegmentedToggle options={OPTS} value="or" onChange={vi.fn()} ariaLabel="Match mode" />);
    expect(screen.getByRole("group", { name: "Match mode" })).toBeTruthy();
  });

  it("renders the caption when label is set", () => {
    render(
      <SegmentedToggle
        options={OPTS}
        value="or"
        onChange={vi.fn()}
        ariaLabel="Match"
        label="Match"
      />,
    );
    // caption text plus the two option labels
    expect(screen.getByText("Match")).toBeTruthy();
    expect(screen.getAllByRole("button")).toHaveLength(2);
  });

  it("renders per-option icons and tooltips (scope-bar shape)", () => {
    render(
      <SegmentedToggle
        ariaLabel="Scope"
        fullWidth
        size="md"
        options={[
          { value: "my", label: "Mine", icon: <svg data-testid="ic-my" />, title: "Your subs" },
          { value: "all", label: "Library", icon: <svg data-testid="ic-all" /> },
        ]}
        value="my"
        onChange={vi.fn()}
      />,
    );
    expect(screen.getByTestId("ic-my")).toBeTruthy();
    expect(screen.getByRole("button", { name: "Mine" }).getAttribute("title")).toBe("Your subs");
  });

  // The hint was a `title` on a non-focusable box: the pointer's tooltip, and nothing at all for a
  // keyboard or screen-reader user (deep review, debt burn). It is the group's description now.
  it("describes the group by its title, standalone and captioned alike", () => {
    render(
      <>
        <SegmentedToggle
          options={OPTS}
          value="or"
          onChange={vi.fn()}
          ariaLabel="Show"
          title="Results per batch"
        />
        <SegmentedToggle
          options={OPTS}
          value="or"
          onChange={vi.fn()}
          ariaLabel="Match"
          label="Match"
          title="Any or all"
        />
      </>,
    );
    expect(
      screen.getByRole("group", { name: "Show", description: "Results per batch" }),
    ).toBeTruthy();
    expect(screen.getByRole("group", { name: "Match", description: "Any or all" })).toBeTruthy();
  });

  it("adds no description without a title", () => {
    render(<SegmentedToggle options={OPTS} value="or" onChange={vi.fn()} ariaLabel="Match" />);
    expect(screen.getByRole("group", { name: "Match" }).hasAttribute("aria-describedby")).toBe(
      false,
    );
  });
});