Files
WRNexusJS/packages/email-renderer/test/image-accessibility.test.ts
T
Clintchiz 07ed6b2596
Quality / quality (ubuntu-latest) (push) Failing after 1s
Quality / quality (windows-latest) (push) Canceled after 0s
Preserve image accessibility and dimensions in MJML
2026-09-05 17:54:05 +05:30

29 lines
2.0 KiB
TypeScript

import { expect, test } from "bun:test";
import type { BlockDocument, BlockNode } from "@wrnexus/blocks";
import { renderEmail, importMjml } from "../src/index.ts";
const documentFor = (decorative: boolean): BlockDocument => ({ schemaVersion: 1, kind: "email", meta: { subject: "Images" }, theme: { tokens: {} }, root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600" }, styles: {}, slots: { content: [{ id: "image", type: "content.image", version: 1, props: { src: "https://example.com/image.png", alt: "Accessible & descriptive", width: "320", height: "180", decorative }, styles: {}, slots: {} }] } } });
test("decorative image descriptions stay omitted across HTML text and MJML", async () => {
const rendered = await renderEmail(documentFor(true), { mjml: true });
if (!rendered.ok) throw new Error("Render failed");
expect(rendered.value.parts.html.content).toContain('alt=""');
expect(rendered.value.parts.text.content).not.toContain("Accessible");
expect(rendered.value.exports!.mjml).toContain('alt=""');
expect(rendered.value.exports!.mjml).not.toContain("Accessible");
});
test("meaningful image alt and explicit dimensions survive MJML round trip", async () => {
const rendered = await renderEmail(documentFor(false), { mjml: true });
if (!rendered.ok) throw new Error("Render failed");
expect(rendered.value.parts.text.content).toContain("Accessible & descriptive");
expect(rendered.value.exports!.mjml).toContain('width="320px" height="180px"');
let id = 0;
const imported = importMjml(rendered.value.exports!.mjml!, { id: () => `n${++id}` });
if (!imported.ok) throw new Error("Import failed");
const find = (node: BlockNode): BlockNode | undefined => node.type === "content.image" ? node : Object.values(node.slots).flat().map(find).find(Boolean);
expect(find(imported.value.root)!.props.width).toBe("320");
expect(find(imported.value.root)!.props.height).toBe("180");
expect(find(imported.value.root)!.props.alt).toBe("Accessible & descriptive");
});