93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { expect, test } from "bun:test";
|
|
import { createRequire } from "node:module";
|
|
import type { BlockDocument } from "@wrnexus/blocks";
|
|
import { renderEmail, importMjml } from "../src/index.ts";
|
|
|
|
const compile = createRequire(import.meta.url)("mjml");
|
|
|
|
test("MJML preserves document metadata and global typography in compiled HTML", async () => {
|
|
const document: BlockDocument = {
|
|
schemaVersion: 1,
|
|
kind: "email",
|
|
meta: { subject: 'Brand & "News" <today>', preheader: "Preview <safe> & useful", lang: "en" },
|
|
theme: { tokens: {} },
|
|
root: {
|
|
id: "root",
|
|
type: "layout.email-document",
|
|
version: 1,
|
|
props: {
|
|
width: "600",
|
|
fontFamily: "Georgia, serif",
|
|
textColor: "#123456",
|
|
linkColor: "#a12345",
|
|
},
|
|
styles: {},
|
|
slots: {
|
|
content: [
|
|
{
|
|
id: "text",
|
|
type: "content.text",
|
|
version: 1,
|
|
props: { text: "Brand text" },
|
|
styles: {},
|
|
slots: {},
|
|
},
|
|
{
|
|
id: "button",
|
|
type: "content.button",
|
|
version: 1,
|
|
props: { label: "Brand action", href: "https://example.com" },
|
|
styles: {},
|
|
slots: {},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
const before = structuredClone(document);
|
|
const result = await renderEmail(document, { mjml: true });
|
|
expect(result.ok).toBe(true);
|
|
if (!result.ok) return;
|
|
const source = result.value.exports!.mjml!;
|
|
expect(source).toContain("<mj-title>Brand & "News" <today></mj-title>");
|
|
expect(source).toContain("<mj-preview>Preview <safe> & useful</mj-preview>");
|
|
expect(source).toContain('<mj-all font-family="Georgia, serif" />');
|
|
const compiled = await compile(source, { validationLevel: "strict", minify: false });
|
|
expect(compiled.errors).toEqual([]);
|
|
expect(compiled.html).toContain("font-family:Georgia, serif");
|
|
expect(compiled.html).toContain("color:#123456");
|
|
expect(compiled.html).toContain("Preview <safe> & useful");
|
|
expect(compiled.html).not.toContain("<safe>");
|
|
expect(document).toEqual(before);
|
|
let id = 0;
|
|
const imported = importMjml(source, { id: () => `import-${++id}` });
|
|
expect(imported.ok).toBe(true);
|
|
if (imported.ok) {
|
|
expect(imported.value.meta.subject).toBe(document.meta.subject);
|
|
expect(imported.value.meta.preheader).toBe(document.meta.preheader);
|
|
expect(imported.value.root.props.fontFamily).toBe("Georgia, serif");
|
|
expect(imported.value.root.props.textColor).toBe("#123456");
|
|
expect(imported.value.root.props.linkColor).toBe("#a12345");
|
|
const rerendered = await renderEmail(imported.value, { mjml: true });
|
|
expect(rerendered.ok).toBe(true);
|
|
}
|
|
});
|
|
|
|
test("MJML header import rejects unsupported globals and unsafe typography", () => {
|
|
for (const header of [
|
|
'<mj-attributes><mj-all padding="20px" /></mj-attributes>',
|
|
'<mj-attributes><mj-all font-family="Arial;position:fixed" /></mj-attributes>',
|
|
'<mj-attributes><mj-text font-size="20px" /></mj-attributes>',
|
|
"<mj-style>.test{color:red}</mj-style>",
|
|
'<mj-breakpoint width="900px" />',
|
|
]) {
|
|
let id = 0;
|
|
expect(
|
|
importMjml(
|
|
`<mjml><mj-head>${header}</mj-head><mj-body><mj-section><mj-column><mj-text>Text</mj-text></mj-column></mj-section></mj-body></mjml>`,
|
|
{ id: () => `n${++id}` },
|
|
).ok,
|
|
).toBe(false);
|
|
}
|
|
});
|