WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/email-renderer/test/email.test.ts
+143 -38
View File
@@ -16,19 +16,35 @@ test("AMP section and spacer CSS retains configured layout values", async () =>
const draft = structuredClone(document);
const section = draft.root.slots.content[0]!;
section.props = { background: "#abcdef", padding: "12px 30px" };
const spacer = { id: 'spacer:one"', type: "content.spacer", version: 1, props: { height: "77" }, styles: {}, slots: {} };
const spacer = {
id: 'spacer:one"',
type: "content.spacer",
version: 1,
props: { height: "77" },
styles: {},
slots: {},
};
section.slots.content = [spacer];
const result = await renderEmail(draft, { amp: true, mjml: true });
expect(result.ok).toBe(true);
if (!result.ok) return;
const amp = result.value.parts.amp;
expect(amp?.validation.valid).toBe(true);
expect(amp?.content).toContain(`.${ampLayoutClass(section)}{background:#abcdef;padding:12px 30px}`);
expect(amp?.content).toContain(`.${ampLayoutClass(spacer)}{height:77px;line-height:77px;font-size:1px}`);
expect(amp?.content).toContain(
`.${ampLayoutClass(section)}{background:#abcdef;padding:12px 30px}`,
);
expect(amp?.content).toContain(
`.${ampLayoutClass(spacer)}{height:77px;line-height:77px;font-size:1px}`,
);
expect(amp?.content).toContain(`class="${ampLayoutClass(spacer)}"`);
expect(result.value.parts.html.content).toContain("height:77px");
expect(result.value.exports?.mjml).toContain('height="77px"');
expect(ampLayoutCss({ ...section, props: { background: "red;}body{display:none", padding: "</style>" } })).not.toContain("display:none");
expect(
ampLayoutCss({
...section,
props: { background: "red;}body{display:none", padding: "</style>" },
}),
).not.toContain("display:none");
});
const document: BlockDocument = {
@@ -78,33 +94,66 @@ const document: BlockDocument = {
describe("email renderer", () => {
test("optional AMP validation failures preserve HTML/text fallbacks", async () => {
for (const ampValidator of [async () => {throw new Error("network unavailable")}, () => new Promise<never>(() => {})]) {
const result=await renderEmail(document,{amp:true,ampValidator,ampValidationTimeoutMs:10});
for (const ampValidator of [
async () => {
throw new Error("network unavailable");
},
() => new Promise<never>(() => {}),
]) {
const result = await renderEmail(document, {
amp: true,
ampValidator,
ampValidationTimeoutMs: 10,
});
expect(result.ok).toBe(true);
if(!result.ok)continue;
if (!result.ok) continue;
expect(result.value.parts.amp).toBeUndefined();
expect(result.value.parts.html.content).toContain("Hello &lt;world&gt;");
expect(result.value.parts.text.content).toContain("Hello <world>");
expect(result.value.warnings.some(item=>item.code==="amp.validatorUnavailable"&&item.severity==="warning")).toBe(true);
expect(
result.value.warnings.some(
(item) => item.code === "amp.validatorUnavailable" && item.severity === "warning",
),
).toBe(true);
}
});
test("builder column rows export without nesting mj-column inside mj-column", async () => {
for (const count of [1,2,3,4]) {
const draft=structuredClone(document);
const content=draft.root.slots.content[0]!.slots.content;
draft.root.slots.content[0]!.slots.content=[{id:"columns",type:"layout.columns",version:1,props:{},styles:{},slots:{columns:Array.from({length:count},(_,index)=>({id:`column-${index}`,type:"layout.column",version:1,props:{width:`${100/count}%`},styles:{},slots:{content:index===0?content:[]}}))}}];
const result=await renderEmail(draft,{mjml:true,amp:true});
for (const count of [1, 2, 3, 4]) {
const draft = structuredClone(document);
const content = draft.root.slots.content[0]!.slots.content;
draft.root.slots.content[0]!.slots.content = [
{
id: "columns",
type: "layout.columns",
version: 1,
props: {},
styles: {},
slots: {
columns: Array.from({ length: count }, (_, index) => ({
id: `column-${index}`,
type: "layout.column",
version: 1,
props: { width: `${100 / count}%` },
styles: {},
slots: { content: index === 0 ? content : [] },
})),
},
},
];
const result = await renderEmail(draft, { mjml: true, amp: true });
expect(result.ok).toBe(true);
if(!result.ok)continue;
const mjml=result.value.exports!.mjml!;
if (!result.ok) continue;
const mjml = result.value.exports!.mjml!;
expect(mjml.match(/<mj-column\b/g)).toHaveLength(count);
expect(await validateMjml(mjml)).toEqual([]);
expect(mjml).toContain("Hello &lt;world&gt;");
const amp=result.value.parts.amp;
const amp = result.value.parts.amp;
expect(amp?.validation.valid).toBe(true);
expect(amp?.content.match(/class="wrn-column"/g)).toHaveLength(count);
expect(amp?.content).toContain('class="wrn-columns"');
expect(amp?.content).toContain('@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}');
expect(amp?.content).toContain(
"@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}",
);
}
});
test("global brand logo survives HTML, AMP, and strict MJML export", async () => {
@@ -113,10 +162,14 @@ describe("email renderer", () => {
draft.root.props.logoAlt = 'Brand & "Company"';
draft.root.props.logoWidth = "180";
draft.root.props.logoHeight = "90";
const result = await renderEmail(draft,{amp:true,mjml:true});
const result = await renderEmail(draft, { amp: true, mjml: true });
expect(result.ok).toBe(true);
if (!result.ok) return;
for (const output of [result.value.parts.html.content,result.value.parts.amp?.content,result.value.exports?.mjml]) {
for (const output of [
result.value.parts.html.content,
result.value.parts.amp?.content,
result.value.exports?.mjml,
]) {
expect(output).toContain('src="https://example.com/logo.png"');
expect(output).toContain('alt="Brand &amp; &quot;Company&quot;"');
}
@@ -124,8 +177,12 @@ describe("email renderer", () => {
expect(await validateMjml(result.value.exports!.mjml!)).toEqual([]);
expect(result.value.parts.html.content).toContain('width="180" height="90"');
expect(result.value.parts.amp?.content).toContain('width="180" height="90"');
expect(result.value.parts.amp?.content).toContain('width="180" height="90" layout="responsive"');
expect(result.value.parts.amp?.content).toContain('.brand-logo{max-width:180px;width:100%;margin:20px auto}');
expect(result.value.parts.amp?.content).toContain(
'width="180" height="90" layout="responsive"',
);
expect(result.value.parts.amp?.content).toContain(
".brand-logo{max-width:180px;width:100%;margin:20px auto}",
);
expect(result.value.exports?.mjml).toContain('width="180px" height="90px"');
for (const value of ["0", "4001", "180px", "1;display:none"]) {
const invalid = structuredClone(draft);
@@ -133,7 +190,7 @@ describe("email renderer", () => {
expect((await renderEmail(invalid)).ok).toBe(false);
}
draft.root.props.logoUrl = "";
const empty = await renderEmail(draft,{amp:true,mjml:true});
const empty = await renderEmail(draft, { amp: true, mjml: true });
expect(empty.ok).toBe(true);
if (empty.ok) {
expect(empty.value.parts.amp?.content).not.toContain("<amp-img");
@@ -143,13 +200,21 @@ describe("email renderer", () => {
test("text line breaks survive all formats without interpreting entered markup", async () => {
const draft = structuredClone(document);
const text = 'First line\r\nSecond line\n\n<script>alert("x")</script>\rLast line';
draft.root.slots.content[0]!.slots.content = [{id:"text",type:"content.text",version:1,props:{text},styles:{},slots:{}}];
const rendered = await renderEmail(draft,{amp:true,mjml:true});
draft.root.slots.content[0]!.slots.content = [
{ id: "text", type: "content.text", version: 1, props: { text }, styles: {}, slots: {} },
];
const rendered = await renderEmail(draft, { amp: true, mjml: true });
expect(rendered.ok).toBe(true);
if (!rendered.ok) return;
for (const output of [rendered.value.parts.html.content,rendered.value.parts.amp?.content,rendered.value.exports?.mjml]) {
expect(output).toContain('First line<br />Second line<br /><br />&lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt;<br />Last line');
expect(output).not.toContain('<script>alert');
for (const output of [
rendered.value.parts.html.content,
rendered.value.parts.amp?.content,
rendered.value.exports?.mjml,
]) {
expect(output).toContain(
"First line<br />Second line<br /><br />&lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt;<br />Last line",
);
expect(output).not.toContain("<script>alert");
}
expect(rendered.value.parts.text.content).toContain(text);
expect(rendered.value.parts.amp?.validation.valid).toBe(true);
@@ -157,21 +222,44 @@ describe("email renderer", () => {
});
test("AMP inherits the saved brand font, colors and body width", async () => {
const draft = structuredClone(document);
Object.assign(draft.root.props, {width:"720",fontFamily:"Georgia, serif",textColor:"#112233",linkColor:"#445566",background:"#eeeeee",contentBackground:"#fafafa"});
const rendered = await renderEmail(draft, {amp:true});
Object.assign(draft.root.props, {
width: "720",
fontFamily: "Georgia, serif",
textColor: "#112233",
linkColor: "#445566",
background: "#eeeeee",
contentBackground: "#fafafa",
});
const rendered = await renderEmail(draft, { amp: true });
expect(rendered.ok).toBe(true);
if (!rendered.ok) return;
const amp = rendered.value.parts.amp;
expect(amp?.validation.valid).toBe(true);
for (const style of ["font-family:Georgia, serif", "color:#112233", "a{color:#445566}", "background:#eeeeee", "background:#fafafa", "max-width:720px"]) expect(amp?.content).toContain(style);
for (const style of [
"font-family:Georgia, serif",
"color:#112233",
"a{color:#445566}",
"background:#eeeeee",
"background:#fafafa",
"max-width:720px",
])
expect(amp?.content).toContain(style);
});
test("brand fields reject arbitrary CSS and invalid widths before rendering", async () => {
for (const [key,value] of [["fontFamily","Arial;position:fixed"],["fontFamily","</style><script>alert(1)</script>"],["textColor","red;background:url(https://example.com)"],["background","#fff;display:none"],["width","600;position:absolute"],["width","9999"]]) {
for (const [key, value] of [
["fontFamily", "Arial;position:fixed"],
["fontFamily", "</style><script>alert(1)</script>"],
["textColor", "red;background:url(https://example.com)"],
["background", "#fff;display:none"],
["width", "600;position:absolute"],
["width", "9999"],
]) {
const draft = structuredClone(document);
draft.root.props[key!] = value!;
const rendered = await renderEmail(draft, {amp:true});
const rendered = await renderEmail(draft, { amp: true });
expect(rendered.ok).toBe(false);
if (!rendered.ok) expect(rendered.errors.some(error => error.code === "email.brand")).toBe(true);
if (!rendered.ok)
expect(rendered.errors.some((error) => error.code === "email.brand")).toBe(true);
}
});
test("responsive stacking begins below the desktop email width", async () => {
@@ -184,9 +272,22 @@ describe("email renderer", () => {
});
test("countdown URLs are derived for HTML AMP and MJML without mutating the document", async () => {
const draft = structuredClone(document);
draft.root.slots.content[0]!.slots.content = [{id:"timer",type:"content.countdown",version:1,props:{label:"Offer ends",deadline:"2026-10-01T00:00:00Z",fallback:"Offer ended"},styles:{},slots:{}}];
draft.root.slots.content[0]!.slots.content = [
{
id: "timer",
type: "content.countdown",
version: 1,
props: { label: "Offer ends", deadline: "2026-10-01T00:00:00Z", fallback: "Offer ended" },
styles: {},
slots: {},
},
];
const before = JSON.stringify(draft);
const result = await renderEmail(draft, {amp:true,mjml:true,countdownImageUrl:"https://email.example.com/api/countdown"});
const result = await renderEmail(draft, {
amp: true,
mjml: true,
countdownImageUrl: "https://email.example.com/api/countdown",
});
expect(result.ok).toBe(true);
if (!result.ok) return;
const image = "https://email.example.com/api/countdown?deadline=1790812800000";
@@ -194,7 +295,7 @@ describe("email renderer", () => {
expect(result.value.parts.amp?.content).toContain(image);
expect(result.value.exports?.mjml).toContain(image);
expect(JSON.stringify(draft)).toBe(before);
expect((await renderEmail(draft, {countdownImageUrl:"javascript:alert(1)"})).ok).toBe(false);
expect((await renderEmail(draft, { countdownImageUrl: "javascript:alert(1)" })).ok).toBe(false);
});
test("content inherits the selected brand font instead of overriding it", async () => {
const branded = structuredClone(document);
@@ -214,9 +315,13 @@ describe("email renderer", () => {
const tree = parse(rendered.value.parts.html.content);
const ancestry = new Map<string, string[]>();
const walk = (node: DefaultTreeAdapterMap["node"], parents: string[]) => {
const id = "attrs" in node ? node.attrs.find(attr => attr.name === "data-block-id")?.value : undefined;
const id =
"attrs" in node
? node.attrs.find((attr) => attr.name === "data-block-id")?.value
: undefined;
if (id) ancestry.set(id, parents);
if ("childNodes" in node) for (const child of node.childNodes) walk(child, id ? [...parents, id] : parents);
if ("childNodes" in node)
for (const child of node.childNodes) walk(child, id ? [...parents, id] : parents);
};
walk(tree, []);
expect(ancestry.get("heading")).toEqual(["root", "section"]);