docs(docs-infra): Add tests for marked rendering

JeanMeche · JeanMeche · commit 3370638d97b2 · 2024-08-14T19:31:24.000+02:00
On top of #57338, to make sure we prevent similar regressions on marked rendering.
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/BUILD.bazel b/adev/shared-docs/pipeline/api-gen/rendering/test/BUILD.bazel
@@ -19,10 +19,18 @@ ts_library(
     ),
     deps = [
         "//adev/shared-docs/pipeline/api-gen/rendering:render_api_to_html_lib",
+        "@npm//@bazel/runfiles",
+        "@npm//@types/jsdom",
+        "@npm//jsdom",
     ],
 )
 
 jasmine_node_test(
     name = "unit_tests",
+    data = [
+        "@npm//jsdom",
+    ] + glob([
+        "**/*.json",
+    ]),
     deps = [":unit_test_lib"],
 )
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/fake-entries.json b/adev/shared-docs/pipeline/api-gen/rendering/test/fake-entries.json
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/marked.spec.ts b/adev/shared-docs/pipeline/api-gen/rendering/test/marked.spec.ts
@@ -0,0 +1,52 @@
+import {runfiles} from '@bazel/runfiles';
+import {readFile} from 'fs/promises';
+import {JSDOM} from 'jsdom';
+import {renderEntry} from '../rendering';
+import {getRenderable} from '../processing';
+import {initHighlighter} from '../shiki/shiki';
+import {configureMarkedGlobally} from '../marked/configuration';
+
+describe('markdown to html', () => {
+  const entries = new Map<string, DocumentFragment>();
+  const entries2 = new Map<string, string>();
+
+  beforeAll(async () => {
+    await initHighlighter();
+    await configureMarkedGlobally();
+
+    const entryContent = await readFile(runfiles.resolvePackageRelative('fake-entries.json'), {
+      encoding: 'utf-8',
+    });
+    const entryJson = JSON.parse(entryContent) as any;
+    for (const entry of entryJson.entries) {
+      const renderableJson = getRenderable(entry, '@angular/fakeentry');
+      const fragment = JSDOM.fragment(await renderEntry(renderableJson));
+      entries.set(entry['name'], fragment);
+      entries2.set(entry['name'], await renderEntry(renderableJson));
+    }
+  });
+
+  it('should render description correctly', () => {
+    const afterNextRenderEntry = entries.get('afterNextRender')!;
+    const header = afterNextRenderEntry.querySelector('.docs-reference-header')!;
+    expect(header).toBeDefined();
+    expect(header.outerHTML).not.toContain('```');
+
+    console.log(entries2.get('afterNextRender'));
+    const list = afterNextRenderEntry.querySelector('ul')!;
+    expect(list).toBeDefined();
+
+    // List are rendered
+    expect(list.outerHTML).toContain('<li>');
+
+    // Code blocks are rendered
+    expect(list.outerHTML).toContain('<code>mixedReadWrite</code>');
+  });
+
+  it('should render multiple {@link} blocks', () => {
+    const provideClientHydrationEntry = entries.get('provideClientHydration')!;
+    expect(provideClientHydrationEntry).toBeDefined();
+    const cardItem = provideClientHydrationEntry.querySelector('.docs-reference-card-item ')!;
+    expect(cardItem.innerHTML).not.toContain('@link');
+  });
+});
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.ts b/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.ts
@@ -37,6 +37,7 @@ export const JS_DOC_DESCRIPTION_TAG = 'description';
 
 // Some links are written in the following format: {@link Route}
 const jsDoclinkRegex = /\{\s*@link\s+([^}]+)\s*\}/;
+const jsDoclinkRegexGlobal = /\{\s*@link\s+([^}]+)\s*\}/g;
 
 /** Given an entity with a description, gets the entity augmented with an `htmlDescription`. */
 export function addHtmlDescription<T extends HasDescription & HasModuleName>(
@@ -196,7 +197,7 @@ function convertJsDocExampleToHtmlExample(text: string): string {
 }
 
 function convertLinks(text: string, entry: HasModuleName) {
-  return text.replace(jsDoclinkRegex, (_, link) => {
+  return text.replace(jsDoclinkRegexGlobal, (_, link) => {
     const [symbol, description] = link.split(/\s(.+)/);
     if (symbol && description) {
       // {@link Route Some route with description}
diff --git a/adev/shared-docs/pipeline/guides/testing/list/list.md b/adev/shared-docs/pipeline/guides/testing/list/list.md
@@ -7,4 +7,6 @@
 - Order
 - here
 - matter
-- doesn't
+- doesn't
+- [some link](https://angular.dev)
+- Code block `SomeClass`
diff --git a/adev/shared-docs/pipeline/guides/testing/list/list.spec.ts b/adev/shared-docs/pipeline/guides/testing/list/list.spec.ts
@@ -21,7 +21,16 @@ describe('markdown to html', () => {
 
     const unorderedList = markdownDocument.querySelector('ul');
     expect(unorderedList?.className).toBe('docs-list');
-    expect(unorderedList?.childElementCount).toBe(4);
+    expect(unorderedList?.childElementCount).toBe(6);
     expect(unorderedList?.textContent).toContain('matter');
   });
+
+  it('should render list items', () => {
+    const unorderedList = markdownDocument.querySelector('ul');
+    const linkItem = unorderedList!.children[4];
+    expect(linkItem.outerHTML).toContain('href="https://angular.dev"');
+
+    const codeItem = unorderedList!.children[5];
+    expect(codeItem.outerHTML).toContain('<code>SomeClass</code>');
+  });
 });
