import { expect, test } from "bun:test";
import { showImageFallbacks } from "../src/image-preview.ts";

test("image-disabled mode exposes safe alt text, proportions and reversible placeholders", () => {
  const displayed: any[] = [];
  const images = [
    { alt: "<b>Logo & name</b>", width: "320", height: "180" },
    { alt: "", width: "not a size", height: "99999" },
  ].map((attributes) => ({
    getAttribute: (key: string) => (attributes as Record<string, string>)[key] ?? null,
    after: (element: unknown) => displayed.push(element),
  }));
  const canvas = {
    querySelectorAll: () => images,
    createElement: () => ({
      dataset: {},
      style: {} as Record<string, string>,
      textContent: "",
      attributes: {} as Record<string, string>,
      setAttribute(key: string, value: string) {
        this.attributes[key] = value;
      },
      remove() {
        const index = displayed.indexOf(this);
        if (index >= 0) displayed.splice(index, 1);
      },
    }),
  } as unknown as Document;
  showImageFallbacks(canvas, true);
  expect(displayed).toHaveLength(2);
  expect(displayed[0].textContent).toBe("<b>Logo & name</b>");
  expect(displayed[0].attributes["aria-label"]).toBe("<b>Logo & name</b>");
  expect(displayed[0].style.aspectRatio).toBe("320/180");
  expect(displayed[1].attributes["aria-hidden"]).toBe("true");
  expect(displayed[1].style.maxWidth).toBeUndefined();
  showImageFallbacks(canvas, true);
  expect(displayed).toHaveLength(2);
  showImageFallbacks(canvas, false);
  expect(displayed).toHaveLength(0);
  expect(images[0]!.getAttribute("alt")).toBe("<b>Logo & name</b>");
});