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

describe("AutoComplete Component", () => {
  const props: AutoCompleteProps = {
    dataTestId: "test-id",
    accessKey: "key",
    ariaDescribedBy: "description",
    ariaLabelledBy: "label",
    className: "custom-class",
    clearButton: true,
    data: ["Item1", "Item2"],
    dataItemKey: "key",
    defaultValue: "default",
    dir: "ltr",
    disabled: false,
    fillMode: "solid",
    footer: <div>Footer</div>,
    groupField: "group",
    header: <div>Header</div>,
    id: "autocomplete-id",
    label: "label",
    loading: false,
    name: "autocomplete-name",
    opened: false,
    placeholder: "placeholder",
    popupSettings: { className: "popup-class" },
    readonly: false,
    required: false,
    rounded: "medium",
    size: "medium",
    skipDisabledItems: true,
    style: { color: "red" },
    suggest: false,
    tabIndex: 0,
    textField: "text",
    valid: true,
    validationMessage: "message",
    validityStyles: true,
    value: "value",
  };

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

  it("matches the snapshot for AutoComplete", () => {
    const { asFragment } = render(<AutoComplete {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;

    cleanFragment.querySelectorAll("[aria-owns], [id]").forEach((el) => {
      el.removeAttribute("aria-owns");
      el.removeAttribute("id");
    });

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