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

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

  const props: MenuProps = {
    children: <div>Menu Item</div>,
    className: "menu-class",
    customCloseItemIds: ["0", "1_0"],
    dir: "ltr",
    hoverCloseDelay: 100,
    hoverOpenDelay: 100,

    itemRender: (item: MenuItem) => <span>{item.text}</span>,
    items: [{ text: "Item 1" }, { text: "Item 2" }],
    linkRender: (item: MenuItem) => <a href={item.url}>{item.text}</a>,
    openOnClick: false,
    style: { color: "blue" },
    vertical: false,
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<Menu {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const items = cleanFragment.querySelectorAll("li");
    items.forEach((item) => {
      item.removeAttribute("id");
    });
    expect(cleanFragment).toMatchSnapshot();
  });
});