salona/tests/DeleteButton.test.tsx

import DeleteButton from "@/apps/new-ui/components/CustomeComponents/DeleteButton";
import { render, screen, fireEvent } from "@testing-library/react";

// Mock Tooltip component to simplify test rendering
jest.mock("@/components/ui/tooltip", () => ({
  HoverTooltip: ({ label, children }: any) => (
    <div data-testid="tooltip" data-label={label}>
      {children}
    </div>
  ),
}));

describe("DeleteButton Component", () => {
  const handleClick = jest.fn();

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders icon type correctly and triggers onclick", () => {
    render(<DeleteButton onclick={handleClick} type="icon" title="حذف" />);
    const button = screen.getByRole("button");
    expect(button).toBeInTheDocument();
    expect(screen.getByTestId("tooltip")).toBeInTheDocument();
    expect(screen.getByTestId("tooltip")).toHaveAttribute("data-label", "حذف");
    fireEvent.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it("renders withBackground type and becomes disabled when loading", () => {
    const { rerender } = render(
      <DeleteButton onclick={handleClick} type="withBackground" isCancelLoading />
    );

    let button = screen.getByRole("button");
    expect(button).toBeDisabled();

    rerender(
      <DeleteButton onclick={handleClick} type="withBackground" isDoneLoading />
    );
    button = screen.getByRole("button");
    expect(button).toBeDisabled();
  });
it("renders accordion type and stops propagation", () => {
  const stopPropagation = jest.fn();

  render(<DeleteButton onclick={handleClick} type="accordion" />);

  const button = screen.getByRole("button");

  // ساخت ایونت واقعی با mock stopPropagation
  const event = new MouseEvent("click", { bubbles: true });
  Object.defineProperty(event, "stopPropagation", {
    value: stopPropagation,
  });

  fireEvent(button, event);

  expect(handleClick).toHaveBeenCalledTimes(1);
  expect(stopPropagation).toHaveBeenCalledTimes(1);
});

});