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

describe("SplitButton Component", () => {
  it("renders with all props", () => {
    render(
      <SplitButton
        dataTestId="testid"
        accessKey="test-access-key"
        ariaLabel="test-aria-label"
        buttonClass="test-button-class"
        className="test-class"
        dir="test-dir"
        disabled={false}
        fillMode="solid"
        icon="test-icon"
        iconClass="test-icon-class"
        id="test-id"
        imageUrl="test-image-url"
        item={() => <div>test-item</div>}
        itemRender={() => <div>test-item-render</div>}
        items={["test-item-1", "test-item-2"]}
        opened={false}
        popupSettings={{ animate: true }}
        rounded="medium"
        size="medium"
        style={{ color: "red" }}
        tabIndex={0}
        text="test-text"
        textField="test-text-field"
        themeColor="primary"
        title="test-title"
        onBlur={() => {}}
        onButtonClick={() => {}}
        onClose={() => {}}
        onFocus={() => {}}
        onItemClick={() => {}}
        onOpen={() => {}}
      >
        Test SplitButton
      </SplitButton>
    );
  });

  it("matches snapshot", () => {
    const { asFragment } = render(<SplitButton>Snapshot Test</SplitButton>);
    const fragment = asFragment();

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

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