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

describe("Rating Component", () => {
  const props: RatingProps = {
    ariaDescribedBy: "describedby-id",
    ariaLabelledBy: "labelledby-id",
    children: <div>Custom Content</div>,
    className: "custom-class",
    defaultValue: 3,
    dir: "ltr",
    disabled: false,
    half: true,
    icon: "custom-icon",
    id: "rating-id",
    label: "Rating Label",
    max: 5,
    min: 1,
    name: "rating-name",
    precision: "half",
    readonly: false,
    required: false,
    selection: "single",
    step: 1,
    style: { color: "red" },
    tabIndex: 0,
    valid: true,
    validationMessage: "Invalid Rating",
    validityStyles: true,
    value: 4
  };

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

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