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

describe("DropDownButton Component Tests", () => {
  it("renders without crashing", () => {
    const { container } = render(<DropDownButton text="Test Button" />);
    expect(container).toBeTruthy();
  });

  it("displays the provided text", () => {
    const { getByText } = render(<DropDownButton text="Test Button" />);
    expect(getByText("Test Button")).toBeInTheDocument();
  });

  it("opens dropdown on click", () => {
    const { getByText } = render(
      <DropDownButton
        text="Dropdown Button"
        items={[{ text: "Item 1" }, { text: "Item 2" }]}
      />
    );
    fireEvent.click(getByText("Dropdown Button"));
  });

  it("matches snapshot", () => {
    const { asFragment } = render(<DropDownButton text="Test Button" />);
    const fragment = asFragment();

    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const buttons = cleanFragment.querySelectorAll("button");
    buttons.forEach((button: Element) =>
      (button as HTMLElement).removeAttribute("id")
    );

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