chore: increase code coverage by adding more tests (#259)

This PR increases the code coverage of the **theme.js** file by adding a
snapshot test for the compiled theme object's value.

theme/src/components/home-navigation.spec.js

@@ -1,32 +1,70 @@
 import React from 'react'
-import renderer from 'react-test-renderer'
-
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import HomeNavigation from './home-navigation'
 import useSiteMetadata from '../hooks/use-site-metadata'
 
 jest.mock('../hooks/use-site-metadata')
 
 const mockSiteMetadata = {
   widgets: {
-    github: {
-      widgetDataSource: 'https://fake-api.chrisvogt.me/social/github'
-    },
-    goodreads: {
-      widgetDataSource: 'https://fake-api.chrisvogt.me/social/goodreads'
-    },
-    instagram: {
-      widgetDataSource: 'https://fake-api.chrisvogt.me/social/instagram'
-    },
-    spotify: {
-      widgetDataSource: 'https://fake-api.chrisvogt.me/social/spotify'
-    }
+    github: { widgetDataSource: 'https://fake-api.chrisvogt.me/social/github' },
+    goodreads: { widgetDataSource: 'https://fake-api.chrisvogt.me/social/goodreads' },
+    instagram: { widgetDataSource: 'https://fake-api.chrisvogt.me/social/instagram' },
+    spotify: { widgetDataSource: 'https://fake-api.chrisvogt.me/social/spotify' }
   }
 }
 
 describe('HomeNavigation', () => {
-  useSiteMetadata.mockImplementation(() => mockSiteMetadata)
-  it('matches the snapshot', () => {
-    const tree = renderer.create(<HomeNavigation />).toJSON()
-    expect(tree).toMatchSnapshot()
+  beforeEach(() => {
+    useSiteMetadata.mockImplementation(() => mockSiteMetadata)
+  })
+
+  it('renders all links when all widgets are enabled', () => {
+    render(<HomeNavigation />)
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Latest Posts')).toBeInTheDocument()
+    expect(screen.getByText('Instagram')).toBeInTheDocument()
+    expect(screen.getByText('GitHub')).toBeInTheDocument()
+    expect(screen.getByText('Goodreads')).toBeInTheDocument()
+    expect(screen.getByText('Spotify')).toBeInTheDocument()
+  })
+
+  it('renders only mandatory links when no widgets are enabled', () => {
+    useSiteMetadata.mockImplementation(() => ({ widgets: {} }))
+    render(<HomeNavigation />)
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Latest Posts')).toBeInTheDocument()
+    expect(screen.queryByText('Instagram')).not.toBeInTheDocument()
+    expect(screen.queryByText('GitHub')).not.toBeInTheDocument()
+    expect(screen.queryByText('Goodreads')).not.toBeInTheDocument()
+    expect(screen.queryByText('Spotify')).not.toBeInTheDocument()
+  })
+
+  it('highlights the active section on scroll', () => {
+    render(<HomeNavigation />)
+
+    const instagramSection = document.createElement('div')
+    instagramSection.id = 'instagram'
+    document.body.appendChild(instagramSection)
+    instagramSection.getBoundingClientRect = jest.fn(() => ({
+      top: window.innerHeight / 2 - 1 // Simulate it being in view
+    }))
+
+    fireEvent.scroll(window)
+    expect(screen.getByText('Instagram').classList).toContain('active')
+  })
+
+  it('does not break when an invalid icon is provided', () => {
+    useSiteMetadata.mockImplementation(() => ({ widgets: {} }))
+    render(<HomeNavigation />)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument() // No icons should render
+  })
+
+  it('renders the correct aria-label for navigation', () => {
+    render(<HomeNavigation />)
+    const nav = document.querySelector('nav[aria-label="On-page navigation"]')
+    expect(nav).not.toBeNull()
+    expect(nav.getAttribute('aria-label')).toBe('On-page navigation')
   })
 })