postdown/tests/ui/checkbox_test.tsx

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

Deno.test({
  name: "Checkbox - renders bare checkbox without label",
  fn() {
    render(<Checkbox />);
    const checkbox = screen.getByRole("checkbox");
    assertEquals(checkbox.tagName, "INPUT");
    assertEquals((checkbox as HTMLInputElement).type, "checkbox");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Checkbox - renders with label text",
  fn() {
    render(<Checkbox label="Accept terms" />);
    const label = screen.getByText("Accept terms");
    assertEquals(label.tagName, "SPAN");
    const checkbox = screen.getByRole("checkbox");
    assertEquals(checkbox.tagName, "INPUT");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Checkbox - wraps in label element when label prop given",
  fn() {
    const { container } = render(<Checkbox label="Wrap" />);
    const labelEl = container.querySelector("label");
    assertEquals(labelEl !== null, true);
    assertEquals(labelEl!.className.includes("flex"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Checkbox - passes through checked attribute",
  fn() {
    render(<Checkbox checked />);
    const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
    assertEquals(checkbox.checked, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

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

Deno.test({
  name: "Checkbox - fires onChange handler",
  fn() {
    let changed = false;
    render(
      <Checkbox
        onChange={() => {
          changed = true;
        }}
      />,
    );
    fireEvent.click(screen.getByRole("checkbox"));
    assertEquals(changed, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

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