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

describe("Popover Component", () => {
  const props: PopoverProps = {
    dataTestId: "test-id",
    anchor: null,
    animate: true,
    appendTo: document.body,
    callout: true,
    className: ["popover-class"],
    collision: {
      horizontal: "fit",
      vertical: "fit",
    },
    contentStyle: { color: "red" },
    id: "popover-id",
    margin: { horizontal: 10, vertical: 10 },
    offset: { left: 10, top: 10 },
    popoverClass: ["popover-internal-class"],
    position: "top",
    positionMode: "fixed",
    scale: 1,
    show: false,
    style: { backgroundColor: "blue" },
    title: "Popover Title",
  };

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

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