DSMMG/packages/react/src/ToggleGroup.test.tsx

import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { axe } from "vitest-axe";
import { useState } from "react";
import { ToggleGroup } from "./ToggleGroup";

const ITEMS = [
  { value: "list", label: "Liste" },
  { value: "grid", label: "Grille" },
  { value: "kanban", label: "Kanban" },
];

function Single() {
  const [v, setV] = useState<string | undefined>("list");
  return (
    <ToggleGroup type="single" value={v} onValueChange={setV} ariaLabel="Vue" items={ITEMS} />
  );
}
function Multiple() {
  const [v, setV] = useState<string[]>(["list", "grid"]);
  return (
    <ToggleGroup type="multiple" value={v} onValueChange={setV} ariaLabel="Filtres" items={ITEMS} />
  );
}

describe("ToggleGroup", () => {
  it("rend tous les items en single", () => {
    render(<Single />);
    expect(screen.getAllByRole("radio")).toHaveLength(3);
  });

  it("clic toggle l'item en single", async () => {
    const user = userEvent.setup();
    render(<Single />);
    await user.click(screen.getByRole("radio", { name: "Grille" }));
    expect(screen.getByRole("radio", { name: "Grille" })).toHaveAttribute("data-state", "on");
  });

  it("rend en mode multiple plusieurs actifs", () => {
    render(<Multiple />);
    const buttons = screen.getAllByRole("button");
    expect(buttons.filter((b) => b.getAttribute("data-state") === "on")).toHaveLength(2);
  });

  it("a11y axe-core", async () => {
    const { container } = render(<Single />);
    expect(await axe(container)).toHaveNoViolations();
  });
});