postdown/tests/ui/modal_test.tsx

import {
  act,
  assertEquals,
  cleanup,
  fireEvent,
  render,
  screen,
} from "./setup.ts";
import Modal from "../../islands/Modal.tsx";

Deno.test({
  name: "Modal - initially hidden",
  fn() {
    const { container } = render(<Modal />);
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - registers globalThis.$modal",
  fn() {
    render(<Modal />);
    assertEquals(typeof globalThis.$modal, "object");
    assertEquals(typeof globalThis.$modal!.show, "function");
    assertEquals(typeof globalThis.$modal!.hide, "function");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - show() displays with title and content",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Test Title", "Test Content", []);
    });
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), false);
    assertEquals(screen.getByText("Test Title") !== null, true);
    assertEquals(screen.getByText("Test Content") !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - renders action buttons",
  fn() {
    render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", [
        { text: "OK" },
        { text: "Cancel" },
      ]);
    });
    assertEquals(screen.getByText("OK").tagName, "BUTTON");
    assertEquals(screen.getByText("Cancel").tagName, "BUTTON");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - action button with onClick calls handler",
  fn() {
    let clicked = "";
    render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", [
        {
          text: "Confirm",
          onClick: (text: string) => {
            clicked = text;
          },
        },
      ]);
    });
    fireEvent.click(screen.getByText("Confirm"));
    assertEquals(clicked, "Confirm");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - action button without onClick hides modal",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", [{ text: "Close" }]);
    });
    act(() => {
      fireEvent.click(screen.getByText("Close"));
    });
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - close icon hides modal",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", []);
    });
    const closeIcon = container.querySelector(".bi-x")!;
    act(() => {
      fireEvent.click(closeIcon);
    });
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Modal - cleans up globalThis.$modal on unmount",
  fn() {
    render(<Modal />);
    assertEquals(globalThis.$modal !== undefined, true);
    cleanup();
    assertEquals(globalThis.$modal, undefined);
  },
  sanitizeResources: false,
  sanitizeOps: false,
});