postdown/tests/ui/textarea_test.tsx

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

Deno.test({
  name: "Textarea - renders bare textarea without label",
  fn() {
    render(<Textarea placeholder="Write here" />);
    const textarea = screen.getByPlaceholderText("Write here");
    assertEquals(textarea.tagName, "TEXTAREA");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Textarea - renders with label wrapper",
  fn() {
    render(<Textarea label="Content" placeholder="content" />);
    const label = screen.getByText("Content");
    assertEquals(label.tagName, "LABEL");
    const textarea = screen.getByPlaceholderText("content");
    assertEquals(textarea.tagName, "TEXTAREA");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

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

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

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

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