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

describe("Input Component", () => {
  const props: InputProps = {
    dataTestId: "test-id",
    id: "input-id",
    ariaDescribedBy: "ariaDescribedByValue",
    ariaLabel: "ariaLabelValue",
    ariaLabelledBy: "ariaLabelledByValue",
    defaultValue: "defaultValueValue",
    label: "labelValue",
    labelClassName: "labelClassNameValue",
    valid: true,
    validationMessage: "validationMessageValue",
    validityStyles: true,
    value: "valueValue",
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<Input {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const inputs = cleanFragment.querySelectorAll("input");
    const labels = cleanFragment.querySelectorAll("label");

    inputs.forEach((input) => {
      input.removeAttribute("aria-controls");
      input.removeAttribute("id");
    });

    labels.forEach((label) => {
      label.removeAttribute("for");
    });

    expect(cleanFragment).toMatchSnapshot();
  });
});