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

describe("HoverEditButton", () => {
	it("fires onClick and exposes the default aria-label", async () => {
		const onClick = vi.fn();
		render(<HoverEditButton onClick={onClick} />);
		const button = screen.getByRole("button", { name: "Edit" });
		await userEvent.click(button);
		expect(onClick).toHaveBeenCalledTimes(1);
	});

	it("honors a custom label", () => {
		render(<HoverEditButton onClick={() => {}} label="Rename machine" />);
		expect(
			screen.getByRole("button", { name: "Rename machine" }),
		).toBeInTheDocument();
	});

	it('defaults to always-visible below md (mobile="always")', () => {
		render(<HoverEditButton onClick={() => {}} />);
		const button = screen.getByRole("button", { name: "Edit" });
		const tokens = button.className.split(/\s+/);
		// The default mobile mode layers hover-reveal only at md+ via
		// md:opacity-0/md:group-hover:opacity-100, so the button is visible by
		// default below md (no base opacity-0 token).
		expect(tokens).toContain("md:opacity-0");
		expect(tokens).toContain("md:group-hover:opacity-100");
		expect(tokens).not.toContain("opacity-0");
	});

	it('preserves the legacy opacity-0 behavior when mobile="hover"', () => {
		render(<HoverEditButton onClick={() => {}} mobile="hover" />);
		const button = screen.getByRole("button", { name: "Edit" });
		expect(button.className).toContain("opacity-0");
		expect(button.className).toContain("group-hover:opacity-100");
	});
});