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

describe("MultiSelectTree Component", () => {
  const props: MultiSelectTreeProps = {
    dataTestId: "test-id",
    accessKey: "key",
    adaptive: true,
    adaptiveTitle: "Adaptive Title",
    ariaDescribedBy: "description",
    ariaLabelledBy: "labelledby",
    checkField: "checked",
    checkIndeterminateField: "indeterminate",
    className: "custom-class",
    data: [
      { text: "Item1", value: 1, items: [] },
      { text: "Item2", value: 2, items: [] },
    ],
    dataItemKey: "value",
    dir: "ltr",
    disabled: false,
    expandField: "expanded",
    fillMode: "solid",
    filter: "filter-value",
    filterable: true,
    id: "multiselecttree-id",
    label: "MultiSelectTreeLabel",
    listNoData: () => <div>No data available</div>,
    loading: false,
    name: "multiselecttree-name",
    opened: false,
    placeholder: "placeholder",
    popupSettings: { className: "popup-class" },
    required: true,
    rounded: "medium",
    size: "medium",
    style: { color: "green" },
    subItemsField: "items",
    tabIndex: 0,
    tags: [{ text: "Item1", data: [{ text: "Item1", value: 1 }] }],
    textField: "text",
    valid: true,
    validationMessage: "Validation message",
    validityStyles: false,
    value: [{ text: "Item2", value: 2, items: [] }],
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<MultiSelectTree {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});