DEV: Add test case for syntax highlight of complex HTML (#18320)

* DEV: Add test case for syntax highlight of complex HTML

The commit 685e0da upgrade HighlightJS to version 11, which deprecates
syntax highlight of complex HTML elements. See https://github.com/highlightjs/highlight.js/issues/2889

This brought a regression of syntax highlighting of GitHub oneboxes,
which was fixed in 09cec7d. This commit adds a test case to prevent
future regressions like this one.

* fix test and warning

app/assets/javascripts/discourse/app/lib/highlight-syntax.js

@@ -28,6 +28,9 @@ export default function highlightSyntax(elem, siteSettings, session) {
   return loadScript(path).then(() => {
     customHighlightJSLanguages();
     hljs.addPlugin(mergeHTMLPlugin);
+    hljs.configure({
+      ignoreUnescapedHTML: true,
+    });
 
     codeblocks.forEach((e) => {
       // Large code blocks can cause crashes or slowdowns

app/assets/javascripts/discourse/tests/integration/components/highlighted-code-test.js

@@ -17,7 +17,7 @@ module("Integration | Component | highlighted-code", function (hooks) {
     await render(hbs`<HighlightedCode @lang="ruby" @code={{this.code}} />`);
 
     assert.strictEqual(
-      query("code.ruby.hljs .hljs-function .hljs-keyword").innerText.trim(),
+      query("code.language-ruby.hljs .hljs-keyword").innerText.trim(),
       "def"
     );
   });

app/assets/javascripts/discourse/tests/unit/lib/highlight-syntax-test.js

@@ -0,0 +1,60 @@
+import highlightSyntax from "discourse/lib/highlight-syntax";
+import { module, test } from "qunit";
+import { fixture } from "discourse/tests/helpers/qunit-helpers";
+
+let siteSettings = { autohighlight_all_code: true },
+  session = {
+    highlightJsPath: "/assets/highlightjs/highlight-test-bundle.min.js",
+  };
+
+module("Unit | Utility | highlight-syntax", function () {
+  test("highlighting code", async function (assert) {
+    fixture().innerHTML = `
+      <pre>
+        <code class="language-ruby">
+          def code
+            puts 1 + 2
+          end
+        </code>
+      </pre>
+    `;
+
+    await highlightSyntax(fixture(), siteSettings, session);
+
+    assert.strictEqual(
+      document
+        .querySelector("code.language-ruby.hljs .hljs-keyword")
+        .innerText.trim(),
+      "def"
+    );
+  });
+
+  test("highlighting code with HTML intermingled", async function (assert) {
+    fixture().innerHTML = `
+      <pre>
+        <code class="language-ruby">
+          <ol>
+          <li>def code</li>
+          <li>  puts 1 + 2</li>
+          <li>end</li>
+          </ol>
+        </code>
+      </pre>
+    `;
+
+    await highlightSyntax(fixture(), siteSettings, session);
+
+    assert.strictEqual(
+      document
+        .querySelector("code.language-ruby.hljs .hljs-keyword")
+        .innerText.trim(),
+      "def"
+    );
+
+    // Checks if HTML structure was preserved
+    assert.strictEqual(
+      document.querySelectorAll("code.language-ruby.hljs ol li").length,
+      3
+    );
+  });
+});