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

describe("ArcGauge Component", () => {
  const props: ArcGaugeProps = {
    children: <div>Test Child</div>,
    className: "test-class",
    color: "#FF5733",
    colors: [{ from: 0, to: 50, color: "#FFC300" }, { from: 51, to: 100, color: "#C70039" }],
    dir: "ltr",
    opacity: 0.75,
    renderAs: "svg",
    scale: { startAngle: -90, endAngle: 90, min: 0, max: 100, majorTicks: { size: 5 }, minorTicks: { size: 2 } },
    style: { width: "100px", height: "100px" },
    transitions: true,
    value: 65
  };

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

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