exclude headings from minitoc that don't have links (github#32407)

kamiel28 · Nov 7, 2022 · 94b33ba · 94b33ba
1 parent 84a9475
commit 94b33ba
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/lib/get-mini-toc-items.js b/lib/get-mini-toc-items.js
@@ -35,6 +35,14 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
       // Capture the anchor tag nested within the header, get its href and remove it
       const anchor = $('a.doctocat-link', item)
       const href = anchor.attr('href')
+      if (!href) {
+        // Can happen if the, for example, `<h2>` tag was put there
+        // manually with HTML into the Markdown content. Then it wouldn't
+        // be rendered with an expected `<a class="doctocat-link" href="#..."`
+        // link in front of it.
+        // The `return null` will be filtered after the `.map()`
+        return null
+      }
       anchor.remove()
 
       // remove any <strong> tags but leave content
@@ -52,6 +60,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
 
       return { contents, headingLevel, platform }
     })
+    .filter(Boolean)
     .map((item) => {
       // set the indentation level for each item based on the most important
       // heading level in the current article

diff --git a/tests/unit/mini-toc-items.js b/tests/unit/mini-toc-items.js
@@ -1,10 +1,24 @@
 import { expect } from '@jest/globals'
 import getMiniTocItems from '../../lib/get-mini-toc-items'
 
+// The getMiniTocItems() function requires that every <h2> and <h3>
+// contains a...
+//
+//   <a class="doctocat-link">
+//
+// tag within the tag. Having to manually put that into every HTML
+// snippet in each test is tediuous so this function makes it convenient.
+function injectDoctocatLinks(html) {
+  let counter = 0
+  return html.replace(/<h\d>/g, (m) => {
+    return `${m}\n<a href="#section${++counter}" class="doctocat-link">🔗</a>\n`
+  })
+}
+
 describe('mini toc items', () => {
   // Mock scenario from: /en/rest/reference/activity
   test('basic nested structure is created', async () => {
-    const html = `
+    const html = injectDoctocatLinks(`
       <body>
         <h1>Test</h1>
         <h2>Section 1</h2>
@@ -14,8 +28,9 @@ describe('mini toc items', () => {
         <h2>Section 2</h2>
         <h3>Section 2 A</h3>
       </body>
-    `
+    `)
     const tocItems = getMiniTocItems(html, 3)
+    expect(tocItems.length).toBe(2)
     expect(tocItems[0].items.length).toBe(3)
   })
 
@@ -31,15 +46,15 @@ describe('mini toc items', () => {
    *     3
    */
   test('creates toc that starts with lower importance headers', async () => {
-    const html = `
+    const html = injectDoctocatLinks(`
       <h1>Test</h1>
       <h3>Section 1 A</h3>
       <h3>Section 1 B</h3>
       <h2>Section 2</h2>
       <h3>Section 2 A</h3>
       <h2>Section 3</h2>
       <h3>Section 3 A</h3>
-    `
+    `)
     const tocItems = getMiniTocItems(html, 3)
     expect(tocItems.length).toBe(4)
     expect(tocItems[3].items.length).toBe(1)
@@ -56,26 +71,26 @@ describe('mini toc items', () => {
 
   // Mock scenario from: /en/repositories/creating-and-managing-repositories/about-repositories
   test('creates flat toc', async () => {
-    const html = `
+    const html = injectDoctocatLinks(`
       <h1>Test</h1>
       <h2>Section 1</h2>
       <h2>Section 2</h2>
-    `
+    `)
     const tocItems = getMiniTocItems(html, 3)
     expect(tocItems.length).toBe(2)
     expect(tocItems[0].items).toBeUndefined()
   })
 
   test('handles deeply nested toc', async () => {
-    const html = `
+    const html = injectDoctocatLinks(`
       <h1>Test</h1>
       <h2>Section 1</h2>
       <h2>Section 2</h2>
       <h3>Section 2 A</h3>
       <h4>Section 2 A 1</h4>
       <h5>Section 2 A 1 a</h5>
       <h2>Section 3</h2>
-    `
+    `)
     const tocItems = getMiniTocItems(html, 5)
     expect(tocItems.length).toBe(3)
     expect(tocItems[1].items[0].items[0].items.length).toBe(1)