postdown/tests/ui/button_test.tsx

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

Deno.test({
  name: "Button - renders children text",
  fn() {
    render(<Button>Click me</Button>);
    assertEquals(screen.getByText("Click me").tagName, "BUTTON");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies default variant classes",
  fn() {
    render(<Button>Default</Button>);
    const btn = screen.getByText("Default");
    assertEquals(btn.className.includes("bg-white"), true);
    assertEquals(btn.className.includes("text-gray-800"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies primary variant classes",
  fn() {
    render(<Button variant="primary">Primary</Button>);
    const btn = screen.getByText("Primary");
    assertEquals(btn.className.includes("bg-blue-600"), true);
    assertEquals(btn.className.includes("text-white"), true);
    assertEquals(btn.className.includes("border-blue-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies danger variant classes",
  fn() {
    render(<Button variant="danger">Danger</Button>);
    const btn = screen.getByText("Danger");
    assertEquals(btn.className.includes("bg-red-600"), true);
    assertEquals(btn.className.includes("text-white"), true);
    assertEquals(btn.className.includes("border-red-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies danger-outline variant classes",
  fn() {
    render(<Button variant="danger-outline">Danger Outline</Button>);
    const btn = screen.getByText("Danger Outline");
    assertEquals(btn.className.includes("bg-transparent"), true);
    assertEquals(btn.className.includes("text-red-600"), true);
    assertEquals(btn.className.includes("border-red-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies sm size classes",
  fn() {
    render(<Button size="sm">Small</Button>);
    const btn = screen.getByText("Small");
    assertEquals(btn.className.includes("px-2"), true);
    assertEquals(btn.className.includes("py-1"), true);
    assertEquals(btn.className.includes("text-xs"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - applies lg size classes",
  fn() {
    render(<Button size="lg">Large</Button>);
    const btn = screen.getByText("Large");
    assertEquals(btn.className.includes("px-4"), true);
    assertEquals(btn.className.includes("py-2"), true);
    assertEquals(btn.className.includes("text-base"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - passes through disabled attribute",
  fn() {
    render(<Button disabled>Disabled</Button>);
    const btn = screen.getByText("Disabled") as HTMLButtonElement;
    assertEquals(btn.disabled, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Button - fires onClick handler",
  fn() {
    let clicked = false;
    render(
      <Button
        onClick={() => {
          clicked = true;
        }}
      >
        Clickable
      </Button>,
    );
    fireEvent.click(screen.getByText("Clickable"));
    assertEquals(clicked, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

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