1
import { act } from "react";
2
import { createRoot, type Root } from "react-dom/client";
3
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
4
 
5
import { SitesImage } from "@/client/sites/islands/sites-image";
6
import type { SitesImageProps } from "@/shared/sites/island-schemas";
7
 
8
let container: HTMLElement;
9
let root: Root;
10
 
11
beforeEach(() => {
12
  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
13
  container = document.createElement("div");
14
  document.body.appendChild(container);
15
  root = createRoot(container);
16
});
17
 
18
afterEach(() => {
19
  act(() => {
20
    root.unmount();
21
  });
22
  container.remove();
23
  vi.unstubAllGlobals();
24
});
25
 
26
function mount(props: SitesImageProps) {
27
  act(() => {
28
    root.render(<SitesImage {...props} />);
29
  });
30
}
31
 
32
describe("SitesImage", () => {
33
  it("starts with is-loading and clears it on img.load", () => {
34
    mount({ src: "/_assets/1/x", align: "left", naturalWidth: 1200, naturalHeight: 800 });
35
    const container = document.querySelector(".tiptap-image-container") as HTMLElement;
36
    expect(container.classList.contains("is-loading")).toBe(true);
37
    const skeleton = container.querySelector(".tiptap-image-load-skeleton");
38
    expect(skeleton).not.toBeNull();
39
    expect(skeleton?.className).toContain("bg-gradient-to-r");
40
    expect(skeleton?.className).toContain("animate-shimmer");
41
    expect(skeleton?.getAttribute("aria-hidden")).toBe("true");
42
 
43
    const img = container.querySelector("img") as HTMLImageElement;
44
    act(() => {
45
      img.dispatchEvent(new Event("load"));
46
    });
47
 
48
    expect(document.querySelector(".tiptap-image-container.is-loading")).toBeNull();
49
  });
50
 
51
  it("derives aspect-ratio from natural dimensions", () => {
52
    mount({ src: "/_assets/1/x", align: "left", naturalWidth: 1280, naturalHeight: 720 });
53
    const container = document.querySelector(".tiptap-image-container") as HTMLElement;
54
    expect(container.style.aspectRatio).toContain(String(1280 / 720));
55
  });
56
 
57
  it("renders the error state when the img errors", () => {
58
    mount({ src: "/broken", align: "left" });
59
    const img = document.querySelector("img") as HTMLImageElement;
60
    act(() => {
61
      img.dispatchEvent(new Event("error"));
62
    });
63
    expect(document.querySelector(".tiptap-image-error")).not.toBeNull();
64
    expect(document.querySelector(".tiptap-image-container.is-loading")).toBeNull();
65
  });
66
 
67
  it("keeps brightness through image loading and resets it without filtering the caption", () => {
68
    const props = { src: "/_assets/1/x", align: "left" as const, alt: "Screenshot", brightness: 75 };
69
    mount(props);
70
    const img = container.querySelector("img")!;
71
    expect(img.style.filter).toBe("brightness(0.75)");
72
    act(() => img.dispatchEvent(new Event("load")));
73
    expect(img.style.filter).toBe("brightness(0.75)");
74
    expect(container.querySelector("figcaption")?.textContent).toBe("Screenshot");
75
    expect(container.querySelector("figure")?.style.filter).toBe("");
76
    mount({ ...props, brightness: 100 });
77
    expect(img.style.filter).toBe("");
78
    expect(img.getAttribute("src")).toBe(props.src);
79
  });
80
});