WRNexusJS/packages/email-renderer/test/button-brand.test.ts

import { expect, test } from "bun:test";
import type { BlockDocument } from "@wrnexus/blocks";
import { renderEmail, validateMjml } from "../src/index.ts";

test("button alignment maps physical and logical positions consistently in LTR and RTL", async () => {
  for (const direction of ["ltr", "rtl"] as const) {
    for (const alignment of [undefined, "left", "center", "right", "start", "end"]) {
      const expected =
        !alignment || alignment === "start"
          ? direction === "rtl"
            ? "right"
            : "left"
          : alignment === "end"
            ? direction === "rtl"
              ? "left"
              : "right"
            : alignment;
      const document: BlockDocument = {
        schemaVersion: 1,
        kind: "email",
        meta: { subject: "Alignment", lang: "en" },
        theme: { tokens: {} },
        root: {
          id: "root",
          type: "layout.email-document",
          version: 1,
          props: { width: "600" },
          styles: {},
          slots: {
            content: [
              {
                id: "cta",
                type: "content.button",
                version: 1,
                props: { label: "Act", href: "https://example.com" },
                styles: alignment ? { textAlign: { base: alignment } } : {},
                slots: {},
              },
            ],
          },
        },
      };
      const rendered = await renderEmail(document, {
        direction,
        amp: true,
        mjml: true,
        ampValidationTimeoutMs: 10000,
      });
      expect(rendered.ok).toBe(true);
      if (!rendered.ok) continue;
      expect(rendered.value.parts.html.content).toContain(
        `<table role="presentation" align="${expected}" cellpadding="0"`,
      );
      expect(rendered.value.parts.amp?.content).toContain(
        `data-block-id="cta" align="${expected}"`,
      );
      expect(rendered.value.parts.amp?.validation.valid).toBe(true);
      expect(rendered.value.exports?.mjml).toContain(`<mj-button align="${expected}"`);
    }
  }
});

test("button typography and corners reach the clickable element in every target", async () => {
  const document: BlockDocument = {
    schemaVersion: 1,
    kind: "email",
    meta: { subject: "Styled CTA", lang: "en" },
    theme: { tokens: {} },
    root: {
      id: "root",
      type: "layout.email-document",
      version: 1,
      props: { width: "600" },
      styles: {},
      slots: {
        content: [
          {
            id: "cta",
            type: "content.button",
            version: 1,
            props: { label: "Read more", href: "https://example.com" },
            styles: {
              color: { base: "#123456" },
              fontSize: { base: "22px" },
              fontWeight: { base: "400" },
              borderRadius: { base: "18px" },
            },
            slots: {},
          },
        ],
      },
    },
  };
  const before = structuredClone(document);
  const result = await renderEmail(document, {
    amp: true,
    mjml: true,
    ampValidationTimeoutMs: 10000,
  });
  expect(result.ok).toBe(true);
  if (!result.ok) return;
  const anchor = result.value.parts.html.content.match(
    /<a href="https:\/\/example.com" style="([^"]+)"/,
  )?.[1];
  for (const declaration of [
    "color:#123456",
    "font-size:22px",
    "font-weight:400",
    "border-radius:18px",
  ]) {
    expect(anchor).toContain(declaration);
    expect(result.value.parts.amp?.content).toContain(declaration);
  }
  expect(result.value.parts.amp?.validation.valid).toBe(true);
  for (const attribute of [
    'color="#123456"',
    'font-size="22px"',
    'font-weight="400"',
    'border-radius="18px"',
  ]) {
    expect(result.value.exports?.mjml).toContain(attribute);
  }
  expect(await validateMjml(result.value.exports!.mjml!)).toEqual([]);
  expect(document).toEqual(before);
});

test("button background inherits brand color with explicit semantic overrides across formats", async () => {
  for (const override of [undefined, "#aabbcc"]) {
    const document: BlockDocument = {
      schemaVersion: 1,
      kind: "email",
      meta: { subject: "Brand", lang: "en" },
      theme: { tokens: {} },
      root: {
        id: "root",
        type: "layout.email-document",
        version: 1,
        props: { linkColor: "#125634" },
        styles: {},
        slots: {
          content: [
            {
              id: "button",
              type: "content.button",
              version: 1,
              props: { label: "Act", href: "https://example.com" },
              styles: override ? { backgroundColor: { base: override } } : {},
              slots: {},
            },
          ],
        },
      },
    };
    document.root.slots.content = [
      {
        id: "section",
        type: "layout.section",
        version: 1,
        props: {},
        styles: {},
        slots: { content: document.root.slots.content },
      },
    ];
    const before = structuredClone(document);
    const rendered = await renderEmail(document, {
      amp: true,
      mjml: true,
      ampValidationTimeoutMs: 10000,
    });
    expect(rendered.ok).toBe(true);
    if (!rendered.ok) return;
    const color = override ?? "#125634";
    expect(rendered.value.parts.html.content).toContain(`bgcolor="${color}"`);
    expect(rendered.value.parts.amp?.validation.valid).toBe(true);
    expect(rendered.value.parts.amp?.content).toContain(`background-color:${color}`);
    expect(rendered.value.exports?.mjml).toContain(`background-color="${color}"`);
    expect(await validateMjml(rendered.value.exports!.mjml!)).toEqual([]);
    expect(document).toEqual(before);
  }
});