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

describe("SvgIcon Component", () => {
  const props: SvgIconProps = {
    dataTestId: "test-id",
    className: "test-class-name",
    flip: "horizontal",
    icon: {
      name: "test-icon-name",
      content: "<svg></svg>",
      viewBox: "0 0 24 24",
    },
    id: "test-icon-id",
    size: "medium",
    style: { color: "red" },
    svgClassName: "test-svg-class-name",
    svgStyle: { fill: "blue" },
    tabIndex: 2,
    themeColor: "primary",
    viewBox: "0 0 24 24",
  };

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

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