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

describe("MultiSelect Component", () => {
  const props: MultiSelectProps = {
    dataTestId: "test-id",
    accessKey: "key",
    adaptive: true,
    adaptiveFilter: "filter",
    adaptiveTitle: "Adaptive Title",
    allowCustom: false,
    ariaDescribedBy: "description",
    ariaLabelledBy: "labelledby",
    autoClose: true,
    className: "custom-class",
    data: [
      { text: "Item1", value: 1 },
      { text: "Item2", value: 2 },
    ],
    dataItemKey: "value",
    defaultValue: [{ text: "Item1", value: 1 }],
    dir: "ltr",
    disabled: false,
    fillMode: "solid",
    filter: "filter-value",
    filterable: true,
    footer: <div>Footer</div>,
    groupField: "group",
    header: <div>Header</div>,
    id: "multiselect-id",
    label: "MultiSelectLabel",
    loading: false,
    name: "multiselect-name",
    opened: false,
    placeholder: "placeholder",
    popupSettings: { className: "popup-class" },
    required: true,
    rounded: "medium",
    size: "medium",
    skipDisabledItems: true,
    style: { color: "blue" },
    tabIndex: 0,
    tags: [{ text: "Item1", data: [{ text: "Item1", value: 1 }] }],
    textField: "text",
    valid: true,
    validationMessage: "Validation message",
    validityStyles: false,
    value: [{ text: "Item2", value: 2 }],
    virtual: {
      total: 100,
      pageSize: 10,
      skip: 0,
    },
  };

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

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

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

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