feat(Blog)

[KomrakovaAnna]

Description

Added tests
Added fix for the image of the last added post on the blog page

Summary by CodeRabbit

• UI Improvements

  • Updated blog filters layout: adjusted spacing, repositioned featured post badge, and improved vertical alignment for clearer visual hierarchy.

• Tests

  • Added extensive unit and integration tests covering blog listing, filters, search, navigation, cards, and related API routes to improve reliability.

• Chores

  • Test tooling and config updated to support new test suites and DOM matchers for improved developer testing experience.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	f0144a3
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69779acb374b350008f48d62
😎 Deploy Preview	https://deploy-preview-216--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds broad Vitest test coverage for blog UI and API routes and a minor BlogFilters layout change that repositions the category badge and adjusts featured post padding/vertical alignment.

Changes

Cohort / File(s)	Summary
Blog component tests frontend/components/tests/blog/blog-card.test.tsx, frontend/components/tests/blog/blog-category-grid.test.tsx, frontend/components/tests/blog/blog-category-links.test.tsx, frontend/components/tests/blog/blog-grid.test.tsx, frontend/components/tests/blog/blog-header-search.test.tsx, frontend/components/tests/blog/blog-nav-links.test.tsx	Adds new unit/integration tests covering rendering, i18n, routing, search/filter behaviors, and interactions (e.g., author selection, router push). Mocks external deps (next-intl, routing, Image/Link, client fetch).
BlogFilters tests frontend/components/tests/blog/blog-filters.test.tsx	Adds comprehensive tests for search- and author-based filtering, mocking navigation, translations, fetch, and a mocked BlogGrid to assert filtered results and async fetch behavior.
BlogFilters layout change frontend/components/blog/BlogFilters.tsx	Small UI restructure: container margin adjusted (mt-8 → mt-4), featured post wrapper made relative with increased top padding, category badge moved to absolute top-left, and title/excerpt wrapped in a vertical-aligning inner div.
API route tests frontend/lib/tests/blog/blog-author-route.test.ts, frontend/lib/tests/blog/blog-search-route.test.ts	New tests for /api/blog-author and /api/blog-search verifying input validation, fetch invocation, and response payloads.
Test infra & config frontend/package.json, frontend/tsconfig.json, frontend/vitest.config.ts, frontend/vitest.setup.ts	Adds test scripts (test:blog, test:blog:coverage), adds @testing-library/jest-dom devDependency, includes Vitest/Jest-Dom types in tsconfig, and registers a vitest setup file importing jest-dom matchers.

Sequence Diagram(s)

(omitted — changes are primarily tests and a minor UI layout tweak that do not introduce new multi-component control flow requiring visualization)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Possibly related PRs

• feat: add UI tests for CookieBanner and configure vitest for React #132 — Related test configuration and vitest setup changes.
• Sanity #79 — Overlaps with BlogFilters modifications (types/search/tag logic).
• Sanity #145 — Related BlogFilters restructuring and prop/behavior changes.

Suggested labels

testing, enhancement

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐇 I hopped through tests, one by one I wrote,
badges shifted, fixtures set afloat,
Vitest and jest-dom help assertions sing,
posts filtered neat — what joy this brings! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'feat(Blog)' is overly vague and generic. It fails to describe the specific changes in the pull request, such as the layout fix for the featured post image, test additions, or the nature of improvements made.	Revise the title to be more descriptive, such as 'feat(Blog): Fix featured post layout and add comprehensive test suite' to clearly communicate the main changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/components/tests/blog/blog-grid.test.tsx`:
- Around line 2-9: The test calls vi.mock(...) but never imports vi from vitest,
causing a runtime error; add the missing import (import { vi } from 'vitest')
alongside the existing describe, it, expect import or as a separate import at
the top of the test file so vi.mock used for mocking next-intl/useTranslations
works correctly with BlogGrid and Post-related tests.

🧹 Nitpick comments (6)

frontend/lib/tests/blog/blog-search-route.test.ts (1)

19-33: Consider adding more test cases for better coverage.

The current test validates the happy path, but consider adding tests for:

• Missing or invalid locale parameter
• Empty search results
• Error handling when the fetch fails

frontend/components/tests/blog/blog-nav-links.test.tsx (3)

6-12: Consider cleaning up the mock between tests.

The fetchMock is defined at module scope without a reset in afterEach. If additional tests are added to this suite, stale mock state could cause flaky tests.

Suggested improvement

+import { describe, it, expect, vi, afterEach } from 'vitest';
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { BlogNavLinks } from '@/components/blog/BlogNavLinks';

 const fetchMock = vi.fn();

+afterEach(() => {
+  fetchMock.mockReset();
+});
+
 vi.mock('@/client', () => ({

---

27-29: Type signature of cn mock may cause issues with non-string arguments.

The real cn utility (typically using clsx) accepts various argument types including booleans, objects, and arrays. The current mock only handles strings, which could mask bugs if tests evolve to pass conditional class arguments.

More robust mock

 vi.mock('@/lib/utils', () => ({
-  cn: (...args: string[]) => args.filter(Boolean).join(' '),
+  cn: (...args: unknown[]) => args.flat().filter(Boolean).join(' '),
 }));

---

31-47: Test coverage is limited to the happy path.

The current test validates rendering and active state marking, which is good. Consider expanding coverage for edge cases:

• Empty categories array (component returns null)
• Error handling when fetch fails
• Non-blog pathname (items should not be active)
• onNavigate callback invocation

frontend/components/tests/blog/blog-filters.test.tsx (2)

43-52: __esModule: true is unnecessary for Vitest mocks.

This is a legacy pattern from Jest/Babel ES module interop. Vitest handles ES modules natively, so this property can be removed.

Simplified mock

 vi.mock('@/components/blog/BlogGrid', () => ({
-  __esModule: true,
   default: ({ posts }: { posts: Post[] }) => (
     <ul data-testid="blog-grid">
       {posts.map(post => (
         <li key={post._id}>{post.title}</li>
       ))}
     </ul>
   ),
 }));

---

118-122: Fetch mock response is incomplete and may not match actual Response interface.

The mocked response only includes ok and json(), but fetch returns a full Response object. If the component accesses other properties (e.g., status, headers), tests could behave differently than production.

More complete mock response

     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,
+      status: 200,
       json: async () => authorPayload,
-    });
+    } as Partial<Response>);
-    vi.stubGlobal('fetch', fetchMock as typeof fetch);
+    vi.stubGlobal('fetch', fetchMock);

[KomrakovaAnna]

changed title