import React from "react";
import "structured-clone";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { SpreadsheetProps } from "../SpreadsheetProps";
import Spreadsheet from "../Spreadsheet";
import { sheets } from "../mockData/sheets";

global.structuredClone = (obj) => JSON.parse(JSON.stringify(obj));

describe("Spreadsheet Component", () => {
  const props: SpreadsheetProps = {
    dataTestId: "test-id",
    className: "spreadsheet-class",
    defaultProps: { sheets },
    style: { width: "100%", height: "400px" },
    toolbar: true,
    onChange: () => {},
    onChangeFormat: () => {},
    onExcelExport: () => {},
    onExcelImport: () => {},
    onSelect: () => {},
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<Spreadsheet {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const dynamicAttributes = [
      "aria-describedby",
      "aria-owns",
      "id",
      "data-sortable-id",
    ];
    const elements = cleanFragment.querySelectorAll("*");
    elements.forEach((element) => {
      dynamicAttributes.forEach((attr) => {
        if (element.hasAttribute(attr)) {
          element.removeAttribute(attr);
        }
      });
    });
    expect(cleanFragment).toMatchSnapshot();
  });
});