postdown/tests/ui/dark_theme_test.tsx

import { act, assertEquals, cleanup, render, screen } from "./setup.ts";
import Button from "../../components/form/Button.tsx";
import Input from "../../components/form/Input.tsx";
import Textarea from "../../components/form/Textarea.tsx";
import Checkbox from "../../components/form/Checkbox.tsx";
import Modal from "../../islands/Modal.tsx";
import Loading from "../../islands/Loading.tsx";
import PostList from "../../islands/PostList.tsx";

// --- Button dark theme classes ---

Deno.test({
  name: "Dark theme - Button default variant has dark background class",
  fn() {
    render(<Button>Test</Button>);
    const btn = screen.getByText("Test");
    assertEquals(btn.className.includes("dark:bg-gray-700"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Button default variant has dark text class",
  fn() {
    render(<Button>Test</Button>);
    const btn = screen.getByText("Test");
    assertEquals(btn.className.includes("dark:text-gray-100"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Button has dark border class",
  fn() {
    render(<Button>Test</Button>);
    const btn = screen.getByText("Test");
    assertEquals(btn.className.includes("dark:border-gray-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Button primary variant does not override with dark bg",
  fn() {
    render(<Button variant="primary">Primary</Button>);
    const btn = screen.getByText("Primary");
    // Primary keeps blue-600 in both themes, should not have dark:bg-gray-700
    assertEquals(btn.className.includes("bg-blue-600"), true);
    assertEquals(btn.className.includes("dark:bg-gray-700"), false);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- Input dark theme classes ---

Deno.test({
  name: "Dark theme - Input has dark background class",
  fn() {
    render(<Input placeholder="test" />);
    const input = screen.getByPlaceholderText("test");
    assertEquals(input.className.includes("dark:bg-gray-800"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Input has dark text class",
  fn() {
    render(<Input placeholder="test" />);
    const input = screen.getByPlaceholderText("test");
    assertEquals(input.className.includes("dark:text-gray-100"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Input has dark border class when no error",
  fn() {
    render(<Input placeholder="test" />);
    const input = screen.getByPlaceholderText("test");
    assertEquals(input.className.includes("dark:border-gray-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Input error state does not include dark border override",
  fn() {
    render(<Input error placeholder="err" />);
    const input = screen.getByPlaceholderText("err");
    assertEquals(input.className.includes("border-red-600"), true);
    assertEquals(input.className.includes("dark:border-gray-600"), false);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- Textarea dark theme classes ---

Deno.test({
  name: "Dark theme - Textarea has dark background class",
  fn() {
    render(<Textarea placeholder="text" />);
    const ta = screen.getByPlaceholderText("text");
    assertEquals(ta.className.includes("dark:bg-gray-800"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Textarea has dark text class",
  fn() {
    render(<Textarea placeholder="text" />);
    const ta = screen.getByPlaceholderText("text");
    assertEquals(ta.className.includes("dark:text-gray-100"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Textarea has dark border class when no error",
  fn() {
    render(<Textarea placeholder="text" />);
    const ta = screen.getByPlaceholderText("text");
    assertEquals(ta.className.includes("dark:border-gray-600"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- Checkbox dark theme classes ---

Deno.test({
  name: "Dark theme - Checkbox label has dark text class",
  fn() {
    const { container } = render(<Checkbox label="Accept" />);
    const span = container.querySelector("span")!;
    assertEquals(span.className.includes("dark:text-gray-100"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- Modal dark theme classes ---

Deno.test({
  name: "Dark theme - Modal panel has dark background class",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", []);
    });
    const panel = container.querySelector(".bg-white")!;
    assertEquals(panel.className.includes("dark:bg-gray-800"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Modal panel has dark border class",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", []);
    });
    const panel = container.querySelector(".bg-white")!;
    assertEquals(panel.className.includes("dark:border-gray-700"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - Modal title border has dark class",
  fn() {
    const { container } = render(<Modal />);
    act(() => {
      globalThis.$modal!.show("Title", "Content", []);
    });
    const titleDiv = screen.getByText("Title");
    assertEquals(titleDiv.className.includes("dark:border-gray-700"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- Loading dark theme classes ---

Deno.test({
  name: "Dark theme - Loading spinner has dark background class",
  fn() {
    const { container } = render(<Loading />);
    const spinner = container.querySelector(".bg-white")!;
    assertEquals(spinner.className.includes("dark:bg-gray-200"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

// --- PostList dark theme classes ---

Deno.test({
  name: "Dark theme - PostList card has dark border class",
  fn() {
    const posts = [{
      id: "1",
      title: "Test",
      content: "Content",
      shared: false,
    }];
    const { container } = render(<PostList posts={posts} />);
    const card = container.querySelector(".grid > div")!;
    assertEquals(card.className.includes("dark:border-gray-700"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Dark theme - PostList card has dark background class",
  fn() {
    const posts = [{
      id: "1",
      title: "Test",
      content: "Content",
      shared: false,
    }];
    const { container } = render(<PostList posts={posts} />);
    const card = container.querySelector(".grid > div")!;
    assertEquals(card.className.includes("dark:bg-gray-800"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});