q-edit/tests/ui.render.test.mjs

import { describe, it, expect, beforeEach } from "vitest";
import { escapeHtml, raw, html, fragment, renderInto } from "../src/ui/render.js";

describe("ui/render helpers", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
  });

  it("escapeHtml escapes special characters", () => {
    expect(escapeHtml(`<a href="x&y">'`)).toBe("&lt;a href=&quot;x&amp;y&quot;&gt;&#39;");
  });

  it("html tag escapes by default and allows raw opt-out", () => {
    const user = `<b>bold&spicy</b>`;
    const safe = html`Hello ${user}!`;
    expect(safe).toBe("Hello &lt;b&gt;bold&amp;spicy&lt;/b&gt;!");
    const unsafe = html`Hello ${raw(user)}!`;
    expect(unsafe).toBe("Hello <b>bold&spicy</b>!");
  });

  it("fragment creates nodes", () => {
    const frag = fragment("<ul><li>a</li><li>b</li></ul>");
    expect(frag.childNodes.length).toBe(1);
    expect(frag.querySelectorAll("li").length).toBe(2);
  });

  it("renderInto replaces by default and can append/prepend", () => {
    const host = document.createElement("div");
    document.body.appendChild(host);

    renderInto(host, "<p>first</p>");
    expect(host.querySelector("p")?.textContent).toBe("first");

    renderInto(host, "<p>second</p>", "append");
    const ps = host.querySelectorAll("p");
    expect(ps.length).toBe(2);
    expect(ps[0].textContent).toBe("first");
    expect(ps[1].textContent).toBe("second");

    renderInto(host, "<p>third</p>", "prepend");
    const ps2 = host.querySelectorAll("p");
    expect(ps2.length).toBe(3);
    expect(ps2[0].textContent).toBe("third");
  });
});