@cosmicdrift/kumiko-headless 0.328.0 → 0.329.0

package/src/apex/__tests__/render.test.ts

@@ -1,401 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { APEX_NAV_MENU_CSS, APEX_NAV_TOGGLE_RESPONSIVE_CSS, APEX_STRUCTURAL_CSS } from "../css";
-import { type ApexPage, renderApexPage } from "../index";
-
-const brand = { tokensCss: ":root{--primary:#123;--primary-fg:#fff;--bg:#fff;--fg:#000;}" };
-
-function page(overrides: Partial<ApexPage> = {}): ApexPage {
-  return {
-    brand,
-    head: { lang: "de", title: "T", description: "D" },
-    header: { brand: { href: "/", label: "Acme" } },
-    sections: [],
-    footer: { brand: { label: "Acme" } },
-    ...overrides,
-  };
-}
-
-describe("renderApexPage", () => {
-  test("theme dark sets body class, light (default) does not", () => {
-    expect(renderApexPage(page({ theme: "dark" }))).toContain('<body class="apex-dark">');
-    // light is default — both CSS sets ship, only the body class toggles
-    expect(renderApexPage(page())).toContain("<body>");
-    expect(renderApexPage(page())).not.toContain('<body class="apex-dark">');
-  });
-
-  test("escapes user-provided text in title and content", () => {
-    const html = renderApexPage(
-      page({
-        head: { lang: "de", title: "<script>x</script>", description: "a & b" },
-        sections: [{ kind: "info-grid", items: [{ title: "<b>t</b>", desc: "d" }] }],
-      }),
-    );
-    expect(html).not.toContain("<script>x</script>");
-    expect(html).toContain("&lt;script&gt;");
-    expect(html).toContain("a &amp; b");
-    expect(html).toContain("&lt;b&gt;t&lt;/b&gt;");
-  });
-
-  test("metaHtml and feature icon are passed through unescaped (app-authored)", () => {
-    const html = renderApexPage(
-      page({
-        sections: [
-          { kind: "hero", title: "h", tagline: "t", metaHtml: "<strong>ok</strong>" },
-          {
-            kind: "feature-grid",
-            heading: "F",
-            items: [{ icon: "<rect/>", title: "x", desc: "d" }],
-          },
-        ],
-      }),
-    );
-    expect(html).toContain("<strong>ok</strong>");
-    expect(html).toContain("<svg"); // icon wrapped in standard svg
-    expect(html).toContain("<rect/>");
-  });
-
-  test("nav menu entry renders a dropdown; plain links stay anchors", () => {
-    const html = renderApexPage(
-      page({
-        header: {
-          brand: { href: "/", label: "Acme" },
-          navLinks: [
-            {
-              kind: "menu",
-              label: "Product",
-              items: [
-                { icon: "<rect/>", title: "Planner", desc: "Plan it", href: "/p" },
-                { title: "<b>Reports</b>", href: "/r" },
-              ],
-              footer: { label: "See all", href: "/all" },
-            },
-            { label: "Pricing", href: "#pricing" },
-          ],
-        },
-      }),
-    );
-    // Menu chrome + trigger label.
-    expect(html).toContain('class="nav-menu"');
-    expect(html).toContain('class="nav-menu__trigger"');
-    expect(html).toContain("Product");
-    // Items: title, description, wrapped icon; missing desc/icon simply omitted.
-    expect(html).toContain('class="nav-menu__item" href="/p"');
-    expect(html).toContain("Planner");
-    expect(html).toContain("Plan it");
-    expect(html).toContain("<rect/>");
-    // Footer link under the divider.
-    expect(html).toContain('class="nav-menu__more" href="/all"');
-    expect(html).toContain("See all");
-    // Item titles are escaped (app-data, not trusted HTML).
-    expect(html).toContain("&lt;b&gt;Reports&lt;/b&gt;");
-    expect(html).not.toContain("<b>Reports</b>");
-    // The sibling plain link still renders as a normal anchor.
-    expect(html).toContain('<a href="#pricing">Pricing</a>');
-  });
-
-  test("nav-links wrap in a mobile hamburger toggle; no navLinks omits it", () => {
-    const withNav = renderApexPage(
-      page({
-        header: {
-          brand: { href: "/", label: "Acme" },
-          navLinks: [{ label: "Pricing", href: "#pricing" }],
-        },
-      }),
-    );
-    expect(withNav).toContain('<details class="nav-toggle">');
-    expect(withNav).toContain('<summary class="nav-toggle__trigger" aria-label="Menu">');
-    expect(withNav).toContain('<nav class="nav-links">');
-
-    const customLabel = renderApexPage(
-      page({
-        header: {
-          brand: { href: "/", label: "Acme" },
-          navLinks: [{ label: "Pricing", href: "#pricing" }],
-          menuLabel: "Menü",
-        },
-      }),
-    );
-    expect(customLabel).toContain('aria-label="Menü"');
-
-    const withoutNav = renderApexPage(page());
-    expect(withoutNav).not.toContain('<details class="nav-toggle">');
-  });
-
-  test("mobile-open .nav-toggle rule wins the cascade over the desktop-hidden default", () => {
-    // APEX_NAV_MENU_CSS sets `.nav-toggle { display: none; }` unconditionally;
-    // APEX_NAV_TOGGLE_RESPONSIVE_CSS re-declares it `.nav .nav-toggle { display:
-    // inline-flex; }` inside the 640px query. A markup-only assertion can't catch
-    // a reordering that silently restores fw#2047 (nav-links hidden on mobile
-    // with no way to reopen them).
-    const hiddenDefault = APEX_STRUCTURAL_CSS.indexOf(".nav-toggle { display: none; }");
-    const mobileOpen = APEX_STRUCTURAL_CSS.indexOf(".nav .nav-toggle { display: inline-flex; }");
-    expect(hiddenDefault).toBeGreaterThan(-1);
-    expect(mobileOpen).toBeGreaterThan(-1);
-    expect(mobileOpen).toBeGreaterThan(hiddenDefault);
-  });
-
-  test("APEX_NAV_TOGGLE_RESPONSIVE_CSS's mobile-open rules outrank APEX_NAV_MENU_CSS's hidden default regardless of concatenation order (fw#2125)", () => {
-    // money-horse/show-pony/the docs sample call renderApexHeader() standalone and
-    // concatenate APEX_NAV_MENU_CSS with their own page CSS in whatever order they
-    // choose — they don't control ordering relative to APEX_STRUCTURAL_CSS's
-    // internal layout. The "show" rules are therefore specificity-hardened
-    // (`.nav .nav-toggle`, 2 classes) rather than relying on source order to beat
-    // APEX_NAV_MENU_CSS's bare `.nav-toggle` default (1 class) — verify both carry
-    // that extra `.nav ` prefix so the fix holds even when a consumer emits
-    // APEX_NAV_TOGGLE_RESPONSIVE_CSS BEFORE APEX_NAV_MENU_CSS.
-    expect(APEX_NAV_MENU_CSS).toContain(".nav-toggle { display: none; }");
-    expect(APEX_NAV_MENU_CSS).toContain(".nav-toggle__trigger { display: none;");
-    expect(APEX_NAV_MENU_CSS).not.toContain(".nav-toggle { display: inline-flex");
-    expect(APEX_NAV_MENU_CSS).not.toContain(".nav-toggle__trigger { display: inline-flex");
-
-    expect(APEX_NAV_TOGGLE_RESPONSIVE_CSS).toContain(".nav .nav-toggle { display: inline-flex; }");
-    expect(APEX_NAV_TOGGLE_RESPONSIVE_CSS).toContain(
-      ".nav .nav-toggle__trigger { display: inline-flex; }",
-    );
-  });
-
-  test("APEX_NAV_TOGGLE_RESPONSIVE_CSS declares .nav as the positioned ancestor for the open dropdown", () => {
-    // `.nav-toggle[open] > .nav-links` is `position: absolute; top: calc(100% +
-    // 0.5rem); left: 0; right: 0` — it needs `.nav { position: relative; }` as
-    // its containing block. renderApexPage gets that from CHROME_LIGHT, but a
-    // standalone renderApexHeader() consumer's own header CSS typically doesn't
-    // declare it, and without it the dropdown opens off-screen against the
-    // viewport instead of under the header (fw#2125 follow-up: verified none of
-    // money-horse/show-pony/the docs sample's HEADER_CSS set it).
-    expect(APEX_NAV_TOGGLE_RESPONSIVE_CSS).toContain(".nav { position: relative; }");
-  });
-
-  test("pricing: featured card gets badge + featured class, cap line precedes benefits", () => {
-    const html = renderApexPage(
-      page({
-        sections: [
-          {
-            kind: "pricing-grid",
-            heading: "P",
-            tiers: [
-              {
-                name: "Pro",
-                amount: "9 €",
-                priceSuffix: "/Monat",
-                featured: true,
-                badge: "Beliebt",
-                capLine: "50 X",
-                benefits: ["b1"],
-                cta: { label: "Go", href: "/s" },
-              },
-            ],
-          },
-        ],
-      }),
-    );
-    expect(html).toContain("price-card--featured");
-    expect(html).toContain('class="price-badge">Beliebt');
-    expect(html).toContain("/Monat");
-    // cap line must render before the first benefit
-    expect(html.indexOf("price-cap")).toBeLessThan(html.indexOf("b1"));
-    // featured tier without explicit cta variant → primary button
-    expect(html).toContain('class="btn btn-primary" href="/s"');
-
-    expect(html).not.toContain("btn-link");
-  });
-
-  test("cta variant link renders a plain anchor, default renders a button", () => {
-    const html = renderApexPage(
-      page({
-        header: {
-          brand: { href: "/", label: "Acme" },
-          actions: [
-            { label: "Login", href: "/login", variant: "link" },
-            { label: "Start", href: "/signup" },
-          ],
-        },
-      }),
-    );
-    expect(html).toContain('<a href="/login">Login</a>'); // link → no class
-    expect(html).toContain('<a class="btn btn-primary" href="/signup">Start</a>');
-  });
-
-  test("pricing-tier cta variant link renders a plain anchor via renderCta, not a btn-link class", () => {
-    const html = renderApexPage(
-      page({
-        sections: [
-          {
-            kind: "pricing-grid",
-            heading: "Preise",
-            tiers: [
-              {
-                name: "Free",
-                amount: "0 €",
-                benefits: ["b1"],
-                cta: { label: "Los", href: "/free", variant: "link" },
-              },
-            ],
-          },
-        ],
-      }),
-    );
-    expect(html).toContain('<a href="/free">Los</a>');
-    expect(html).not.toContain("btn-link");
-  });
-
-  test("footer --footer-cols reflects column count and survives without columns", () => {
-    const twoCols = renderApexPage(
-      page({
-        footer: {
-          brand: { label: "Acme" },
-          columns: [
-            { heading: "A", links: [{ href: "/a", label: "a" }] },
-            { heading: "B", links: [{ href: "/b", label: "b" }] },
-          ],
-        },
-      }),
-    );
-    expect(twoCols).toContain("--footer-cols:2");
-    // 502/2: --footer-cols:0 makes grid-template-columns's repeat(0, 1fr)
-    // invalid CSS — the browser drops the whole declaration. Clamped to a
-    // minimum of 1 so a footer with no columns still gets a valid grid.
-    expect(renderApexPage(page())).toContain("--footer-cols:1");
-    expect(renderApexPage(page())).not.toContain("--footer-cols:0");
-  });
-
-  test("renders every section kind without throwing or leaking undefined", () => {
-    const html = renderApexPage(
-      page({
-        sections: [
-          { kind: "hero", title: "h", tagline: "t" },
-          { kind: "feature-grid", heading: "F", items: [{ title: "x", desc: "d" }] },
-          {
-            kind: "pricing-grid",
-            heading: "P",
-            tiers: [
-              { name: "Free", amount: "0 €", benefits: ["b"], cta: { label: "g", href: "/s" } },
-            ],
-          },
-          { kind: "info-grid", items: [{ title: "t", desc: "d" }] },
-          { kind: "final-cta", heading: "c", cta: { label: "g", href: "/s" } },
-          { kind: "html", html: "<div id='raw'></div>" },
-        ],
-      }),
-    );
-    expect(html).not.toContain("undefined");
-    expect(html).not.toContain("[object Object]");
-    expect(html).toContain("id='raw'");
-    expect(html).toContain("trust-item");
-  });
-
-  test("renders robots meta when set, absent when omitted", () => {
-    const without = renderApexPage(page());
-    expect(without).not.toContain("robots");
-    const withRobots = renderApexPage(
-      page({ head: { lang: "de", title: "T", description: "D", robots: "noindex, nofollow" } }),
-    );
-    expect(withRobots).toContain('<meta name="robots" content="noindex, nofollow" />');
-  });
-  test("omits both description meta tags when description is empty", () => {
-    const html = renderApexPage(page({ head: { lang: "de", title: "T", description: "" } }));
-    expect(html).not.toContain('<meta name="description"');
-    expect(html).not.toContain('<meta property="og:description"');
-  });
-
-  test("renders og:site_name and og:locale", () => {
-    const html = renderApexPage(
-      page({
-        head: {
-          lang: "de",
-          title: "T",
-          description: "D",
-          siteName: "Acme",
-          locale: "de_DE",
-        },
-      }),
-    );
-    expect(html).toContain('<meta property="og:site_name" content="Acme" />');
-    expect(html).toContain('<meta property="og:locale" content="de_DE" />');
-  });
-
-  test("renders twitter:card when ogImage is set, plus twitter:site", () => {
-    const html = renderApexPage(
-      page({
-        head: {
-          lang: "de",
-          title: "T",
-          description: "D",
-          ogImage: "https://example.com/image.png",
-          twitterSite: "@acme",
-        },
-      }),
-    );
-    expect(html).toContain('<meta name="twitter:card" content="summary_large_image" />');
-    expect(html).toContain('<meta name="twitter:site" content="@acme" />');
-  });
-
-  test("does not render twitter:card without ogImage", () => {
-    const html = renderApexPage(
-      page({
-        head: { lang: "de", title: "T", description: "D", twitterSite: "@acme" },
-      }),
-    );
-    expect(html).not.toContain("twitter:card");
-    expect(html).toContain("twitter:site");
-  });
-
-  test("renders preconnect links", () => {
-    const html = renderApexPage(
-      page({
-        head: {
-          lang: "de",
-          title: "T",
-          description: "D",
-          preconnects: ["https://fonts.example.com", "https://api.example.com"],
-        },
-      }),
-    );
-    expect(html).toContain('<link rel="preconnect" href="https://fonts.example.com" />');
-    expect(html).toContain('<link rel="preconnect" href="https://api.example.com" />');
-  });
-
-  test("hero screenshot includes apex lightbox chrome", () => {
-    const html = renderApexPage(
-      page({
-        sections: [
-          {
-            kind: "hero",
-            title: "h",
-            tagline: "t",
-            screenshot: { src: "/shots/demo.png", alt: "Dashboard" },
-          },
-        ],
-      }),
-    );
-    expect(html).toContain('class="shot-frame"');
-    expect(html).toContain('<dialog id="apex-lightbox"');
-    expect(html).toContain("apex-lightbox");
-    expect(html).toContain(".shot-frame img");
-  });
-
-  test("renders schemaJson as json-ld script tag", () => {
-    const html = renderApexPage(
-      page({
-        head: {
-          lang: "de",
-          title: "T",
-          description: "D",
-          schemaJson: { "@context": "https://schema.org", "@type": "WebSite", name: "Acme" },
-        },
-      }),
-    );
-    expect(html).toContain('<script type="application/ld+json">');
-    expect(html).toContain('{"@context":"https://schema.org","@type":"WebSite","name":"Acme"}');
-    expect(html).toContain("</script>");
-  });
-
-  test("header .nav rule doesn't reset the .container's horizontal padding (#2038)", () => {
-    const html = renderApexPage(page());
-    const navRule = html.match(/\.nav\s*\{[^}]*\}/)?.[0];
-    expect(navRule).toBeDefined();
-    // A `padding`/`padding-inline`/`padding-left`/`padding-right` shorthand or
-    // longhand here would win the cascade over .container's horizontal padding
-    // (same specificity, .nav declared later) and zero it out on <div class="container nav">.
-    expect(navRule).not.toMatch(/padding(-inline|-left|-right)?\s*:/);
-  });
-});