eden/apps/api/test/editor-content-renderer.spec.ts

import { describe, expect, it } from "vitest";
import { collectMergeFieldKeys, renderToHtml } from "../src/documents/editor-content-renderer";

/**
 * Unidade pura, sem app/DB — cobre a porta do serializador Tiptap→HTML do
 * legado (renderEditorContent.js). documents-pdf.spec.ts cobre o pipeline
 * completo (geração real via HTTP); aqui é só a árvore de nós, isolada.
 */
describe("editor-content-renderer", () => {
  it("renderiza parágrafo com alinhamento e marks (bold/italic/underline/strike/fontSize)", () => {
    const doc = {
      type: "doc",
      content: [
        {
          type: "paragraph",
          attrs: { textAlign: "center" },
          content: [
            { type: "text", text: "Olá ", marks: [{ type: "bold" }] },
            { type: "text", text: "mundo", marks: [{ type: "italic" }, { type: "underline" }, { type: "strike" }] },
            { type: "text", text: " grande", marks: [{ type: "textStyle", attrs: { fontSize: "18px" } }] },
          ],
        },
      ],
    };

    const html = renderToHtml(doc);
    expect(html).toBe(
      '<p style="text-align:center"><strong>Olá </strong><s><u><em>mundo</em></u></s><span style="font-size:18px"> grande</span></p>',
    );
  });

  it("renderiza heading, listas e parágrafo vazio como &nbsp;", () => {
    const doc = {
      type: "doc",
      content: [
        { type: "heading", attrs: { level: 2 }, content: [{ type: "text", text: "Título" }] },
        { type: "paragraph", content: [] },
        {
          type: "bulletList",
          content: [
            { type: "listItem", content: [{ type: "paragraph", content: [{ type: "text", text: "item 1" }] }] },
          ],
        },
        {
          type: "orderedList",
          content: [
            { type: "listItem", content: [{ type: "paragraph", content: [{ type: "text", text: "item A" }] }] },
          ],
        },
      ],
    };

    const html = renderToHtml(doc);
    expect(html).toContain("<h2>Título</h2>");
    expect(html).toContain("<p>&nbsp;</p>");
    expect(html).toContain("<ul><li><p>item 1</p></li></ul>");
    expect(html).toContain("<ol><li><p>item A</p></li></ol>");
  });

  it("renderiza imagem e quebra de página", () => {
    const doc = {
      type: "doc",
      content: [
        { type: "image", attrs: { src: "data:image/png;base64,abc", alt: "logo" } },
        { type: "pageBreak" },
      ],
    };

    const html = renderToHtml(doc);
    expect(html).toContain('<img src="data:image/png;base64,abc" alt="logo" />');
    expect(html).toContain('style="break-after:page;page-break-after:always;"');
  });

  it("gera <thead> real só quando há tableHeader, mesmo no meio das linhas", () => {
    const doc = {
      type: "doc",
      content: [
        {
          type: "table",
          content: [
            {
              type: "tableRow",
              content: [{ type: "tableHeader", attrs: { colspan: 2 }, content: [{ type: "paragraph", content: [] }] }],
            },
            {
              type: "tableRow",
              content: [{ type: "tableCell", content: [{ type: "paragraph", content: [{ type: "text", text: "x" }] }] }],
            },
          ],
        },
      ],
    };

    const html = renderToHtml(doc);
    expect(html).toMatch(/<thead>.*<th colspan="2">/s);
    expect(html).toMatch(/<tbody>.*<td>/s);
  });

  it("mergeField vira chip visual sem resolveMergeField, e valor resolvido com resolveMergeField", () => {
    const doc = {
      type: "doc",
      content: [
        {
          type: "paragraph",
          content: [{ type: "mergeField", attrs: { key: "cliente.razao_social", label: "Razão Social" } }],
        },
      ],
    };

    const chipHtml = renderToHtml(doc);
    expect(chipHtml).toContain('data-merge-field="cliente.razao_social"');
    expect(chipHtml).toContain("Razão Social");

    const resolvedHtml = renderToHtml(doc, (key) => (key === "cliente.razao_social" ? "ACME LTDA" : ""));
    expect(resolvedHtml).toBe("<p>ACME LTDA</p>");
    expect(resolvedHtml).not.toContain("merge-field-chip");
  });

  it("escapa HTML de texto e de valores resolvidos (proteção contra XSS)", () => {
    const doc = {
      type: "doc",
      content: [
        { type: "paragraph", content: [{ type: "text", text: "<script>alert(1)</script>" }] },
        { type: "paragraph", content: [{ type: "mergeField", attrs: { key: "x" } }] },
      ],
    };

    const html = renderToHtml(doc, () => "<img onerror=alert(1)>");
    expect(html).not.toContain("<script>");
    expect(html).toContain("&lt;script&gt;");
    expect(html).not.toContain("<img onerror");
    expect(html).toContain("&lt;img onerror=alert(1)&gt;");
  });

  it("collectMergeFieldKeys varre a árvore inteira e dedupe chaves repetidas", () => {
    const doc = {
      type: "doc",
      content: [
        {
          type: "paragraph",
          content: [
            { type: "mergeField", attrs: { key: "cliente.razao_social" } },
            { type: "mergeField", attrs: { key: "cliente.cnpj" } },
          ],
        },
        {
          type: "table",
          content: [
            {
              type: "tableRow",
              content: [
                {
                  type: "tableCell",
                  content: [{ type: "paragraph", content: [{ type: "mergeField", attrs: { key: "cliente.razao_social" } }] }],
                },
              ],
            },
          ],
        },
      ],
    };

    expect(collectMergeFieldKeys(doc)).toEqual(["cliente.razao_social", "cliente.cnpj"]);
  });

  it("devolve string vazia para conteúdo que não é um doc Tiptap válido", () => {
    expect(renderToHtml(null)).toBe("");
    expect(renderToHtml({ type: "doc" })).toBe("");
    expect(collectMergeFieldKeys(undefined)).toEqual([]);
  });
});