import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import { axe } from "vitest-axe";
import { AvatarGroup } from "./AvatarGroup";

describe("AvatarGroup", () => {
  const data = [
    { initials: "MD", alt: "Marie" },
    { initials: "JM", alt: "Jean" },
    { initials: "SB", alt: "Sophie" },
    { initials: "TL", alt: "Thomas" },
    { initials: "ER", alt: "Emma" },
    { initials: "LB", alt: "Lohann" },
  ];

  it("limite l'affichage à max", () => {
    render(<AvatarGroup avatars={data} max={3} />);
    expect(screen.getByText("+3")).toBeInTheDocument();
    expect(screen.getByLabelText(/3 autres/)).toBeInTheDocument();
  });

  it("respecte le total custom", () => {
    render(<AvatarGroup avatars={data.slice(0, 3)} max={3} total={12} />);
    expect(screen.getByText("+9")).toBeInTheDocument();
  });

  it("expose role group", () => {
    render(<AvatarGroup avatars={data.slice(0, 2)} />);
    expect(screen.getByRole("group")).toBeInTheDocument();
  });

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