test: add ContributionHeatmap component unit tests #2667
Conversation
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughAdds a comprehensive unit test suite for the ContributionHeatmap component, exercising rendering paths, theme toggles, canvas interactions, accessibility, and mocked dependencies (Apollo useQuery, Next.js router, Next/Image, githubHeatmap helpers). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (4)📓 Common learnings📚 Learning: 2025-09-17T02:42:41.928ZApplied to files:
📚 Learning: 2025-11-17T16:47:05.560ZApplied to files:
📚 Learning: 2025-07-12T17:36:57.255ZApplied to files:
🧬 Code graph analysis (1)frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
🔇 Additional comments (4)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/__tests__/unit/pages/createProgram.test.tsx:70-86
Timestamp: 2025-07-12T17:36:57.255Z
Learning: When testing React page components that use mocked form components, validation logic should be tested at the form component level, not the page level. Page-level tests should focus on authentication, role checking, submission handling, and navigation logic.
📚 Learning: 2025-07-12T17:36:57.255Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/__tests__/unit/pages/createProgram.test.tsx:70-86
Timestamp: 2025-07-12T17:36:57.255Z
Learning: When testing React page components that use mocked form components, validation logic should be tested at the form component level, not the page level. Page-level tests should focus on authentication, role checking, submission handling, and navigation logic.
Applied to files:
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
🧬 Code graph analysis (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
frontend/__tests__/unit/data/mockUserDetails.ts (1)
mockUserDetailsData(1-83)frontend/src/utils/helpers/githubHeatmap.ts (2)
drawContributions(288-334)fetchHeatmapData(40-89)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (1)
491-537: Consider verifying fetchHeatmapData receives the correct username.The integration tests verify that
drawContributionsreceives the username from route params, but they don't confirm thatfetchHeatmapDatais called with that username. Adding this assertion would complete the integration test coverage by validating the full data flow:useParams→fetchHeatmapData('test-user')→drawContributions.Example addition to the test on lines 514-536:
await waitFor(() => { expect(drawContributions).toHaveBeenCalled() const callArgs = (drawContributions as jest.Mock).mock.calls[0][1] expect(callArgs.data).toBeDefined() expect(callArgs.username).toBe('test-user') }) + + expect(fetchHeatmapData).toHaveBeenCalledWith('test-user') })
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-12T17:36:57.255Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/__tests__/unit/pages/createProgram.test.tsx:70-86
Timestamp: 2025-07-12T17:36:57.255Z
Learning: When testing React page components that use mocked form components, validation logic should be tested at the form component level, not the page level. Page-level tests should focus on authentication, role checking, submission handling, and navigation logic.
Applied to files:
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
🧬 Code graph analysis (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
frontend/__tests__/unit/data/mockUserDetails.ts (1)
mockUserDetailsData(1-83)frontend/src/utils/helpers/githubHeatmap.ts (2)
drawContributions(288-334)fetchHeatmapData(40-89)
🔇 Additional comments (2)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
44-98: Canvas stub cleanup properly implemented.The canvas API mocks now correctly store original methods and restore them in
afterAllwithconfigurable: trueandwritable: true, preventing conflicts with other test suites. Well done addressing the previous review feedback!
100-538: Comprehensive test coverage with excellent organization.The test suite thoroughly covers all requirements from issue #2630:
- ✓ Rendering with minimal props
- ✓ Conditional rendering logic
- ✓ Prop-based behavior (theme variations)
- ✓ State changes and transitions
- ✓ Default values and fallbacks
- ✓ Text and accessibility attributes
- ✓ Edge cases and malformed data
- ✓ DOM structure and styling
- ✓ Integration with drawContributions
The organization into focused describe blocks and consistent test patterns make this suite easy to maintain and extend.
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
I can see there are 3 new issues introduced that were caught by Sonar, all related to using String.raw.
Please address these before next review, as well as Code Rabbit comments 👌🏼
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (1)
518-540: Tighten assertions ondrawContributionsdata payloadThe “calls drawContributions with correct data object” test currently only checks that
callArgs.datais defined andusernamematches'test-user'. Since you already controlmockData, you can assert more strongly that the heatmap payload wired intodrawContributionsmatches whatfetchHeatmapDatareturned.For example:
- await waitFor(() => { - expect(drawContributions).toHaveBeenCalled() - const callArgs = (drawContributions as jest.Mock).mock.calls[0][1] - expect(callArgs.data).toBeDefined() - expect(callArgs.username).toBe('test-user') - }) + await waitFor(() => { + expect(drawContributions).toHaveBeenCalled() + const callArgs = (drawContributions as jest.Mock).mock.calls[0][1] + expect(callArgs.data).toEqual(mockData) // ensure contributions/years are passed through + expect(callArgs.username).toBe('test-user') + })This gives you stronger regression protection on the integration between
fetchHeatmapData, the page, anddrawContributionswithout adding much noise.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-09-17T02:42:41.928Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.
Applied to files:
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
📚 Learning: 2025-07-12T17:36:57.255Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/__tests__/unit/pages/createProgram.test.tsx:70-86
Timestamp: 2025-07-12T17:36:57.255Z
Learning: When testing React page components that use mocked form components, validation logic should be tested at the form component level, not the page level. Page-level tests should focus on authentication, role checking, submission handling, and navigation logic.
Applied to files:
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
📚 Learning: 2025-11-17T16:47:05.560Z
Learnt from: anurag2787
Repo: OWASP/Nest PR: 2671
File: frontend/__tests__/unit/components/MultiSearch.test.tsx:427-427
Timestamp: 2025-11-17T16:47:05.560Z
Learning: In the frontend test files for the OWASP/Nest repository, `expect(true).toBe(true)` no-op assertions may be intentionally added as workarounds when ESLint rule jest/expect-expect doesn't detect expectations inside helper functions or waitFor callbacks. These can be resolved by configuring the ESLint rule's assertFunctionNames option to recognize custom assertion helpers instead of flagging them as redundant.
Applied to files:
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
🧬 Code graph analysis (1)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
frontend/__tests__/unit/data/mockUserDetails.ts (1)
mockUserDetailsData(1-83)frontend/src/utils/helpers/githubHeatmap.ts (2)
drawContributions(288-334)fetchHeatmapData(40-89)
🔇 Additional comments (2)
frontend/__tests__/unit/components/ContributionHeatmap.test.tsx (2)
1-42: Dependency mocking setup looks solid and focusedThe way Apollo, Next navigation,
githubHeatmap,next/image, andnext-themesare mocked keepsUserDetailsPageisolated while still letting you assert on real DOM props (e.g.,src/alt) and theme behavior viacurrentTheme. This is a clean, idiomatic setup for this repo’s testing style.
44-98: Canvas stubbing now safely restores global stateCapturing the original
HTMLCanvasElement.prototype.getContext/toDataURL, defining configurable/writable stubs inbeforeAll, and restoring the originals inafterAllavoids leaking canvas mocks into other suites while still givingdrawContributionsa usable environment. This resolves the prior global pollution concern without overcomplicating the setup.
|
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
@SiddharthJiyani Thanks for working on this... but this PR actually does not test the ContributionHeatmap component at all 👀 . The test file ContributionHeatmap.test.tsx tests UserDetailsPage, not the ContributionHeatmap component.
The coverage for the component is at 0% for all columns:
You need to work on that specific component tests.
My apologies, I'll work on it. |
3 participants
Proposed change
This PR adds comprehensive unit tests for the ContributionHeatmap component to ensure expected behavior, edge case handling, and rendering logic.
Test Coverage (24 test cases):
Results:
Checklist
make check-testlocally; all checks and tests passed.