Add unit tests for all js components

[Stivaros]

Add Missing Test Coverage

Overview

While reviewing the test coverage of the codebase, Cursor identified several components and utilities that would benefit from additional unit tests. The current E2E test suite provides good integration coverage, but additional unit tests would improve maintainability and help catch issues earlier in development.

Components Requiring Tests

High Priority

BlogPostTemplate (src/templates/blog-post.js)

• Test post content rendering
• Test navigation links (previous/next posts)
• Test article structure
• Test Bio footer inclusion
• Test handling of missing navigation links

BlogIndex (src/pages/index.js)

• Test post list rendering
• Test post metadata display
• Test empty state handling
• Test Bio inclusion
• Test post excerpt/description fallback logic

Medium Priority

Typography Utils (src/utils/typography.js)

• Test theme override application
• Test rhythm calculations
• Test scale calculations
• Test development mode injection

404 Page (src/pages/404.js)

• Test basic page rendering
• Test site title inclusion
• Test error message display

Implementation Notes

• All new tests should follow the existing pattern of using @testing-library/react
• Mock data should be structured similarly to existing test files
• Consider extracting common test data to shared fixtures
• Remember to test both success and error states where applicable

Out of Scope

The following files don't require additional unit tests as they're either configuration files or are covered by integration tests:

• gatsby-node.js
• gatsby-config.js
• gatsby-browser.js

Additional Context

The E2E test suite currently provides good coverage for the SEO component, which is traditionally difficult to unit test due to Gatsby's Head API. This issue focuses on complementing that coverage with unit tests for other components.