@saltcorn/markup 1.6.1-beta.0 → 1.7.0-alpha.0

package/dist/layout.test.js

@@ -1,51 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const globals_1 = require("@jest/globals");
-const layout_1 = __importDefault(require("./layout"));
-// import { makeSegments, applyTextStyle, textStyleToArray } from "./internal";
+import { describe, it } from "node:test";
+import { expect } from "@saltcorn/db-common/test_expect";
+import render from "./layout.js";
+// import { makeSegments, applyTextStyle, textStyleToArray } from "./internal.js";
 // import renderMJML = require("./mjml-layout");
-const mjml_layout_1 = require("./mjml-layout");
+import { renderMJML } from "./mjml-layout.js";
 // import tags = require("./tags");
-const tags = __importStar(require("./tags"));
+import * as tags from "./tags.js";
 const { p } = tags;
-(0, globals_1.describe)("layout", () => {
-    (0, globals_1.it)("renders a simple layout", () => {
+describe("layout", () => {
+    it("renders a simple layout", () => {
         const blockDispatch = {
             wrapTop(segment, ix, s) {
                 return p(s);
@@ -55,9 +18,9 @@ const { p } = tags;
             },
         };
         const markup = { above: [{ type: "reverseIt", theString: "foobar" }] };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe("<p>raboof</p>");
+        expect(render({ blockDispatch, layout: markup })).toBe("<p>raboof</p>");
     });
-    (0, globals_1.it)("renders a nested layout", () => {
+    it("renders a nested layout", () => {
         const blockDispatch = {};
         const markup = {
             above: [
@@ -75,27 +38,27 @@ const { p } = tags;
                 },
             ],
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<div class="row"><div class="col-6">hello</div><div class="col-6">world</div></div><div class="row"><div class="col-6">bar</div><div class="col-6">foo</div></div>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<div class="row"><div class="col-6">hello</div><div class="col-6">world</div></div><div class="row"><div class="col-6">bar</div><div class="col-6">foo</div></div>');
     });
-    (0, globals_1.it)("renders a container custom element", () => {
+    it("renders a container custom element", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             htmlElement: "section",
             contents: { type: "blank", contents: "bar" },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<section style="    ">bar</section>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<section style="    ">bar</section>');
     });
-    (0, globals_1.it)("renders a container custom class", () => {
+    it("renders a container custom class", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             contents: { type: "blank", contents: "bar" },
             customClass: "py-5",
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<div class="py-5" style="    ">bar</div>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<div class="py-5" style="    ">bar</div>');
     });
-    (0, globals_1.it)("renders a container custom element with class", () => {
+    it("renders a container custom element with class", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -103,9 +66,9 @@ const { p } = tags;
             contents: { type: "blank", contents: "bar" },
             customClass: "py-5",
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<section class="py-5" style="    ">bar</section>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<section class="py-5" style="    ">bar</section>');
     });
-    (0, globals_1.it)("renders a nested container custom element", () => {
+    it("renders a nested container custom element", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -117,9 +80,9 @@ const { p } = tags;
             },
             customClass: "py-5",
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<section class="py-5" style="    "><section style="    ">bar</section></section>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<section class="py-5" style="    "><section style="    ">bar</section></section>');
     });
-    (0, globals_1.it)("renders a container with padding", () => {
+    it("renders a container with padding", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -128,28 +91,28 @@ const { p } = tags;
             },
             contents: { type: "blank", contents: "bar" },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<div style="padding:2rem;    ">bar</div>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<div style="padding:2rem;    ">bar</div>');
     });
-    (0, globals_1.it)("renders styled text in container with single textStyle", () => {
+    it("renders styled text in container with single textStyle", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             contents: { type: "blank", contents: "bar", textStyle: "h1" },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<div style="    "><h1>bar</h1></div>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<div style="    "><h1>bar</h1></div>');
         const markup1 = {
             type: "container",
             contents: { type: "blank", contents: "bar", textStyle: "fw-bold" },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup1 })).toBe('<div style="    "><span class="fw-bold">bar</span></div>');
+        expect(render({ blockDispatch, layout: markup1 })).toBe('<div style="    "><span class="fw-bold">bar</span></div>');
     });
-    (0, globals_1.it)("renders styled text in container with array textStyle", () => {
+    it("renders styled text in container with array textStyle", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             contents: { type: "blank", contents: "bar", textStyle: ["h1"] },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe('<div style="    "><h1>bar</h1></div>');
+        expect(render({ blockDispatch, layout: markup })).toBe('<div style="    "><h1>bar</h1></div>');
         const markup1 = {
             type: "container",
             contents: {
@@ -158,7 +121,7 @@ const { p } = tags;
                 textStyle: ["fw-bold", "small"],
             },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup1 })).toBe('<div style="    "><span class="fw-bold small">bar</span></div>');
+        expect(render({ blockDispatch, layout: markup1 })).toBe('<div style="    "><span class="fw-bold small">bar</span></div>');
         const markup2 = {
             type: "container",
             contents: {
@@ -167,26 +130,26 @@ const { p } = tags;
                 textStyle: ["h1", "fw-bold", "small"],
             },
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup2 })).toBe('<div style="    "><h1 class="fw-bold small">bar</h1></div>');
+        expect(render({ blockDispatch, layout: markup2 })).toBe('<div style="    "><h1 class="fw-bold small">bar</h1></div>');
     });
-    (0, globals_1.it)("renders top-level text styled with array textStyle", () => {
+    it("renders top-level text styled with array textStyle", () => {
         const blockDispatch = {};
         const markup = {
             type: "blank",
             contents: "bar",
             textStyle: ["h1"],
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup })).toBe("<h1>bar</h1>");
+        expect(render({ blockDispatch, layout: markup })).toBe("<h1>bar</h1>");
         const markup1 = {
             type: "blank",
             contents: "bar",
             textStyle: ["fw-bold", "small"],
         };
-        (0, globals_1.expect)((0, layout_1.default)({ blockDispatch, layout: markup1 })).toBe('<span class="fw-bold small">bar</span>');
+        expect(render({ blockDispatch, layout: markup1 })).toBe('<span class="fw-bold small">bar</span>');
     });
-    (0, globals_1.it)("renders text with class", () => {
+    it("renders text with class", () => {
         const blockDispatch = {};
-        (0, globals_1.expect)((0, layout_1.default)({
+        expect(render({
             blockDispatch,
             layout: {
                 type: "blank",
@@ -194,7 +157,7 @@ const { p } = tags;
                 customClass: ["myclass"],
             },
         })).toBe('<span class="myclass">bar</span>');
-        (0, globals_1.expect)((0, layout_1.default)({
+        expect(render({
             blockDispatch,
             layout: {
                 type: "blank",
@@ -203,7 +166,7 @@ const { p } = tags;
                 customClass: ["myclass"],
             },
         })).toBe('<h1 class="myclass">bar</h1>');
-        (0, globals_1.expect)((0, layout_1.default)({
+        expect(render({
             blockDispatch,
             layout: {
                 type: "blank",
@@ -212,7 +175,7 @@ const { p } = tags;
                 customClass: ["myclass"],
             },
         })).toBe('<span class="muted myclass">bar</span>');
-        (0, globals_1.expect)((0, layout_1.default)({
+        expect(render({
             blockDispatch,
             layout: {
                 type: "container",
@@ -224,7 +187,7 @@ const { p } = tags;
             },
         })).toBe('<div style="    "><span class="myclass">bar</span></div>');
     });
-    (0, globals_1.it)("renders a dropdown menu", () => {
+    it("renders a dropdown menu", () => {
         const blockDispatch = {};
         const markup = {
             type: "dropdown_menu",
@@ -235,10 +198,10 @@ const { p } = tags;
                 { type: "blank", contents: "Option 2" },
             ],
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toMatch(/^<div class="dropdown d-inline"><button class="btn btn-primary  d-inline-block dropdown-toggle" data-boundary="viewport" type="button" id="actiondd[a-f0-9]+" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions<\/button><div class="dropdown-menu" aria-labelledby="actiondd[a-f0-9]+"><div class="d-flex flex-column px-2">Option 1Option 2<\/div><\/div><\/div>$/);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toMatch(/^<div class="dropdown d-inline"><button class="btn btn-primary  d-inline-block dropdown-toggle" data-boundary="viewport" type="button" id="actiondd[a-f0-9]+" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions<\/button><div class="dropdown-menu" aria-labelledby="actiondd[a-f0-9]+"><div class="d-flex flex-column px-2">Option 1Option 2<\/div><\/div><\/div>$/);
     });
-    (0, globals_1.it)("renders a card with a footer", () => {
+    it("renders a card with a footer", () => {
         const blockDispatch = {};
         const markup = {
             type: "card",
@@ -246,15 +209,15 @@ const { p } = tags;
             contents: { type: "blank", contents: "Card Body" },
             footer: { type: "blank", contents: "Card footer" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('<div class="card mt-4 shadow">');
-        (0, globals_1.expect)(result).toContain('<span class="card-header">');
-        (0, globals_1.expect)(result).toContain('<h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5>');
-        (0, globals_1.expect)(result).toContain('<div class="card-body">Card Body</div>');
-        (0, globals_1.expect)(result).toContain('<div class="card-footer">Card footer</div>');
-        (0, globals_1.expect)(result).toMatch(/<\/div>\s*<\/div>$/);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('<div class="card mt-4 shadow">');
+        expect(result).toContain('<span class="card-header">');
+        expect(result).toContain('<h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5>');
+        expect(result).toContain('<div class="card-body">Card Body</div>');
+        expect(result).toContain('<div class="card-footer">Card footer</div>');
+        expect(result).toMatch(/<\/div>\s*<\/div>$/);
     });
-    (0, globals_1.it)("renders a container with background image", () => {
+    it("renders a container with background image", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -262,13 +225,13 @@ const { p } = tags;
             bgFileId: "123",
             contents: { type: "blank", contents: "Content with background" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('<img class="containerbgimage " style="object-fit:contain" alt="" src="/files/serve/123">');
-        (0, globals_1.expect)(result).toContain("Content with background");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('<img class="containerbgimage " style="object-fit:contain" alt="" src="/files/serve/123">');
+        expect(result).toContain("Content with background");
     });
 });
-(0, globals_1.describe)("render", () => {
-    (0, globals_1.it)("renders a layout with multiple nested containers", () => {
+describe("render", () => {
+    it("renders a layout with multiple nested containers", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -280,30 +243,30 @@ const { p } = tags;
                 },
             },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<div style="    "><div style="    "><div style="    ">Nested Content</div></div></div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<div style="    "><div style="    "><div style="    ">Nested Content</div></div></div>');
     });
-    (0, globals_1.it)("renders a layout with a custom class", () => {
+    it("renders a layout with a custom class", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             customClass: ["custom-class"],
             contents: { type: "blank", contents: "Content with class" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<div class="custom-class" style="    ">Content with class</div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<div class="custom-class" style="    ">Content with class</div>');
     });
-    (0, globals_1.it)("renders a layout with inline styles", () => {
+    it("renders a layout with inline styles", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             style: { backgroundColor: "blue", color: "white" },
             contents: { type: "blank", contents: "Styled Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<div style="backgroundColor:blue;color:white;    ">Styled Content</div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<div style="backgroundColor:blue;color:white;    ">Styled Content</div>');
     });
-    (0, globals_1.it)("renders a layout with a combination of textStyle and customClass", () => {
+    it("renders a layout with a combination of textStyle and customClass", () => {
         const blockDispatch = {};
         const markup = {
             type: "blank",
@@ -311,19 +274,19 @@ const { p } = tags;
             textStyle: ["h1", "fw-bold"],
             customClass: ["custom-class"],
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<h1 class="fw-bold custom-class">Styled and Classed Content</h1>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<h1 class="fw-bold custom-class">Styled and Classed Content</h1>');
     });
-    (0, globals_1.it)("renders a layout with an empty container", () => {
+    it("renders a layout with an empty container", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             contents: null,
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<div style="    "></div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<div style="    "></div>');
     });
-    (0, globals_1.it)("renders a layout with a dropdown menu containing multiple actions", () => {
+    it("renders a layout with a dropdown menu containing multiple actions", () => {
         const blockDispatch = {};
         const markup = {
             type: "dropdown_menu",
@@ -335,14 +298,14 @@ const { p } = tags;
                 { type: "blank", contents: "Action 3" },
             ],
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('<div class="dropdown d-inline">');
-        (0, globals_1.expect)(result).toContain('class="btn btn-secondary  d-inline-block dropdown-toggle"');
-        (0, globals_1.expect)(result).toContain(">Menu</button>");
-        (0, globals_1.expect)(result).toContain('<div class="dropdown-menu"');
-        (0, globals_1.expect)(result).toContain("Action 1Action 2Action 3</div>");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('<div class="dropdown d-inline">');
+        expect(result).toContain('class="btn btn-secondary  d-inline-block dropdown-toggle"');
+        expect(result).toContain(">Menu</button>");
+        expect(result).toContain('<div class="dropdown-menu"');
+        expect(result).toContain("Action 1Action 2Action 3</div>");
     });
-    (0, globals_1.it)("renders a card layout with title, body, and footer", () => {
+    it("renders a card layout with title, body, and footer", () => {
         const blockDispatch = {};
         const markup = {
             type: "card",
@@ -350,14 +313,14 @@ const { p } = tags;
             contents: { type: "blank", contents: "Card Body" },
             footer: { type: "blank", contents: "Card Footer" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('<div class="card mt-4 shadow">');
-        (0, globals_1.expect)(result).toContain('<span class="card-header">');
-        (0, globals_1.expect)(result).toContain('<h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5>');
-        (0, globals_1.expect)(result).toContain('<div class="card-body">Card Body</div>');
-        (0, globals_1.expect)(result).toContain('<div class="card-footer">Card Footer</div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('<div class="card mt-4 shadow">');
+        expect(result).toContain('<span class="card-header">');
+        expect(result).toContain('<h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5>');
+        expect(result).toContain('<div class="card-body">Card Body</div>');
+        expect(result).toContain('<div class="card-footer">Card Footer</div>');
     });
-    (0, globals_1.it)("renders a card layout with class", () => {
+    it("renders a card layout with class", () => {
         const blockDispatch = {};
         const markup = {
             type: "card",
@@ -365,10 +328,10 @@ const { p } = tags;
             contents: { type: "blank", contents: "Card Body" },
             class: "foo",
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<div class="card mt-4 shadow foo"><span class="card-header"><h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5></span><div class="card-body">Card Body</div></div>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<div class="card mt-4 shadow foo"><span class="card-header"><h5 class="m-0 fw-bold text-primary d-inline">Card Title</h5></span><div class="card-body">Card Body</div></div>');
     });
-    (0, globals_1.it)("renders a layout with a container and background image", () => {
+    it("renders a layout with a container and background image", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -376,11 +339,11 @@ const { p } = tags;
             bgFileId: "456",
             contents: { type: "blank", contents: "Background Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('<img class="containerbgimage " style="object-fit:contain" alt="" src="/files/serve/456">');
-        (0, globals_1.expect)(result).toContain("Background Content");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('<img class="containerbgimage " style="object-fit:contain" alt="" src="/files/serve/456">');
+        expect(result).toContain("Background Content");
     });
-    (0, globals_1.it)("renders a layout with breadcrumbs", () => {
+    it("renders a layout with breadcrumbs", () => {
         const blockDispatch = {};
         const markup = {
             type: "breadcrumbs",
@@ -391,10 +354,10 @@ const { p } = tags;
             right: "Right Content",
             after: "After Content",
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe(`<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/">Home</a></li><li class="breadcrumb-item fw-bold" aria-current="page"><a href="/page">Page</a></li><li class="ms-3">After Content</li><li class="ms-auto">Right Content</li></ol></nav>`);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe(`<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/">Home</a></li><li class="breadcrumb-item fw-bold" aria-current="page"><a href="/page">Page</a></li><li class="ms-3">After Content</li><li class="ms-auto">Right Content</li></ol></nav>`);
     });
-    (0, globals_1.it)("renders a layout with a table", () => {
+    it("renders a layout with a table", () => {
         const blockDispatch = {};
         const markup = {
             type: "table",
@@ -411,10 +374,10 @@ const { p } = tags;
                 ],
             ],
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe("<table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table>");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe("<table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table>");
     });
-    (0, globals_1.it)("renders a layout with an image", () => {
+    it("renders a layout with an image", () => {
         const blockDispatch = {};
         const markup = {
             type: "image",
@@ -423,10 +386,10 @@ const { p } = tags;
             alt: "Test image",
             style: { width: "100px", height: "100px" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe(`<img alt="Test image" style="width:100px;height:100px" src="/files/serve/123">`);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe(`<img alt="Test image" style="width:100px;height:100px" src="/files/serve/123">`);
     });
-    (0, globals_1.it)("renders a layout with a link", () => {
+    it("renders a layout with a link", () => {
         const blockDispatch = {};
         const markup = {
             type: "link",
@@ -436,19 +399,19 @@ const { p } = tags;
             link_size: "btn-lg",
             link_icon: "fa fa-link",
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe('<a href="/test" class="btn btn-primary btn-lg d-inline-block"><i class="fa fa-link"></i>&nbsp;Click Me</a>');
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe('<a href="/test" class="btn btn-primary btn-lg d-inline-block"><i class="fa fa-link"></i>&nbsp;Click Me</a>');
     });
-    (0, globals_1.it)("renders a layout with a line break", () => {
+    it("renders a layout with a line break", () => {
         const blockDispatch = {};
         const markup = {
             type: "line_break",
             hr: true,
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe("<hr>");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe("<hr>");
     });
-    (0, globals_1.it)("render a layout with search bar", () => {
+    it("render a layout with search bar", () => {
         const blockDispatch = {};
         const markup = {
             type: "search_bar",
@@ -456,10 +419,10 @@ const { p } = tags;
             autofocus: true,
             contents: { type: "blank", contents: "Search Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toMatch(/^<form action="\/search" method="get"><div class="input-group search-bar" id="search-input-group-[a-f0-9]+"><button class="btn btn-outline-secondary search-bar" type="submit" id="button-search-submit"><i class="fas fa-search"><\/i><\/button><input type="search" class="form-control search-bar br-none" autofocus placeholder="Search for..." id="inputq_[a-f0-9]+" name="q" aria-label="Search" aria-describedby="button-search-submit"><button class="btn btn-outline-secondary dropdown-toggle search-bar" id="dd[a-f0-9]+" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="align_dropdown\('[a-f0-9]+'\)"><\/button><div class="dropdown-menu search-bar p-2" id="dm[a-f0-9]+" aria-labelledby="dd[a-f0-9]+">Search Content<\/div><\/div><\/form>$/);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toMatch(/^<form action="\/search" method="get"><div class="input-group search-bar" id="search-input-group-[a-f0-9]+"><button class="btn btn-outline-secondary search-bar" type="submit" id="button-search-submit"><i class="fas fa-search"><\/i><\/button><input type="search" class="form-control search-bar br-none" autofocus placeholder="Search for..." id="inputq_[a-f0-9]+" name="q" aria-label="Search" aria-describedby="button-search-submit"><button class="btn btn-outline-secondary dropdown-toggle search-bar" id="dd[a-f0-9]+" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="align_dropdown\('[a-f0-9]+'\)"><\/button><div class="dropdown-menu search-bar p-2" id="dm[a-f0-9]+" aria-labelledby="dd[a-f0-9]+">Search Content<\/div><\/div><\/form>$/);
     });
-    (0, globals_1.it)("renders a layout with a container and gradient background", () => {
+    it("renders a layout with a container and gradient background", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
@@ -469,30 +432,30 @@ const { p } = tags;
             gradDirection: 45,
             contents: { type: "blank", contents: "Gradient Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toBe(`<div style="   background-image: linear-gradient(45deg, #ff0000, #0000ff); ">Gradient Content</div>`);
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toBe(`<div style="   background-image: linear-gradient(45deg, #ff0000, #0000ff); ">Gradient Content</div>`);
     });
-    (0, globals_1.it)("renders a layout with a container and hover color", () => {
+    it("renders a layout with a container and hover color", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             hoverColor: "hover-primary",
             contents: { type: "blank", contents: "Hover Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain('class="hover-hover-primary"');
-        (0, globals_1.expect)(result).toContain("Hover Content");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain('class="hover-hover-primary"');
+        expect(result).toContain("Hover Content");
     });
-    (0, globals_1.it)("renders a layout with a container and transform styles", () => {
+    it("renders a layout with a container and transform styles", () => {
         const blockDispatch = {};
         const markup = {
             type: "container",
             transform: { rotate: "45deg", scaleX: "1.5" },
             contents: { type: "blank", contents: "Transformed Content" },
         };
-        const result = (0, layout_1.default)({ blockDispatch, layout: markup });
-        (0, globals_1.expect)(result).toContain("transform: rotate(45deg) scaleX(1.5)");
-        (0, globals_1.expect)(result).toContain("Transformed Content");
+        const result = render({ blockDispatch, layout: markup });
+        expect(result).toContain("transform: rotate(45deg) scaleX(1.5)");
+        expect(result).toContain("Transformed Content");
     });
 });
 // describe("makeSegments", () => {
@@ -547,24 +510,24 @@ const { p } = tags;
 //     );
 //   });
 // });
-(0, globals_1.describe)("MJML layout", () => {
+describe("MJML layout", () => {
     const blockDispatch = {};
-    (0, globals_1.it)("renders empty layout", () => {
-        const result = (0, mjml_layout_1.renderMJML)({ blockDispatch, layout: {}, req: {} });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`);
-        (0, globals_1.expect)(result.backgroundColor).toBe(undefined);
+    it("renders empty layout", () => {
+        const result = renderMJML({ blockDispatch, layout: {}, req: {} });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`);
+        expect(result.backgroundColor).toBe(undefined);
     });
-    (0, globals_1.it)("renders text layout", () => {
+    it("renders text layout", () => {
         const layout = { type: "blank", contents: "Hello world" };
-        const result = (0, mjml_layout_1.renderMJML)({ blockDispatch, layout, req: {} });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Hello world</div></mj-raw></mj-section>`);
-        (0, globals_1.expect)(result.backgroundColor).toBe(undefined);
+        const result = renderMJML({ blockDispatch, layout, req: {} });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Hello world</div></mj-raw></mj-section>`);
+        expect(result.backgroundColor).toBe(undefined);
     });
-    (0, globals_1.it)("renders text header", () => {
+    it("renders text header", () => {
         const layout = { type: "blank", contents: "Hello world", textStyle: "h1" };
-        const result = (0, mjml_layout_1.renderMJML)({ blockDispatch, layout, req: {} });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><div style="font-size:2em;margin-top:0.67em;margin-bottom:0.67em;margin-left:0;margin-right:0;font-weight:bold">Hello world</div></div></mj-raw></mj-section>`);
-        (0, globals_1.expect)(result.backgroundColor).toBe(undefined);
+        const result = renderMJML({ blockDispatch, layout, req: {} });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><div style="font-size:2em;margin-top:0.67em;margin-bottom:0.67em;margin-left:0;margin-right:0;font-weight:bold">Hello world</div></div></mj-raw></mj-section>`);
+        expect(result.backgroundColor).toBe(undefined);
     });
 });
 // describe("textStyleToArray", () => {