feat: release design system engine, studio and component contracts
This commit is contained in:
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -7,18 +7,50 @@ 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: {} }],
|
||||
} },
|
||||
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-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([]);
|
||||
@@ -46,10 +78,15 @@ test("MJML header import rejects unsupported globals and unsafe typography", ()
|
||||
'<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-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);
|
||||
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);
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user