import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import React from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { Input, Password } from "./input";
afterEach(cleanup);
describe("Input Component", () => {
    it("should render correctly", () => {
        render(<Input name="test" placeholder="Enter text"/>);
        const input = screen.getByPlaceholderText("Enter text");
        expect(input).toBeTruthy();
        expect(input.name).toBe("test");
    });
    it("should handle changes", () => {
        const handleChange = vi.fn();
        render(<Input name="test" onChange={handleChange}/>);
        const input = screen.getByRole("textbox");
        fireEvent.change(input, { target: { value: "hello" } });
        expect(handleChange).toHaveBeenCalledTimes(1);
        expect(input.value).toBe("hello");
    });
});
describe("Password Component", () => {
    it("should render as password type by default", () => {
        render(<Password name="password" placeholder="Pass"/>);
        const input = screen.getByPlaceholderText("Pass");
        expect(input.type).toBe("password");
    });
    it("should toggle visibility on button click", () => {
        render(<Password name="password" placeholder="Pass"/>);
        const input = screen.getByPlaceholderText("Pass");
        const button = screen.getByRole("button");
        // Mouse down shows password
        fireEvent.mouseDown(button);
        expect(input.type).toBe("text");
        // Mouse up hides password
        fireEvent.mouseUp(button);
        expect(input.type).toBe("password");
    });
});