peter
61e848e63a
New source-agnostic SegmentedToggle primitive (rounded-full pill track, one active option, aria-pressed drives the paint via the .pill recipe). Migrates the three hand-rolled MATCH segments onto it: - feed tag any/all "Match" toggle (Sidebar) - feed Mine/Library scope bar (Sidebar; fullWidth + icons + per-option tips) - Plex any/all combine toggle (PlexSidebar MatchToggle is now a thin binding) Caption mode (justify-between + label) covers the match toggles; fullWidth + size="md" covers the scope bar. Adds SegmentedToggle.dom.test.tsx (6 tests). Part of the app-wide single-select control unification; branch not merged.
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
// @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");
|
|
});
|
|
});
|