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

describe("FloatingLabel Component", () => {
  const props: FloatingLabelProps = {
    dataTestId: "test-id",
    children: <input type="text" />,
    className: "custom-floating-label-class",
    dir: "ltr",
    editorDisabled: false,
    editorId: "editor-id",
    editorPlaceholder: "Enter text",
    editorValid: true,
    editorValue: "Sample text",
    id: "floating-label-id",
    label: "Floating Label",
    labelClassName: "custom-label-class",
    optional: false,
    style: { color: "blue" },
  };

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

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