import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ContextMenuProps } from "../ContextMenuProps";
import ContextMenu from "../ContextMenu";

describe("ContextMenu Component", () => {
  interface MenuItem {
    text: string;
    url: string;
  }

  const props: ContextMenuProps = {
    children: <div>Menu Item</div>,
    className: "custom-context-menu-class",
    customCloseItemIds: ["0", "0_1"],
    dir: "ltr",
    itemRender: (item: MenuItem) => <span>{item.text}</span>,
    items: [
      { text: "Item 1", url: "/" },
      { text: "Item 2", url: "/item2" },
    ],
    linkRender: (item: MenuItem) => <a href={item.url}>{item.text}</a>,
    offset: { left: 100, top: 200 },
    show: true,
    style: { backgroundColor: "lightgrey" },
    vertical: true,
    onClose: () => {},
    onSelect: () => {},
  };

  it("renders all props correctly", () => {
    render(<ContextMenu {...props} />);
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(<ContextMenu {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});