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

describe("Checkbox Component", () => {
  const props: CheckboxProps = {
    ariaDescribedBy: "description-id",
    ariaLabelledBy: "label-id",
    checked: true,
    children: <span>Child Element</span>,
    className: "checkbox-class",
    defaultChecked: false,
    defaultValue: "default value",
    dir: "ltr",
    disabled: false,
    id: "checkbox-id",
    label: "Checkbox Label",
    labelClassName: "label-class",
    labelOptional: true,
    labelPlacement: "after",
    name: "checkbox-name",
    required: false,
    rounded: "medium",
    size: "medium",
    tabIndex: 0,
    valid: true,
    validationMessage: "Validation message",
    validityStyles: true,
    value: null,
  };

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

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