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

const CustomComponent: React.FunctionComponent = () => <div></div>;

describe("NumericTextBox Component", () => {
  const props: NumericTextBoxProps = {
    dataTestId: "test-id",
    accessKey: "a",
    ariaDescribedBy: "descriptionId",
    ariaLabel: "NumericTextBox",
    ariaLabelledBy: "labelId",
    className: "numeric-textbox-class",
    defaultValue: null,
    dir: "ltr",
    disabled: false,
    fillMode: "solid",
    format: "n2",
    id: "numeric-textbox",
    inputStyle: { color: "blue" },
    inputType: "tel",
    label: "Enter number",
    max: 100,
    min: 0,
    name: "numericTextBox",
    placeholder: "Enter value",
    prefix: CustomComponent,
    rangeOnEnter: true,
    readOnly: false,
    required: false,
    rounded: "medium",
    size: "medium",
    spinners: true,
    step: 1,
    style: { margin: "10px" },
    suffix: CustomComponent,
    tabIndex: 0,
    title: "NumericTextBox",
    valid: true,
    validationMessage: "",
    validityStyles: true,
    value: null,
    width: "100px",
  };

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

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