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

describe("OrgChart Component", () => {
  jest.spyOn(console, "error").mockImplementation(() => {});

  const props: OrgChartProps = {
    dataTestId: "custom-data-test-id",
    ariaLabel: "custom-aria-label",
    avatarField: "custom-avatar-field",
    cardHeight: 100,
    cardsColors: ["#000000"],
    cardWidth: 100,
    childrenField: "custom-children-field",
    className: "custom-class-name",
    data: [],
    expandField: "custom-expand-field",
    groupField: "custom-group-field",
    groupSubtitleHeight: 100,
    groupSubtitleRender: () => <div>custom-group-subtitle-render</div>,
    groupTitleHeight: 100,
    groupTitleRender: () => <div>custom-group-title-render</div>,
    hasChildrenField: "custom-has-children-field",
    height: 100,
    id: "custom-id",
    idField: "custom-id-field",
    itemRender: () => <div>custom-item-render</div>,
    navigatable: true,
    style: { color: "red" },
    subtitleField: "custom-subtitle-field",
    titleField: "custom-title-field",
    verticalLine: 100,
    onExpandChange: () => {},
    onGroupAction: () => {},
    onItemAction: () => {},
    onItemContextMenu: () => {},
    onItemDoubleClick: () => {},
  };

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

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