packages/forkhorse-dashboard/test/mark.test.ts

1import assert from "node:assert/strict";
2import { createRequire } from "node:module";
3import { test } from "node:test";
4import brand from "../../../brand.json" with { type: "json" };
5import { markIconUrl } from "../src/mark.ts";
6
7const { JSDOM } = createRequire(import.meta.url)("jsdom");
8
9test("the mark is font-rendered accessible SVG text, including untrusted future values", () => {
10  for (const mark of [brand.mark, `</text><script>alert("x")</script>&'`]) {
11    const url = markIconUrl(mark);
12    assert.ok(url.startsWith("data:image/svg+xml,"));
13    assert.doesNotMatch(url, /[<>"']/);
14    const svg = decodeURIComponent(url.slice(url.indexOf(",") + 1));
15    const dom = new JSDOM(svg, { contentType: "image/svg+xml" });
16    const document = dom.window.document;
17    assert.equal(document.querySelector("text")!.textContent, mark);
18    assert.equal(document.documentElement.getAttribute("role"), "img");
19    assert.equal(document.documentElement.getAttribute("aria-label"), brand.name);
20    assert.match(document.querySelector("text")!.getAttribute("font-family")!, /emoji/);
21    assert.equal(document.querySelectorAll("script, image, path").length, 0);
22    dom.window.close();
23  }
24});
25