test: add comprehensive unit tests for ChapterMap component #1874
Conversation
- Add complete test coverage for ChapterMap component rendering - Test map initialization with Leaflet configuration - Verify marker creation and clustering functionality - Test popup behavior and content rendering - Cover showLocal prop conditional logic and local view behavior - Test component updates and prop changes - Handle edge cases: empty data, missing geolocation - Ensure accessibility and custom styling works correctly - Mock Leaflet library and related dependencies for isolated testing Resolves #[1805]
Summary by CodeRabbit
""" WalkthroughA new unit test suite for the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/__tests__/unit/components/ChapterMap.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Rajgupta36
PR: OWASP/Nest#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.
frontend/__tests__/unit/components/ChapterMap.test.tsx (1)
Learnt from: Rajgupta36
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.
🔇 Additional comments (9)
frontend/__tests__/unit/components/ChapterMap.test.tsx (9)
1-56: LGTM! Comprehensive and well-structured mock setup.The imports and mock configuration are well-organized. The Leaflet mocks cover all necessary functionality with appropriate chainable methods, and the window.location mocking enables proper navigation testing.
57-103: Well-structured test data and setup.The mock chapter data is comprehensive and realistic, covering all required fields. The beforeEach hook properly clears mocks to prevent test interference.
105-121: Solid rendering tests covering essential scenarios.The tests appropriately verify DOM structure, attributes, and styling, including the important edge case of empty data.
123-162: Comprehensive map initialization testing.The tests thoroughly verify Leaflet map setup, including correct configuration parameters, tile layer addition, and marker cluster group creation. The use of
require()for accessing mocked Leaflet is appropriate.
164-210: Excellent marker testing with good coverage of edge cases.The tests thoroughly verify marker creation, icon configuration, and cluster group integration. The fallback geolocation logic test is particularly valuable for ensuring robustness.
233-258: Comprehensive local view testing with good edge case coverage.The tests thoroughly verify local view behavior, including proper handling of the edge case where showLocal is true but data is empty.
260-275: Good component update testing ensuring proper cleanup.The tests appropriately verify that markers are cleared on data changes and views are updated when props change, which is crucial for preventing memory leaks and ensuring correct behavior.
277-298: Excellent edge case coverage for robustness.The tests effectively verify handling of null/undefined geolocation data and custom styling, which are important for preventing runtime errors and ensuring flexibility.
300-308: Basic accessibility testing is appropriate for this component.The test verifies essential DOM structure for accessibility. While more comprehensive accessibility testing could be beneficial, the current approach is reasonable given the complexity of testing map component accessibility.
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
@RizWaaN3024 thanks for working on these!
They seem to pass fine 👍🏼
However, I noticed that there's this error now in the terminal.
This does not fail the test, but messes up the logs. Could you look into how to get rid of this?
Sure @kasya will work on it and update asap!!! |
…024/Nest into test/chapter-map-unit-tests
|
Hi @kasya |
|
2 participants
Proposed change
Resolves #1805
This PR adds comprehensive unit tests for the
ChapterMapcomponent to ensure all essential functionality is properly tested and validated.Test Coverage Added:
showLocalprop behavior for local vs global viewsTechnical Implementation:
@testing-library/reactfollowing existing project patternsThe tests follow the existing patterns established in the codebase and provide robust coverage for all component functionality, ensuring reliable behavior across different scenarios and prop combinations.
Checklist
make check-testlocally; all checks and tests passed.