import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { ItemButton } from "./index";
describe("ItemButton", () => {
    it("renders with label", () => {
        const { getByText } = render(React.createElement(ItemButton, { text: "Test Label", icon: {
                element: React.createElement("span", null),
                backgroundColor: undefined,
                fillColor: undefined,
            } }));
        expect(getByText("Test Label")).toBeInTheDocument();
    });
    it("calls onClick when clicked", () => {
        const onClick = vi.fn();
        const { getByRole } = render(React.createElement(ItemButton, { text: "Click me", icon: {
                element: React.createElement("span", null),
                backgroundColor: undefined,
                fillColor: undefined,
            }, onClick: onClick }));
        fireEvent.click(getByRole("button"));
        expect(onClick).toHaveBeenCalled();
    });
    it("renders icon", () => {
        const Icon = () => React.createElement("span", { "data-testid": "icon" }, "icon");
        const { getByTestId } = render(React.createElement(ItemButton, { text: "With Icon", icon: {
                element: React.createElement(Icon, null),
                backgroundColor: undefined,
                fillColor: undefined,
            } }));
        expect(getByTestId("icon")).toBeInTheDocument();
    });
    it("is disabled when disabled prop is true", () => {
        const onClick = vi.fn();
        const { getByRole } = render(React.createElement(ItemButton, { text: "Disabled", isDisabled: true, onClick: onClick, icon: {
                element: React.createElement(React.Fragment, null),
                backgroundColor: undefined,
                fillColor: undefined,
            } }));
        const button = getByRole("button");
        expect(button).toBeDisabled();
        fireEvent.click(button);
        expect(onClick).not.toHaveBeenCalled();
    });
    it("applies custom styles", () => {
        const { container } = render(React.createElement(ItemButton, { text: "Styled Button", icon: { element: React.createElement("span", null), backgroundColor: "red", fillColor: "blue" } }));
        const button = container.querySelector("button");
        expect(button).toHaveStyle({
            "--item-button-background": "red",
            "--item-button-fill": "blue",
        });
    });
    it("handles isCollapsed and isActive states", () => {
        const { getByRole } = render(React.createElement(ItemButton, { text: "Collapsed Active", isCollapsed: true, isActive: true, icon: {
                element: React.createElement("span", null),
                backgroundColor: undefined,
                fillColor: undefined,
            } }));
        const button = getByRole("button");
        expect(button).toHaveAttribute("data-is-collapsed", "true");
        expect(button).toHaveAttribute("data-is-active", "true");
    });
});
//# sourceMappingURL=index.test.js.map