import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { Input } from "./input";

describe("Input Component", () => {
  it("renders correctly", () => {
    render(<Input placeholder="Enter text" />);
    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
  });

  it("handles value changes", async () => {
    const onChange = vi.fn();
    const user = userEvent.setup();
    render(<Input placeholder="Enter text" onChange={onChange} />);
    const input = screen.getByPlaceholderText("Enter text");

    await user.type(input, "Hello");
    expect(onChange).toHaveBeenCalled();
    expect(input).toHaveValue("Hello");
  });

  it("is disabled when the disabled prop is passed", () => {
    render(<Input disabled />);
    const input = screen.getByRole("textbox");
    expect(input).toBeDisabled();
  });
});