initiative/apps/web/src/components/__tests__/roll-mode-menu.test.tsx

// @vitest-environment jsdom
import { cleanup, render, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { afterEach, describe, expect, it, vi } from "vitest";
import { RollModeMenu } from "../roll-mode-menu.js";

afterEach(cleanup);

describe("RollModeMenu", () => {
	it("renders advantage and disadvantage buttons", () => {
		render(
			<RollModeMenu
				position={{ x: 100, y: 100 }}
				onSelect={() => {}}
				onClose={() => {}}
			/>,
		);
		expect(screen.getByText("Advantage")).toBeDefined();
		expect(screen.getByText("Disadvantage")).toBeDefined();
	});

	it("calls onSelect with 'advantage' and onClose when clicked", async () => {
		const onSelect = vi.fn();
		const onClose = vi.fn();
		render(
			<RollModeMenu
				position={{ x: 100, y: 100 }}
				onSelect={onSelect}
				onClose={onClose}
			/>,
		);

		await userEvent.click(screen.getByText("Advantage"));

		expect(onSelect).toHaveBeenCalledWith("advantage");
		expect(onClose).toHaveBeenCalled();
	});

	it("calls onSelect with 'disadvantage' and onClose when clicked", async () => {
		const onSelect = vi.fn();
		const onClose = vi.fn();
		render(
			<RollModeMenu
				position={{ x: 100, y: 100 }}
				onSelect={onSelect}
				onClose={onClose}
			/>,
		);

		await userEvent.click(screen.getByText("Disadvantage"));

		expect(onSelect).toHaveBeenCalledWith("disadvantage");
		expect(onClose).toHaveBeenCalled();
	});
});