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>');
});