postdown/tests/ui/input_test.tsx

import { assertEquals, cleanup, render, screen } from "./setup.ts";
import Input from "../../components/form/Input.tsx";

Deno.test({
  name: "Input - renders bare input without label",
  fn() {
    render(<Input placeholder="Enter text" />);
    const input = screen.getByPlaceholderText("Enter text");
    assertEquals(input.tagName, "INPUT");
    // No wrapping div or label
    assertEquals(input.parentElement?.tagName, "DIV"); // render container
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - renders with label wrapper",
  fn() {
    render(<Input label="Email" placeholder="email" />);
    const label = screen.getByText("Email");
    assertEquals(label.tagName, "LABEL");
    const input = screen.getByPlaceholderText("email");
    assertEquals(input.tagName, "INPUT");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - applies error border when error=true",
  fn() {
    render(<Input error={true} placeholder="err" />);
    const input = screen.getByPlaceholderText("err");
    assertEquals(input.className.includes("border-red-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - applies normal border when error=false",
  fn() {
    render(<Input error={false} placeholder="ok" />);
    const input = screen.getByPlaceholderText("ok");
    assertEquals(input.className.includes("border-gray-300"), true);
    assertEquals(input.className.includes("border-red-600"), false);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - passes through type attribute",
  fn() {
    render(<Input type="password" placeholder="pw" />);
    const input = screen.getByPlaceholderText("pw") as HTMLInputElement;
    assertEquals(input.type, "password");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - passes through disabled attribute",
  fn() {
    render(<Input disabled placeholder="disabled" />);
    const input = screen.getByPlaceholderText("disabled") as HTMLInputElement;
    assertEquals(input.disabled, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Input - appends custom className",
  fn() {
    render(<Input className="my-input" placeholder="custom" />);
    const input = screen.getByPlaceholderText("custom");
    assertEquals(input.className.includes("my-input"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});