(SP: 2) [QA] Q&A Tests & Coverage

[ViktorSvertoka]

Summary

• Added unit and UI tests for Q&A components, hooks, and API routes.
• Increased Q&A coverage with additional edge-case tests.
• Updated Vitest coverage include paths for Q&A.

What’s included

• API tests for /api/questions/[category] with error/empty/category flows.
• Component tests for AccordionList, Pagination, SelectableText, CodeBlock, FloatingExplainButton, HighlightCachedTerms, and AIWordHelper.
• Hook tests for useQaTabs including URL parsing, paging, invalid category, and fetch error handling.
• Coverage config updated to include Q&A paths.
• Added small sanity test for types.ts.

Testing

• npx vitest run "lib/tests/q&a" "components/tests/q&a" --coverage

CLOSES: #207

Summary by CodeRabbit

• Tests

  • Added extensive test coverage for the Q&A area, including accordion lists, AI helper flows, code blocks, selection behavior, pagination, tabs, routes, and related UI components to improve reliability.

• Chores

  • Updated frontend environment example to include a new configurable API key entry.

• Tests

  • Expanded test runner coverage to include Q&A components and API routes.

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	a65637f
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6976835c6be40b000820f2d2
😎 Deploy Preview	https://deploy-preview-208--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 extensive Vitest test suites for Q&A UI components, hooks, and API route, expands Vitest coverage includes, and adds a GROQ_API_KEY entry to frontend/.env.example. Total changes are test additions and a small config/env update.

Changes

Cohort / File(s)	Summary
Q&A Component Tests (UI) frontend/components/tests/q&a/accordion-list.test.tsx, frontend/components/tests/q&a/ai-word-helper.test.tsx, frontend/components/tests/q&a/code-block.test.tsx, frontend/components/tests/q&a/floating-explain-button.test.tsx, frontend/components/tests/q&a/highlight-cached-terms.test.tsx, frontend/components/tests/q&a/pagination.test.tsx, frontend/components/tests/q&a/qa-section.test.tsx, frontend/components/tests/q&a/selectable-text.test.tsx	New comprehensive Vitest suites covering rendering, user interactions, selection flows, clipboard behavior, AI helper states (including rate-limit and retry scenarios), and pagination UI cases.
Q&A Hook & Types Tests frontend/components/tests/q&a/use-qa-tabs.test.tsx, frontend/components/tests/q&a/types.test.ts	Tests for useQaTabs hook (fetching, pagination, category handling, error paths) and a constants test validating supported locales.
API Route Tests frontend/lib/tests/q&a/questions-route.test.ts	Tests for GET /api/questions/[category] covering unknown categories, paginated responses, and DB error handling via mocked query builder.
Config & Env frontend/.env.example, frontend/vitest.config.ts	Adds GROQ_API_KEY= to env example and expands vitest.config.ts coverage.include to include components/q&a/** and app/api/questions/**.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• (SP: 3) [AI] Add AI word helper with Groq integration #200 — Adds AI word helper components and related caching/API behavior that the new AIWordHelper tests exercise.
• feat: add UI tests for CookieBanner and configure vitest for React #132 — Modifies Vitest configuration; overlaps with the vitest.config.ts include changes here.
• (SP: 2) [Frontend] Refactor Q&A Tabs: Extract Logic & Align Layout #129 — Adds/changes Q&A components and tests that share targets with these new test suites.

Suggested reviewers

• AM1007

Poem

🐰 Tests hop in, tidy and spry,
Mocking bugs as they pass by.
Code and assertions stitched with care,
Coverage blooms — a coder's fair. 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding comprehensive tests for Q&A components, hooks, and API routes with coverage setup.
Linked Issues check	✅ Passed	All coding requirements from issue #207 are met: unit/UI tests added for components/hooks/API routes, pagination/tabs/selection/AI helper coverage included, and Vitest coverage paths updated.
Out of Scope Changes check	✅ Passed	All changes are directly related to the objectives: new test files for Q&A features, environment variable addition, and coverage configuration updates are all in scope.

_{✏️ 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: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/vitest.config.ts (1)

15-27: LGTM — coverage scope correctly includes Q&A and quiz sources.
All coverage.include paths exist in the codebase and align with the test suites (9 Q&A tests in components/tests/q&a/, plus quiz and API tests).

Consider using file extensions in glob patterns for clarity and consistency with Vitest best practices: change patterns like 'components/q&a/**' to 'components/q&a/**/*.{ts,tsx}'.

🤖 Fix all issues with AI agents

In `@frontend/.env.example`:
- Around line 98-101: The .env.example file currently ends without a final
newline (after the GROQ_API_KEY= line); add a single trailing newline at
end-of-file so the file ends with a newline character to satisfy dotenv-linter
and avoid the linter warning (edit the file containing RATE_LIMIT_DISABLED and
GROQ_API_KEY to ensure a final blank line).

In `@frontend/components/tests/q`&a/accordion-list.test.tsx:
- Around line 234-307: The CodeBlock test mock uses the wrong prop name: update
the mock default export (the mocked CodeBlock component) to accept and render
the content prop instead of code so it matches the CodeBlock type used in the
test data; change the mock signature from ({ code }) => ... to ({ content }) =>
... and render content inside the <pre data-testid="code-block"> so
expect(screen.getAllByTestId('code-block')) continues to work.
- Around line 94-107: The mock for the HighlightCachedTerms component doesn't
accept or use the cachedTerms prop, so it always renders a button; update the
mock of HighlightCachedTerms to include cachedTerms: Set<string> in its props,
determine if the passed text is cached (e.g.,
cachedTerms.has(text.toLowerCase().trim())), and conditionally render plain text
when not cached and a button (calling onTermClick?.(text)) only when cached;
keep the prop types aligned with the real component and make onTermClick
optional.

In `@frontend/lib/tests/q`&a/questions-route.test.ts:
- Around line 1-38: The test suite currently calls vi.clearAllMocks() in the
beforeEach which only clears call history and can leak mock implementations
between tests; replace vi.clearAllMocks() with vi.resetAllMocks() in the
beforeEach to reset both call history and implementations, and add an afterEach
that calls vi.restoreAllMocks() to restore spied globals like console (refer to
the existing beforeEach block and the vi.clearAllMocks() call, and add afterEach
with vi.restoreAllMocks()).

🧹 Nitpick comments (8)

frontend/components/tests/q&a/code-block.test.tsx (1)

35-48: Restore navigator.clipboard after each test to prevent leakage between test suites.

navigator.clipboard is mocked but never restored, causing the mock to persist across tests and potentially affect other test suites.

Improved cleanup

 // `@vitest-environment` jsdom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, act } from '@testing-library/react';

+let origClipboardDesc: PropertyDescriptor | undefined;
+
 vi.mock('next-themes', () => ({
   useTheme: () => ({ resolvedTheme: 'light' }),
 }));

 vi.mock('prism-react-renderer', () => ({
   Highlight: ({
     code,
     children,
   }: {
     code: string;
     children: (args: {
       className: string;
       style: Record<string, unknown>;
       tokens: Array<Array<{ content: string; types: string[] }>>;
       getLineProps: (args: { line: { content: string }[] }) => Record<string, unknown>;
       getTokenProps: (args: { token: { content: string } }) => Record<string, unknown>;
     }) => unknown;
   }) =>
     children({
       className: 'code',
       style: {},
       tokens: [[{ content: code, types: [] }]],
       getLineProps: () => ({}),
       getTokenProps: ({ token }: { token: { content: string } }) => ({
         children: token.content,
       }),
     }),
   themes: { github: {}, nightOwl: {} },
 }));

 import CodeBlock from '@/components/q&a/CodeBlock';

 describe('CodeBlock', () => {
   beforeEach(() => {
+    origClipboardDesc = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
     vi.useFakeTimers();
     Object.defineProperty(navigator, 'clipboard', {
       value: { writeText: vi.fn().mockResolvedValue(undefined) },
       configurable: true,
     });
   });

   afterEach(() => {
     vi.useRealTimers();
+    if (origClipboardDesc) {
+      Object.defineProperty(navigator, 'clipboard', origClipboardDesc);
+    } else {
+      delete (navigator as any).clipboard;
+    }
+    vi.clearAllMocks();
   });

frontend/components/tests/q&a/qa-section.test.tsx (1)

10-19: Shared mutable state between tests may cause flaky results.

The qaState object is mutated directly in each test (lines 53, 60) without being reset between tests. If tests run in a different order or in parallel, this could lead to unexpected failures.

Consider resetting the state in a beforeEach hook:

♻️ Suggested improvement

+const createQaState = () => ({
+  active: 'git',
+  currentPage: 1,
+  handleCategoryChange: vi.fn(),
+  handlePageChange: vi.fn(),
+  isLoading: false,
+  items: [] as unknown[],
+  localeKey: 'en',
+  totalPages: 0,
+});
+
+let qaState: ReturnType<typeof createQaState>;

 vi.mock('@/components/q&a/useQaTabs', () => ({
   useQaTabs: () => qaState,
 }));
+
+beforeEach(() => {
+  qaState = createQaState();
+});

frontend/components/tests/q&a/pagination.test.tsx (1)

40-55: Consider using Testing Library's built-in helpers for disabled state.

The type assertion pattern works but is verbose. Testing Library provides a cleaner approach.

♻️ Optional simplification

     const prevButton = screen.getByLabelText('previousPage');
-    expect(prevButton instanceof HTMLButtonElement).toBe(true);
-    expect((prevButton as HTMLButtonElement).disabled).toBe(true);
+    expect(prevButton).toBeDisabled();

Note: This requires @testing-library/jest-dom matchers to be set up, which you may already have configured.

frontend/components/tests/q&a/selectable-text.test.tsx (1)

84-121: Consider asserting onSelectionClear is also not called.

For completeness, verify that neither callback is invoked when the selection is outside the container:

♻️ Suggested addition

     fireEvent.mouseUp(wrapper);
     vi.runAllTimers();
 
     expect(onTextSelect).not.toHaveBeenCalled();
+    expect(onSelectionClear).not.toHaveBeenCalled();
   });

frontend/components/tests/q&a/ai-word-helper.test.tsx (2)

127-150: Hardcoded UI strings may cause test brittleness.

The test uses hardcoded strings like "Give it a moment" (line 149), "AI is taking a nap" (line 174), and "I'll try later" (line 210), while other tests use translation keys like 'guest.title' (line 67). This inconsistency suggests the component renders some text without the translation function.

If these strings change in the component, the tests will break. Consider verifying whether these should use translation keys for consistency, or add a comment noting this is intentional direct rendering.

---

218-255: Potential for uninitialized variable if test fails early.

The resolveJson variable is declared but only assigned inside the Promise callback. If the test fails before the promise executor runs, resolveJson will be undefined when called on line 248.

♻️ Safer pattern

   it('renders loading state while fetching', async () => {
-    let resolveJson: (value: unknown) => void;
+    let resolveJson: ((value: unknown) => void) | undefined;

     // ... rest of setup ...

-    resolveJson?.({
+    if (resolveJson) {
+      resolveJson({
         en: 'Delayed',
         uk: 'Затримка',
         pl: 'Opóźnienie',
       });
+    }

Alternatively, using a deferred pattern with explicit initialization would make the intent clearer.

frontend/components/tests/q&a/accordion-list.test.tsx (2)

79-92: Consider adding onClose trigger to enable close flow testing.

The mock ignores the onClose callback, which the actual component uses (per AccordionList.tsx line 407). Without a trigger for onClose, tests cannot verify that handleModalClose properly resets state and refreshes cached terms.

♻️ Suggested enhancement

 vi.mock('@/components/q&a/AIWordHelper', () => ({
   __esModule: true,
   default: ({
     term,
     isOpen,
+    onClose,
   }: {
     term: string;
     isOpen: boolean;
+    onClose: () => void;
   }) => (
     <div data-testid="ai-helper">
       {isOpen ? `open:${term}` : 'closed'}
+      {isOpen && (
+        <button type="button" onClick={onClose}>
+          close-modal
+        </button>
+      )}
     </div>
   ),
 }));

---

112-116: Consider adding vi.clearAllMocks() to reset mock state between tests.

The beforeEach sets the return value but doesn't clear call history. Adding vi.clearAllMocks() ensures clean slate for assertions that check mock invocations.

♻️ Suggested enhancement

 describe('AccordionList', () => {
   beforeEach(() => {
+    vi.clearAllMocks();
     getCachedTermsMock.mockReturnValue([]);
   });