postdown/tests/ui/loading_test.tsx

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

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

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

Deno.test({
  name: "Loading - show() makes visible",
  fn() {
    const { container } = render(<Loading />);
    act(() => {
      globalThis.$loading!.show();
    });
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), false);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "Loading - hide() hides again",
  fn() {
    const { container } = render(<Loading />);
    act(() => {
      globalThis.$loading!.show();
    });
    act(() => {
      globalThis.$loading!.hide();
    });
    const overlay = container.firstElementChild!;
    assertEquals(overlay.className.includes("hidden"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

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