code-highlight.test.ts

code-highlight.test.tsapps/web/src/lib/__tests__/code-highlight.test.tsraw ← __tests__4,507 B← Back to the app
1/**
2 * highlightCode — deterministic token markup for code blocks.
3 *
4 * The code editor's "colorful code" regression: a code block must render
5 * Prism token spans (`<span class="token keyword">…`) for known languages so
6 * globals.css can color them, and must return null (→ raw text, no spans)
7 * for plaintext / unknown languages / empty input so a bad language value
8 * never breaks rendering.
9 */
10import { describe, expect, it } from "vitest";
11import { CODE_LANGUAGES, highlightCode } from "../code-highlight";
12 
13describe("highlightCode", () => {
14  it("javascript: keywords, strings, functions and numbers become token spans", () => {
15    const html = highlightCode('const x = "hello";\nfunction add(a, b) { return a + b; }\nlet n = 42;', "javascript");
16    expect(html, "expected HTML output").toBeTruthy();
17    expect(html).toContain('class="token keyword"');
18    expect(html).toContain(">const<");
19    expect(html).toContain('class="token string"');
20    expect(html).toContain("hello");
21    expect(html).toContain('class="token function"');
22    expect(html).toContain("add");
23    expect(html).toContain('class="token number"');
24    expect(html).toContain(">42<");
25    // Punctuation is tokenized too (the `;`, `{`, etc.).
26    expect(html).toContain('class="token punctuation"');
27  });
28 
29  it("typescript extends javascript (interface is a keyword)", () => {
30    const html = highlightCode("interface Foo { x: number }", "typescript");
31    expect(html).toContain('class="token keyword"');
32    expect(html).toContain(">interface<");
33  });
34 
35  it("python: keywords + strings + comments", () => {
36    const html = highlightCode('# count\nx = "hi"\nif x:\n    print(x)', "python");
37    expect(html).toContain('class="token comment"');
38    expect(html).toContain("count");
39    expect(html).toContain('class="token string"');
40    expect(html).toContain('class="token keyword"');
41  });
42 
43  it("sql: keywords are uppercased-matched and quoted", () => {
44    const html = highlightCode("SELECT id, name FROM users WHERE id = 1;", "sql");
45    expect(html).toContain('class="token keyword"');
46    expect(html).toContain("SELECT");
47    expect(html).toContain('class="token number"');
48  });
49 
50  it("json: keys/strings/numbers tokenized", () => {
51    const html = highlightCode('{ "a": 1, "b": true }', "json");
52    expect(html).toContain('class="token property"');
53    expect(html).toContain('class="token number"');
54    expect(html).toContain('class="token boolean"');
55  });
56 
57  it("bash: shebang/comment + strings", () => {
58    const html = highlightCode("#!/usr/bin/env bash\n# done\necho \"hi\"", "bash");
59    expect(html).toContain("token shebang");
60    expect(html).toContain('class="token comment"');
61    expect(html).toContain('class="token string"');
62  });
63 
64  it("css: property, value and selector tokens", () => {
65    const html = highlightCode("body { color: #ff0000; }", "css");
66    expect(html).toContain("token");
67  });
68 
69  it("html (markup): tags + attributes", () => {
70    const html = highlightCode("<div class=\"a\">x</div>", "html");
71    expect(html).toContain('class="token tag"');
72    expect(html).toContain('class="token attr-name"');
73  });
74 
75  it("plaintext: null (rendered raw, never wrapped in spans)", () => {
76    expect(highlightCode("just some text", "plaintext")).toBeNull();
77  });
78 
79  it("unknown language: null (fallback to raw, no broken markup)", () => {
80    expect(highlightCode("def f(): pass", "cobol")).toBeNull();
81    expect(highlightCode("x", "")).toBeNull();
82  });
83 
84  it("empty input: null", () => {
85    expect(highlightCode("", "javascript")).toBeNull();
86  });
87 
88  it("escapes HTML special characters (no raw <b> markup inside token output)", () => {
89    const html = highlightCode("const s = \"<b>&</b>\";", "javascript");
90    // Prism entity-escapes `<` (and `&`) in token contents so the output
91    // cannot open a real element inside the <code> DOM. A bare `>` can never
92    // start a tag, so Prism leaves it as-is — the safety property is that no
93    // raw `<tag>` survives the highlight.
94    expect(html).toContain("&lt;b>");
95    expect(html).toContain("&amp;");
96    expect(html).not.toContain("<b>"); // raw markup must not appear
97  });
98 
99  it("CODE_LANGUAGES matches the CodeBlock dropdown exactly (plaintext + 10 languages)", () => {
100    expect([...CODE_LANGUAGES]).toEqual([
101      "plaintext",
102      "javascript",
103      "typescript",
104      "python",
105      "bash",
106      "json",
107      "sql",
108      "go",
109      "rust",
110      "css",
111      "html",
112    ]);
113  });
114});
115