fix changelog heading slugs (#58455)

Author: rsese

src/graphql/components/Changelog.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+import GithubSlugger from 'github-slugger'
 
 import { HeadingLink } from '@/frame/components/article/HeadingLink'
 import { ChangelogItemT } from './types'
@@ -10,14 +11,19 @@ type Props = {
 }
 
 export function Changelog({ changelogItems }: Props) {
-  const changes = changelogItems.map((item) => {
+  const slugger = new GithubSlugger()
+
+  const changes = changelogItems.map((item, index) => {
     const heading = `Schema changes for ${item.date}`
+    const slug = slugger.slug(heading)
 
     return (
-      <div key={item.date}>
-        <HeadingLink as="h2">{heading}</HeadingLink>
-        {(item.schemaChanges || []).map((change, index) => (
-          <React.Fragment key={index}>
+      <div key={`${item.date}-${index}`}>
+        <HeadingLink as="h2" slug={slug}>
+          {heading}
+        </HeadingLink>
+        {(item.schemaChanges || []).map((change, changeIndex) => (
+          <React.Fragment key={changeIndex}>
             <p>{change.title}</p>
             <ul>
               {change.changes.map((changeItem) => (
@@ -26,8 +32,8 @@ export function Changelog({ changelogItems }: Props) {
             </ul>
           </React.Fragment>
         ))}
-        {(item.previewChanges || []).map((change, index) => (
-          <React.Fragment key={index}>
+        {(item.previewChanges || []).map((change, changeIndex) => (
+          <React.Fragment key={changeIndex}>
             <p>{change.title}</p>
             <ul>
               {change.changes.map((changeItem) => (
@@ -36,8 +42,8 @@ export function Changelog({ changelogItems }: Props) {
             </ul>
           </React.Fragment>
         ))}
-        {(item.upcomingChanges || []).map((change, index) => (
-          <React.Fragment key={index}>
+        {(item.upcomingChanges || []).map((change, changeIndex) => (
+          <React.Fragment key={changeIndex}>
             <p>{change.title}</p>
             {change.changes.map((changeItem) => (
               <li key={changeItem} dangerouslySetInnerHTML={{ __html: changeItem }} />

src/graphql/tests/server-rendering.ts

@@ -23,6 +23,26 @@ describe('server rendering certain GraphQL pages', () => {
     expect.assertions(hrefs.length + 1)
   })
 
+  test('minitoc hrefs on changelog match and verify slugger behavior', async () => {
+    // Testing the minitoc links match the heading ids but also validating
+    // slugger behavior see docs-engineering/issues#5792.
+    // Little funky because we need to make 2 requests to the page to test
+    // the problem behavior where slugger state accumulates across
+    // requests, it won't fail the first time around.
+    await getDOM('/graphql/overview/changelog')
+    const $ = await getDOM('/graphql/overview/changelog')
+    const links = $('[data-testid="minitoc"] a[href]')
+    const hrefs = links.map((i, link) => $(link).attr('href')).get()
+    const headings = $('#article-contents h2')
+    const headingIds = headings.map((i, heading) => `#${$(heading).attr('id')}`).get()
+
+    expect(hrefs.length).toBe(headingIds.length)
+
+    for (let i = 0; i < hrefs.length; i++) {
+      expect(hrefs[i]).toBe(headingIds[i])
+    }
+  })
+
   const autogeneratedPages = pageList.filter(
     (page) => page.autogenerated === 'graphql' && page.relativePath.includes('reference'),
   )