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

describe("Scheduler Component", () => {
  const fixedDate = new Date("2023-12-13T12:00:00");
  const props: SchedulerProps = {
    dataTestId: "scheduler-test-id",
    ariaLabel: "Scheduler Component",
    ariaLabelledby: "scheduler-label",
    className: "scheduler-class",
    data: [
      { id: 1, title: "Event 1", start: fixedDate, end: fixedDate },
      { id: 2, title: "Event 2", start: fixedDate, end: fixedDate },
    ],
    date: fixedDate,
    defaultDate: fixedDate,
    defaultView: "month",
    editable: true,
    height: "500px",
    id: "scheduler-id",
    resources: [],
    role: "presentation",
    rtl: false,
    style: { width: "100%" },
    tabIndex: 0,
    timezone: "Etc/UTC",
    view: "day",
    onDataChange: () => {},
    onDateChange: () => {},
    onViewChange: () => {},
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<Scheduler {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const elements = cleanFragment.querySelectorAll("div");
    elements.forEach((element) => {
      element.removeAttribute("date");
      element.removeAttribute("data-slot-end");
      element.removeAttribute("data-slot-start");
      element.removeAttribute("class");
      element.removeAttribute("style");
    });
    expect(cleanFragment).toMatchSnapshot();
  });
});