@oneuptime/common 14.0.9 → 14.0.11

package/Tests/UI/Components/CodeEditor/CodeEditorHighlight.test.ts

@@ -0,0 +1,338 @@
+import type {} from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import {
+  MAX_HIGHLIGHT_LENGTH,
+  escapeHtml,
+  highlightCode,
+} from "../../../../UI/Components/CodeEditor/CodeEditorHighlight";
+import { describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * The highlighted copy sits under a transparent textarea holding the same
+ * text, so it must hold exactly the same characters in the same order - a
+ * character more or less and every glyph after it is drawn in the wrong
+ * place - and nothing in it may become markup of its own: it is set as
+ * innerHTML.
+ */
+
+const GRAMMARS: Array<string | null> = [
+  "bash",
+  "css",
+  "javascript",
+  "json",
+  "markdown",
+  "sql",
+  "xml",
+  "yaml",
+  null,
+  "no-such-grammar",
+];
+
+const EMOJI: string = String.fromCodePoint(0x1f600);
+
+const TRICKY_INPUTS: Array<string> = [
+  "",
+  "<script>alert(1)</script>",
+  "&amp; &lt; &gt; &#x27; &quot;",
+  "a & b < c > d \" e ' f",
+  '<img src=x onerror="alert(1)">',
+  "tab\there\t\tand\ttabs",
+  "unicode: é ✓ 漢字 " + EMOJI + " ü",
+  '{\n  "a": "</div>",\n  "b": [1, 2, {"c": null}]\n}',
+  "key: value\nlist:\n  - <b>item</b>\n  - &anchor x\n",
+  "SELECT * FROM t WHERE a < 1 AND b > 2; -- <c>",
+  'echo "$HOME" && cat <<EOF\n<html>\nEOF',
+  "# Heading\n*em* **strong** `code` [link](http://x.y/<z>)",
+  ".a > .b::after { content: '<>'; }",
+  "const x = `${a < b}`; // <!-- -->",
+  "   \n\n  trailing spaces   \n",
+];
+
+type TextOfFunction = (html: string) => string;
+
+// What a browser would show for this HTML: its text content.
+const textOf: TextOfFunction = (html: string): string => {
+  const container: HTMLDivElement = document.createElement("div");
+  container.innerHTML = html;
+  return container.textContent || "";
+};
+
+type ElementsOfFunction = (html: string) => Array<Element>;
+
+const elementsOf: ElementsOfFunction = (html: string): Array<Element> => {
+  const container: HTMLDivElement = document.createElement("div");
+  container.innerHTML = html;
+  return Array.from(container.querySelectorAll("*"));
+};
+
+describe("highlightCode — the copy holds exactly the source text", () => {
+  for (const grammar of GRAMMARS) {
+    test.each(TRICKY_INPUTS)(
+      `grammar ${String(grammar)}: %j`,
+      (input: string) => {
+        expect(textOf(highlightCode(input, grammar))).toBe(input);
+        expect(textOf(highlightCode(input, grammar, { showTabs: true }))).toBe(
+          input,
+        );
+      },
+    );
+  }
+});
+
+/*
+ * A token is `hljs-<scope>`; a stretch in an embedded language (HTML inside
+ * JavaScript or Markdown) is wrapped in a span named after that grammar.
+ */
+const ALLOWED_CLASS: RegExp =
+  /^(?:hljs-[a-z_-]+|ou-code-editor__tab|bash|css|javascript|json|markdown|sql|xml|yaml)$/;
+
+describe("highlightCode — nothing in the source becomes markup", () => {
+  for (const grammar of GRAMMARS) {
+    test(`grammar ${String(grammar)}: only token spans come out`, () => {
+      for (const input of TRICKY_INPUTS) {
+        for (const element of elementsOf(
+          highlightCode(input, grammar, { showTabs: true }),
+        )) {
+          expect(element.tagName).toBe("SPAN");
+          expect(element.className).toMatch(ALLOWED_CLASS);
+          expect(element.getAttributeNames()).toEqual(["class"]);
+        }
+      }
+    });
+  }
+
+  test("an injected image never becomes an element", () => {
+    for (const grammar of GRAMMARS) {
+      const html: string = highlightCode(
+        '<img src=x onerror="alert(1)">',
+        grammar,
+      );
+      const parsed: Document = new DOMParser().parseFromString(
+        `<div>${html}</div>`,
+        "text/html",
+      );
+
+      expect(parsed.querySelector("img")).toBeNull();
+      expect(parsed.querySelector("[onerror]")).toBeNull();
+    }
+  });
+
+  test("no raw angle bracket from the source survives", () => {
+    for (const grammar of GRAMMARS) {
+      const html: string = highlightCode("<script>alert(1)</script>", grammar);
+      const withoutTokenSpans: string = html
+        .replace(/<span class="[a-z_ -]+">/g, "")
+        .replace(/<\/span>/g, "");
+
+      expect(withoutTokenSpans).not.toContain("<");
+      expect(withoutTokenSpans).not.toContain(">");
+    }
+  });
+});
+
+describe("highlightCode — tokens are marked with highlight.js classes", () => {
+  test("JSON keys, strings, numbers and literals", () => {
+    const html: string = highlightCode(
+      '{"a": "b", "n": 1, "t": true, "z": null}',
+      "json",
+    );
+
+    expect(html).toContain('<span class="hljs-attr">&quot;a&quot;</span>');
+    expect(html).toContain('<span class="hljs-string">&quot;b&quot;</span>');
+    expect(html).toContain('<span class="hljs-number">1</span>');
+    expect(html).toContain('<span class="hljs-literal">true</span>');
+    expect(html).toContain('<span class="hljs-literal">null</span>');
+  });
+
+  test("YAML keys and list bullets", () => {
+    const html: string = highlightCode("key: value\nlist:\n  - item\n", "yaml");
+
+    expect(html).toContain('<span class="hljs-attr">key:</span>');
+    expect(html).toContain('<span class="hljs-attr">list:</span>');
+    expect(html).toContain('<span class="hljs-bullet">-</span>');
+  });
+
+  test("JavaScript keywords and comments", () => {
+    const html: string = highlightCode(
+      "const x = await f(); // done",
+      "javascript",
+    );
+
+    expect(html).toContain('<span class="hljs-keyword">const</span>');
+    expect(html).toContain('<span class="hljs-keyword">await</span>');
+    expect(html).toContain('<span class="hljs-comment">// done</span>');
+  });
+
+  test("SQL keywords and strings", () => {
+    const html: string = highlightCode("SELECT * FROM t WHERE a = 'x';", "sql");
+
+    expect(html).toContain('<span class="hljs-keyword">SELECT</span>');
+    expect(html).toContain('<span class="hljs-keyword">FROM</span>');
+    expect(html).toContain('<span class="hljs-string">&#x27;x&#x27;</span>');
+  });
+
+  test("Bash built-ins, keywords and variables", () => {
+    const html: string = highlightCode(
+      'echo "hi $HOME"; if true; then ls; fi',
+      "bash",
+    );
+
+    expect(html).toContain('<span class="hljs-built_in">echo</span>');
+    expect(html).toContain('<span class="hljs-keyword">if</span>');
+    expect(html).toContain('<span class="hljs-variable">$HOME</span>');
+  });
+
+  test("HTML tags, through the xml grammar", () => {
+    const html: string = highlightCode('<div class="a">x</div>', "xml");
+
+    expect(html).toContain('<span class="hljs-name">div</span>');
+    expect(html).toContain('<span class="hljs-attr">class</span>');
+  });
+
+  test("CSS selectors and properties", () => {
+    const html: string = highlightCode(".a { color: red; }", "css");
+
+    expect(html).toContain('<span class="hljs-selector-class">.a</span>');
+    expect(html).toContain('<span class="hljs-attribute">color</span>');
+  });
+
+  test("Markdown headings", () => {
+    expect(highlightCode("# Title", "markdown")).toContain(
+      '<span class="hljs-section"># Title</span>',
+    );
+  });
+});
+
+describe("highlightCode — falls back to escaped plain text", () => {
+  const SOURCE: string = '{"a": "<b>&</b>"}';
+
+  test("without a grammar", () => {
+    expect(highlightCode(SOURCE, null)).toBe(escapeHtml(SOURCE));
+  });
+
+  test("with a grammar highlight.js does not know", () => {
+    expect(highlightCode(SOURCE, "cobol")).toBe(escapeHtml(SOURCE));
+  });
+
+  test("for a document over the length limit", () => {
+    const long: string = "[" + "1,".repeat(MAX_HIGHLIGHT_LENGTH / 2) + "1]";
+
+    expect(long.length).toBeGreaterThan(MAX_HIGHLIGHT_LENGTH);
+    expect(highlightCode(long, "json")).toBe(escapeHtml(long));
+    expect(highlightCode(long, "json")).not.toContain("<span");
+  });
+
+  test("a document exactly at the limit is still highlighted", () => {
+    const text: string = '"' + "a".repeat(MAX_HIGHLIGHT_LENGTH - 2) + '"';
+
+    expect(text.length).toBe(MAX_HIGHLIGHT_LENGTH);
+    expect(highlightCode(text, "json")).toContain('<span class="hljs-string">');
+  });
+
+  test("when highlight.js throws", () => {
+    jest.spyOn(hljs, "highlight").mockImplementation(() => {
+      throw new Error("grammar crashed");
+    });
+
+    try {
+      expect(highlightCode(SOURCE, "json")).toBe(escapeHtml(SOURCE));
+    } finally {
+      jest.restoreAllMocks();
+    }
+  });
+
+  test("escapeHtml escapes exactly &, < and >", () => {
+    expect(escapeHtml("a & b < c > d \" e ' f")).toBe(
+      "a &amp; b &lt; c &gt; d \" e ' f",
+    );
+    expect(escapeHtml("&amp;")).toBe("&amp;amp;");
+  });
+});
+
+describe("highlightCode — showTabs", () => {
+  const TAB_SPAN: string = '<span class="ou-code-editor__tab">\t</span>';
+
+  test("wraps every tab, and changes nothing else", () => {
+    const plain: string = highlightCode("a\tb\t\tc", null);
+    const shown: string = highlightCode("a\tb\t\tc", null, { showTabs: true });
+
+    expect(shown).toBe(`a${TAB_SPAN}b${TAB_SPAN}${TAB_SPAN}c`);
+    expect(shown.split(TAB_SPAN).join("\t")).toBe(plain);
+  });
+
+  test("wraps tabs inside highlighted YAML too", () => {
+    const source: string = "key:\n\tchild: 1\n";
+    const plain: string = highlightCode(source, "yaml");
+    const shown: string = highlightCode(source, "yaml", { showTabs: true });
+
+    expect(shown).toContain(TAB_SPAN);
+    expect(shown.split(TAB_SPAN).join("\t")).toBe(plain);
+  });
+
+  test("is off unless asked for", () => {
+    expect(highlightCode("a\tb", null)).toBe("a\tb");
+    expect(highlightCode("a\tb", null, { showTabs: false })).toBe("a\tb");
+  });
+
+  test("leaves a document without tabs untouched", () => {
+    expect(highlightCode("a b", "yaml", { showTabs: true })).toBe(
+      highlightCode("a b", "yaml"),
+    );
+  });
+});
+
+describe("the grammars are registered on highlight.js core", () => {
+  test.each([
+    "bash",
+    "css",
+    "javascript",
+    "json",
+    "markdown",
+    "sql",
+    "xml",
+    "yaml",
+  ])("%s is registered once the module is imported", (grammar: string) => {
+    expect(hljs.getLanguage(grammar)).toBeDefined();
+  });
+
+  test("html resolves, as an alias of xml", () => {
+    expect(hljs.getLanguage("html")).toBe(hljs.getLanguage("xml"));
+  });
+
+  /*
+   * CodeBlock registers its own set of grammars on the same core. Importing
+   * the editor afterwards must leave them exactly as they are.
+   */
+  test("a grammar CodeBlock already registered is left alone", async () => {
+    jest.resetModules();
+
+    const { default: core } = await import("highlight.js/lib/core");
+
+    await import("../../../../UI/Components/CodeBlock/LanguageRegistry");
+
+    const before: ReturnType<typeof core.getLanguage> =
+      core.getLanguage("json");
+
+    await import("../../../../UI/Components/CodeEditor/CodeEditorHighlight");
+
+    expect(before).toBeDefined();
+    expect(core.getLanguage("json")).toBe(before);
+    expect(core.getLanguage("yaml")).toBeDefined();
+  });
+
+  test("a grammar registered by anyone else first is not replaced", async () => {
+    jest.resetModules();
+
+    const { default: core } = await import("highlight.js/lib/core");
+
+    core.registerLanguage("json", () => {
+      return { name: "Stub JSON", contains: [] };
+    });
+
+    await import("../../../../UI/Components/CodeEditor/CodeEditorHighlight");
+
+    expect(core.getLanguage("json")?.name).toBe("Stub JSON");
+    // Every grammar it did not find is still registered.
+    expect(core.getLanguage("sql")).toBeDefined();
+  });
+});

package/Tests/UI/Components/CodeEditor/CodeEditorLanguages.test.ts

@@ -0,0 +1,222 @@
+import type {} from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import "../../../../UI/Components/CodeEditor/CodeEditorHighlight";
+import {
+  CODE_LANGUAGES,
+  CodeLanguage,
+  getCodeLanguage,
+} from "../../../../UI/Components/CodeEditor/CodeEditorLanguages";
+import CodeType from "../../../../Types/Code/CodeType";
+import { describe, expect, test } from "@jest/globals";
+
+/*
+ * Everything CodeEditor does differently per language lives in this table,
+ * so these tests pin the choices that matter to a user: which languages
+ * highlight, which may hold tabs, which are checked as you type, which can
+ * be formatted, and which wrap.
+ */
+
+const ALL_TYPES: Array<CodeType> = Object.values(CodeType);
+
+type RowsWhereFunction = (
+  predicate: (language: CodeLanguage) => boolean,
+) => Array<CodeType>;
+
+const typesWhere: RowsWhereFunction = (
+  predicate: (language: CodeLanguage) => boolean,
+): Array<CodeType> => {
+  return ALL_TYPES.filter((type: CodeType) => {
+    return predicate(CODE_LANGUAGES[type]);
+  });
+};
+
+describe("CODE_LANGUAGES", () => {
+  test.each(ALL_TYPES)("%s has a row with a label", (type: CodeType) => {
+    const language: CodeLanguage | undefined = CODE_LANGUAGES[type];
+
+    expect(language).toBeDefined();
+    expect(language?.label.trim()).not.toBe("");
+  });
+
+  test("has a row for every CodeType and nothing else", () => {
+    expect(Object.keys(CODE_LANGUAGES).sort()).toEqual([...ALL_TYPES].sort());
+  });
+
+  test("labels are unique, since the toolbar names the language", () => {
+    const labels: Array<string> = ALL_TYPES.map((type: CodeType) => {
+      return CODE_LANGUAGES[type].label;
+    });
+
+    expect(new Set(labels).size).toBe(labels.length);
+  });
+
+  test.each(ALL_TYPES)(
+    "%s's grammar, if any, is registered with highlight.js",
+    (type: CodeType) => {
+      const grammar: string | null = CODE_LANGUAGES[type].grammar;
+
+      if (grammar !== null) {
+        expect(hljs.getLanguage(grammar)).toBeDefined();
+      }
+    },
+  );
+
+  test("each language highlights with the grammar it should", () => {
+    expect(
+      ALL_TYPES.map((type: CodeType) => {
+        return [type, CODE_LANGUAGES[type].grammar];
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        [CodeType.JSON, "json"],
+        [CodeType.YAML, "yaml"],
+        [CodeType.JavaScript, "javascript"],
+        [CodeType.CSS, "css"],
+        [CodeType.HTML, "xml"],
+        [CodeType.SQL, "sql"],
+        [CodeType.Bash, "bash"],
+        [CodeType.Markdown, "markdown"],
+        [CodeType.Text, null],
+      ]),
+    );
+  });
+
+  test.each(ALL_TYPES)(
+    "%s pairs brackets with their own closers",
+    (type: CodeType) => {
+      const brackets: Record<string, string> =
+        CODE_LANGUAGES[type].rules.brackets;
+      const expected: Record<string, string> = {
+        "(": ")",
+        "[": "]",
+        "{": "}",
+      };
+
+      for (const [opener, closer] of Object.entries(brackets)) {
+        expect(expected[opener]).toBe(closer);
+      }
+    },
+  );
+
+  test.each(ALL_TYPES)("%s's quotes are quote characters", (type: CodeType) => {
+    for (const quote of CODE_LANGUAGES[type].rules.quotes) {
+      expect(['"', "'", "`"]).toContain(quote);
+    }
+  });
+});
+
+describe("the choices each language makes", () => {
+  test("YAML: never a tab, # comments, deeper after key:, tabs drawn, checked as YAML", () => {
+    const yaml: CodeLanguage = CODE_LANGUAGES[CodeType.YAML];
+
+    expect(yaml.allowTabs).toBe(false);
+    expect(yaml.rules.lineComment).toBe("#");
+    expect(yaml.rules.indentAfterColon).toBe(true);
+    expect(yaml.showTabs).toBe(true);
+    expect(yaml.validator).toBe("yaml");
+    expect(yaml.canFormat).toBe(false);
+  });
+
+  test("JSON: checked as JSON, can be formatted, no comments, double quotes only", () => {
+    const json: CodeLanguage = CODE_LANGUAGES[CodeType.JSON];
+
+    expect(json.validator).toBe("json");
+    expect(json.canFormat).toBe(true);
+    expect(json.rules.lineComment).toBeNull();
+    expect(json.rules.quotes).toEqual(['"']);
+    expect(json.rules.brackets).toEqual({ "[": "]", "{": "}" });
+  });
+
+  test("Markdown: wraps, follows the caller's spell check, pairs nothing", () => {
+    const markdown: CodeLanguage = CODE_LANGUAGES[CodeType.Markdown];
+
+    expect(markdown.wrap).toBe(true);
+    expect(markdown.spellCheckFollowsCaller).toBe(true);
+    expect(markdown.rules.brackets).toEqual({});
+    expect(markdown.rules.quotes).toEqual([]);
+  });
+
+  test("Text: no grammar, no pairs, no comments, nothing checked", () => {
+    const text: CodeLanguage = CODE_LANGUAGES[CodeType.Text];
+
+    expect(text.grammar).toBeNull();
+    expect(text.rules.brackets).toEqual({});
+    expect(text.rules.quotes).toEqual([]);
+    expect(text.rules.lineComment).toBeNull();
+    expect(text.validator).toBeNull();
+    expect(text.wrap).toBe(false);
+  });
+
+  test("line comments use each language's own token", () => {
+    expect(CODE_LANGUAGES[CodeType.JavaScript].rules.lineComment).toBe("//");
+    expect(CODE_LANGUAGES[CodeType.SQL].rules.lineComment).toBe("--");
+    expect(CODE_LANGUAGES[CodeType.Bash].rules.lineComment).toBe("#");
+    expect(CODE_LANGUAGES[CodeType.CSS].rules.lineComment).toBeNull();
+    expect(CODE_LANGUAGES[CodeType.HTML].rules.lineComment).toBeNull();
+  });
+
+  test("only JSON can be formatted", () => {
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.canFormat;
+      }),
+    ).toEqual([CodeType.JSON]);
+  });
+
+  test("only JSON and YAML are checked as you type", () => {
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.validator !== null;
+      }).sort(),
+    ).toEqual([CodeType.JSON, CodeType.YAML].sort());
+  });
+
+  test("only prose wraps and gets spell check; code scrolls sideways", () => {
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.wrap;
+      }),
+    ).toEqual([CodeType.Markdown]);
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.spellCheckFollowsCaller;
+      }),
+    ).toEqual([CodeType.Markdown]);
+  });
+
+  test("only YAML refuses tabs and draws them", () => {
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return !language.allowTabs;
+      }),
+    ).toEqual([CodeType.YAML]);
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.showTabs;
+      }),
+    ).toEqual([CodeType.YAML]);
+  });
+
+  test("only YAML indents after a colon", () => {
+    expect(
+      typesWhere((language: CodeLanguage) => {
+        return language.rules.indentAfterColon;
+      }),
+    ).toEqual([CodeType.YAML]);
+  });
+});
+
+describe("getCodeLanguage", () => {
+  test.each(ALL_TYPES)("returns the table's row for %s", (type: CodeType) => {
+    expect(getCodeLanguage(type)).toBe(CODE_LANGUAGES[type]);
+  });
+
+  test("an unknown type from data falls back to plain text", () => {
+    expect(getCodeLanguage("cobol" as CodeType)).toBe(
+      CODE_LANGUAGES[CodeType.Text],
+    );
+    expect(getCodeLanguage(undefined as unknown as CodeType)).toBe(
+      CODE_LANGUAGES[CodeType.Text],
+    );
+  });
+});