postdown/tests/ui/post_list_test.tsx

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

const mockPosts = [
  { id: "1", title: "First Post", content: "Hello world", shared: false },
  { id: "2", title: "Second Post", content: "Another post", shared: true },
  { id: "3", title: "", content: "", shared: false },
];

Deno.test({
  name: "PostList - renders correct number of post cards",
  fn() {
    const { container } = render(<PostList posts={mockPosts} />);
    const cards = container.querySelectorAll(".grid > div");
    assertEquals(cards.length, 3);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - displays post title",
  fn() {
    render(<PostList posts={mockPosts} />);
    assertEquals(screen.getByText("First Post") !== null, true);
    assertEquals(screen.getByText("Second Post") !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - shows Untitled for empty title",
  fn() {
    render(<PostList posts={mockPosts} />);
    assertEquals(screen.getByText("Untitled") !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - displays post content snippet",
  fn() {
    render(<PostList posts={mockPosts} />);
    assertEquals(screen.getByText("Hello world") !== null, true);
    assertEquals(screen.getByText("Another post") !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - shows No content for empty content",
  fn() {
    render(<PostList posts={mockPosts} />);
    assertEquals(screen.getByText("No content") !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - each card has an Edit button",
  fn() {
    render(<PostList posts={mockPosts} />);
    const editButtons = screen.getAllByText("Edit");
    assertEquals(editButtons.length, 3);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - each card has a delete icon",
  fn() {
    const { container } = render(<PostList posts={mockPosts} />);
    const deleteIcons = container.querySelectorAll(".bi-x");
    assertEquals(deleteIcons.length, 3);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - delete icon triggers $modal.show",
  fn() {
    let modalTitle = "";
    let modalContent = "";
    globalThis.$modal = {
      show: (title: string, content: string | preact.JSX.Element) => {
        modalTitle = title;
        modalContent = content as string;
      },
      hide: () => {},
    };

    const { container } = render(<PostList posts={[mockPosts[0]]} />);
    const deleteIcon = container.querySelector(".bi-x")!;
    fireEvent.click(deleteIcon);

    assertEquals(modalTitle, "Confirm delete");
    assertEquals(modalContent.includes("First Post"), true);

    delete globalThis.$modal;
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "PostList - renders empty grid with no posts",
  fn() {
    const { container } = render(<PostList posts={[]} />);
    const cards = container.querySelectorAll(".grid > div");
    assertEquals(cards.length, 0);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});