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

describe("PivotGrid Component", () => {
  let originalResizeObserver: typeof ResizeObserver;
  originalResizeObserver = global.ResizeObserver;
  beforeAll(() => {
    global.ResizeObserver = class {
      constructor(callback: ResizeObserverCallback) {
        this.observe = this.observe.bind(this);
        this.disconnect = this.disconnect.bind(this);
      }
      observe() {}
      disconnect() {}
      unobserve() {}
    };
  });

  const mockCellComponent = () => <div>Cell</div>;
  const mockColumnComponent = () => <div>Column</div>;
  const mockHeaderCellComponent = () => <div>Header Cell</div>;
  const mockRowComponent = () => <div>Row</div>;

  const props: PivotGridProps = {
    cell: mockCellComponent,
    className: "test-class",
    column: mockColumnComponent,
    columnAxes: [],
    columnHeadersCell: mockHeaderCellComponent,
    columnHeadersColumn: mockColumnComponent,
    columnHeadersRow: mockRowComponent,
    columns: [],
    data: [],
    dataColumn: mockColumnComponent,
    dataRow: mockRowComponent,
    headerCell: mockHeaderCellComponent,
    id: "test-id",
    navigatable: true,
    row: mockRowComponent,
    rowAxes: [],
    rowHeadersCell: mockHeaderCellComponent,
    rowHeadersColumn: mockColumnComponent,
    rowHeadersRow: mockRowComponent,
    rows: [],
    style: { color: "red" },
    tabIndex: 1,
    onColumnAxesChange: jest.fn(),
    onRowAxesChange: jest.fn(),
  };

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

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

  afterAll(() => {
    global.ResizeObserver = originalResizeObserver;
  });
});