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

describe("ListBox Component", () => {
  const props: ListBoxProps = {
    dataTestId: "test-id",
    className: "custom-listbox-class",
    data: ["Item1", "Item2", "Item3"],
    draggable: true,
    item: (props) => <div>{props.item}</div>,
    selectedField: "selected",
    size: "medium",
    style: { border: "1px solid black" },
    textField: "text",
    toolbar: null,
    toolbarPosition: "right",
    valueField: "value",
  };

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

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