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 { Button } from "./Button";

describe("Button", () => {
  it("rend le label", () => {
    render(<Button>Continuer</Button>);
    expect(screen.getByRole("button", { name: "Continuer" })).toBeInTheDocument();
  });

  it("appelle onClick quand cliqué", async () => {
    const user = userEvent.setup();
    let clicks = 0;
    render(<Button onClick={() => clicks++}>Cliquer</Button>);
    await user.click(screen.getByRole("button"));
    expect(clicks).toBe(1);
  });

  it("est focusable au clavier (Tab)", async () => {
    const user = userEvent.setup();
    render(<Button>OK</Button>);
    await user.tab();
    expect(screen.getByRole("button")).toHaveFocus();
  });

  it("active onClick avec Espace ou Entrée", async () => {
    const user = userEvent.setup();
    let clicks = 0;
    render(<Button onClick={() => clicks++}>Cliquer</Button>);
    const btn = screen.getByRole("button");
    btn.focus();
    await user.keyboard("{Enter}");
    await user.keyboard(" ");
    expect(clicks).toBe(2);
  });

  it("respecte disabled", async () => {
    const user = userEvent.setup();
    let clicks = 0;
    render(
      <Button disabled onClick={() => clicks++}>
        OK
      </Button>,
    );
    await user.click(screen.getByRole("button"));
    expect(clicks).toBe(0);
  });

  it("loading rend le bouton inactif aux clics", async () => {
    const user = userEvent.setup();
    let clicks = 0;
    render(
      <Button loading onClick={() => clicks++}>
        OK
      </Button>,
    );
    await user.click(screen.getByRole("button"));
    expect(clicks).toBe(0);
  });

  it("n'a pas de violations axe-core (a11y)", async () => {
    const { container } = render(
      <>
        <Button>Primary</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="danger">Danger</Button>
        <Button disabled>Disabled</Button>
        <Button icon="settings-3-line" aria-label="Paramètres" />
      </>,
    );
    expect(await axe(container)).toHaveNoViolations();
  });
});