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

describe("Breadcrumb Component", () => {
  const props: BreadcrumbProps = {
    ariaLabel: "Example Breadcrumb",
    className: "custom-class",
    data: [
      {
        id: "home",
        text: "Home",
        iconClass: "k-i-home",
      },
      {
        id: "products",
        text: "Products",
      },
      {
        id: "computer",
        text: "Computer",
      },
    ],
    dir: "ltr",
    disabled: false,
    iconClassField: "icon-class",
    iconField: "icon",
    id: "breadcrumb-id",
    size: "medium",
    style: { color: "blue" },
    tabIndex: 0,
    textField: "text",
    onItemSelect: () => {},
    onKeyDown: () => {},
  };

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

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