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

describe("Sortable Component", () => {
  const props: SortableProps = {
    dataTestId: "test-id",
    animation: true,
    className: "sortable-class",
    data: [
      { id: 1, name: "Item 1" },
      { id: 2, name: "Item 2" },
    ],
    disabledField: "isDisabled",
    emptyItemUI: () => <div>No data available</div>,
    idField: "id",
    itemUI: (props) => <div>{props.dataItem.name}</div>,
    navigation: true,
    style: { color: "red" },
    tabIndex: 0,
  };

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

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