fix: lowercase hash link IDs and add tests for Readme component

- Lowercase hash link IDs to match heading slugs (addresses reviewer feedback about case sensitivity)
- Add component tests for Readme.vue hash link click handling
- Add utility tests for scrollToAnchor function

This ensures that links like #Installation will correctly scroll to headings with id="user-content-installation" since the slugify function generates lowercase IDs.

Co-Authored-By: Claude (claude-opus-4-5) <noreply@anthropic.com>

Author: niveshdandyan

app/components/Readme.vue

@@ -53,7 +53,8 @@ function handleClick(event: MouseEvent) {
   // Handle hash links for internal README navigation (e.g., Table of Contents)
   if (href.startsWith('#')) {
     event.preventDefault()
-    const id = href.slice(1) // Remove the leading '#'
+    // Lowercase the ID to match heading slugs (generated with toLowerCase in slugify)
+    const id = href.slice(1).toLowerCase()
     scrollToAnchor(id)
     return
   }

test/nuxt/components/Readme.spec.ts

@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import Readme from '~/components/Readme.vue'
+
+// Mock scrollToAnchor
+vi.mock('~/utils/scrollToAnchor', () => ({
+  scrollToAnchor: vi.fn(),
+}))
+
+// Import the mocked function for assertions
+import { scrollToAnchor } from '~/utils/scrollToAnchor'
+
+describe('Readme', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('rendering', () => {
+    it('renders the provided HTML content', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<p>Hello world</p>' },
+      })
+      expect(component.html()).toContain('Hello world')
+    })
+
+    it('renders as an article element with readme class', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<p>Content</p>' },
+      })
+      const article = component.find('article.readme')
+      expect(article.exists()).toBe(true)
+    })
+  })
+
+  describe('hash link click handling', () => {
+    it('intercepts hash link clicks and calls scrollToAnchor', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="#installation">Installation</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).toHaveBeenCalledWith('installation')
+    })
+
+    it('lowercases the ID when calling scrollToAnchor', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="#Installation">Installation</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).toHaveBeenCalledWith('installation')
+    })
+
+    it('handles user-content prefixed hash links', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="#user-content-getting-started">Getting Started</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).toHaveBeenCalledWith('user-content-getting-started')
+    })
+
+    it('handles mixed case user-content hash links', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="#User-Content-API">API</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).toHaveBeenCalledWith('user-content-api')
+    })
+  })
+
+  describe('non-hash link handling', () => {
+    it('does not intercept external links', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="https://example.com">External</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).not.toHaveBeenCalled()
+    })
+
+    it('does not intercept relative links', async () => {
+      const component = await mountSuspended(Readme, {
+        props: { html: '<a href="./docs/readme.md">Docs</a>' },
+      })
+
+      const link = component.find('a')
+      await link.trigger('click')
+
+      expect(scrollToAnchor).not.toHaveBeenCalled()
+    })
+  })
+})

test/nuxt/utils/scrollToAnchor.spec.ts

@@ -0,0 +1,111 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { scrollToAnchor } from '~/utils/scrollToAnchor'
+
+describe('scrollToAnchor', () => {
+  let scrollToSpy: ReturnType<typeof vi.fn>
+  let replaceStateSpy: ReturnType<typeof vi.fn>
+  let testElement: HTMLElement
+
+  beforeEach(() => {
+    // Spy on window.scrollTo
+    scrollToSpy = vi.fn()
+    vi.stubGlobal('scrollTo', scrollToSpy)
+
+    // Spy on history.replaceState
+    replaceStateSpy = vi.spyOn(history, 'replaceState').mockImplementation(() => {})
+
+    // Create a test element
+    testElement = document.createElement('div')
+    testElement.id = 'test-section'
+    document.body.appendChild(testElement)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+    // Clean up test element
+    if (testElement && testElement.parentNode) {
+      testElement.parentNode.removeChild(testElement)
+    }
+  })
+
+  describe('with custom scrollFn', () => {
+    it('calls the provided scroll function with the id', () => {
+      const scrollFn = vi.fn()
+      scrollToAnchor('test-section', { scrollFn })
+
+      expect(scrollFn).toHaveBeenCalledWith('test-section')
+      expect(scrollToSpy).not.toHaveBeenCalled()
+    })
+
+    it('does not update URL when using custom scrollFn', () => {
+      const scrollFn = vi.fn()
+      scrollToAnchor('test-section', { scrollFn })
+
+      expect(replaceStateSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('with default scroll behavior', () => {
+    it('does nothing when element is not found', () => {
+      scrollToAnchor('non-existent-id')
+
+      expect(scrollToSpy).not.toHaveBeenCalled()
+      expect(replaceStateSpy).not.toHaveBeenCalled()
+    })
+
+    it('scrolls to element with smooth behavior', () => {
+      scrollToAnchor('test-section')
+
+      expect(scrollToSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          behavior: 'smooth',
+        }),
+      )
+    })
+
+    it('calculates scroll position with header offset', () => {
+      scrollToAnchor('test-section')
+
+      // Verify scrollTo was called with a top property (exact value depends on element position)
+      expect(scrollToSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          top: expect.any(Number),
+        }),
+      )
+    })
+
+    it('updates URL hash by default', () => {
+      scrollToAnchor('test-section')
+
+      expect(replaceStateSpy).toHaveBeenCalledWith(null, '', '#test-section')
+    })
+
+    it('does not update URL when updateUrl is false', () => {
+      scrollToAnchor('test-section', { updateUrl: false })
+
+      expect(scrollToSpy).toHaveBeenCalled()
+      expect(replaceStateSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles empty id string without errors', () => {
+      expect(() => scrollToAnchor('')).not.toThrow()
+      expect(scrollToSpy).not.toHaveBeenCalled()
+    })
+
+    it('handles id with user-content prefix (GitHub-style anchors)', () => {
+      const userContentElement = document.createElement('div')
+      userContentElement.id = 'user-content-installation'
+      document.body.appendChild(userContentElement)
+
+      scrollToAnchor('user-content-installation')
+
+      expect(scrollToSpy).toHaveBeenCalled()
+      expect(replaceStateSpy).toHaveBeenCalledWith(null, '', '#user-content-installation')
+
+      document.body.removeChild(userContentElement)
+    })
+  })
+})