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

describe("TreeList Component", () => {
  const props: TreeListProps = {
    dataTestId: "test-id",
    className: "treelist-class",
    columnMenu: () => <div>Column Menu</div>,
    columnMenuFilter: [],
    columns: [],
    columnVirtualization: false,
    data: [],
    dataItemKey: "id",
    editField: "edit",
    editRow: (props) => <div>Edit Row {props.dataItem.id}</div>,
    expandField: "expanded",
    filter: [],
    filterRow: () => (
      <tr>
        <td>Filter Row</td>
      </tr>
    ),
    navigatable: false,
    noRecords: <div>No Records Found</div>,
    pager: () => <div>Pager</div>,
    reorderable: false,
    resizable: false,
    row: (props) => <div>Row {props.dataItem.id}</div>,
    rowDraggable: false,
    rowHeight: 30,
    scrollable: "scrollable",
    selectable: {},
    selectedField: "selected",
    skip: 0,
    sort: [],
    sortable: {},
    style: {},
    subItemsField: "subItems",
    tableProps: {},
    take: 10,
    toolbar: <div>Toolbar</div>,
  };

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

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