import React from "react";
import { render, fireEvent } from "@testing-library/react";
import FloatingActionButton from "../FloatingActionButton";

describe("FloatingActionButton Component Tests", () => {
  it("renders without crashing", () => {
    const { container } = render(<FloatingActionButton icon="add" />);
    expect(container).toBeTruthy();
  });

  it("displays the correct icon", () => {
    const { container } = render(<FloatingActionButton icon="add" />);
    const icon = container.querySelector(".k-fab-icon");
    expect(icon).toBeTruthy();
    expect(icon).toHaveClass("k-i-add");
  });

  it("triggers action on click", () => {
    const handleClick = jest.fn();
    const { getByRole } = render(
      <FloatingActionButton icon="add" onClick={handleClick} />
    );
    fireEvent.click(getByRole("button"));
    expect(handleClick).toHaveBeenCalled();
  });

  it("matches snapshot", () => {
    const { asFragment } = render(<FloatingActionButton icon="add" />);
    const fragment = asFragment();

    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const button = cleanFragment.querySelector("button");
    if (button) {
      button.removeAttribute("id");
    }

    expect(cleanFragment).toMatchSnapshot();
  });
});