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

describe("Popup Component", () => {
  const props: PopupProps = {
    dataTestId: "test-id",
    anchor: document.createElement("div"),
    anchorAlign: { horizontal: "left", vertical: "top" },
    animate: true,
    appendTo: null,
    className: "popup-class",
    collision: { horizontal: "fit", vertical: "fit" },
    id: "popup-id",
    margin: { horizontal: 0, vertical: 0 },
    offset: { left: 0, top: 0 },
    popupAlign: { horizontal: "left", vertical: "top" },
    popupClass: "popup-inner-class",
    positionMode: "fixed",
    scale: 1,
    show: false,
    style: { width: "200px", height: "200px" },
  };

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

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