Refactor src/components/UserPortal/* from Jest to Vitest #2982
Conversation
…tal-jest-to-vitest
…dd missing mutation in orginizationCard_
…ser tests migrated from jest to vitest
…barorg tests migrated from jest to vitest
WalkthroughThis pull request focuses on refactoring multiple test files within the Changes
Assessment against linked issues
Possibly related issues
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #2982 +/- ##
=====================================================
+ Coverage 38.68% 88.96% +50.27%
=====================================================
Files 299 320 +21
Lines 7427 8290 +863
Branches 1624 1869 +245
=====================================================
+ Hits 2873 7375 +4502
+ Misses 4337 692 -3645
- Partials 217 223 +6 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/UserPortal/PostCard/PostCard.spec.tsx (2)
723-723:testremains for comment-liking scenario.
If desired, rename toitto keep consistency, but not strictly required.
810-810: Same note as above.
Renaming toitwould unify test function naming for clarity.src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx (1)
191-197: LGTM: Correct migration of mocks to VitestThe migration from Jest to Vitest mocking is implemented correctly.
Consider adding type safety to the mock implementation:
- value: vi.fn().mockImplementation((query) => ({ + value: vi.fn().mockImplementation((query: string) => ({Also applies to: 202-210
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
src/components/UserPortal/ChatRoom/ChatRoom.spec.tsx(8 hunks)src/components/UserPortal/ChatRoom/ChatRoom.tsx(1 hunks)src/components/UserPortal/CommentCard/CommentCard.spec.tsx(6 hunks)src/components/UserPortal/ContactCard/ContactCard.spec.tsx(5 hunks)src/components/UserPortal/CreateDirectChat/CreateDirectChat.spec.tsx(3 hunks)src/components/UserPortal/CreateGroupChat/CreateGroupChat.spec.tsx(4 hunks)src/components/UserPortal/DonationCard/DonationCard.spec.tsx(2 hunks)src/components/UserPortal/EventCard/EventCard.spec.tsx(4 hunks)src/components/UserPortal/OrganizationCard/OrganizationCard.spec.tsx(8 hunks)src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx(13 hunks)src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx(4 hunks)src/components/UserPortal/PeopleCard/PeopleCard.spec.tsx(3 hunks)src/components/UserPortal/PostCard/PostCard.spec.tsx(23 hunks)src/components/UserPortal/PromotedPost/PromotedPost.spec.tsx(6 hunks)src/components/UserPortal/Register/Register.spec.tsx(8 hunks)src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.spec.tsx(3 hunks)src/components/UserPortal/StartPostModal/StartPostModal.spec.tsx(6 hunks)src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx(9 hunks)src/components/UserPortal/UserProfile/EventsAttendedByUser.spec.tsx(3 hunks)src/components/UserPortal/UserProfile/UserAddressFields.spec.tsx(6 hunks)src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx(10 hunks)src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx(12 hunks)
🧰 Additional context used
📓 Learnings (5)
📓 Common learnings
Learnt from: bitbard3
PR: PalisadoesFoundation/talawa-admin#2588
File: src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.spec.tsx:145-155
Timestamp: 2024-12-02T04:20:11.745Z
Learning: In PRs focused solely on refactoring test cases from Jest to Vitest, avoid suggesting optimizations or changes outside the migration scope.
src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx (1)
Learnt from: bitbard3
PR: PalisadoesFoundation/talawa-admin#2588
File: src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.spec.tsx:145-155
Timestamp: 2024-12-02T04:20:11.745Z
Learning: In PRs focused solely on refactoring test cases from Jest to Vitest, avoid suggesting optimizations or changes outside the migration scope.
src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx (1)
Learnt from: Doraemon012
PR: PalisadoesFoundation/talawa-admin#1988
File: src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx:282-282
Timestamp: 2024-11-12T10:40:58.654Z
Learning: In the test 'Component should be rendered properly' within 'Testing LeftDrawerOrg component for SUPERADMIN', setting 'SuperAdmin' to false is intentional.
src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx (1)
Learnt from: bitbard3
PR: PalisadoesFoundation/talawa-admin#2588
File: src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.spec.tsx:145-155
Timestamp: 2024-12-02T04:20:11.745Z
Learning: In PRs focused solely on refactoring test cases from Jest to Vitest, avoid suggesting optimizations or changes outside the migration scope.
src/components/UserPortal/PostCard/PostCard.spec.tsx (1)
Learnt from: bitbard3
PR: PalisadoesFoundation/talawa-admin#2588
File: src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.spec.tsx:145-155
Timestamp: 2024-12-02T04:20:11.745Z
Learning: In PRs focused solely on refactoring test cases from Jest to Vitest, avoid suggesting optimizations or changes outside the migration scope.
🔇 Additional comments (130)
src/components/UserPortal/DonationCard/DonationCard.spec.tsx (2)
14-25: Well-documented test objectives.
The descriptive block comment effectively outlines the test purpose and scope, reflecting best practices for clarity and maintainability. No further changes needed.
47-47: Appropriate switch from test to it.
This aligns with Vitest conventions and maintains readable test definitions. Great job on the migration!
src/components/UserPortal/PeopleCard/PeopleCard.spec.tsx (2)
13-23: Good use of doc comments.
These lines provide a clear roadmap for the test coverage. Keeping these well-structured keeps the team aligned on the test objectives.
45-45: Successful transition from Jest to Vitest.
Changing from test to it is consistent with the new framework, and no references to jest remain. Good job ensuring alignment with Vitest.
Also applies to: 61-61
src/components/UserPortal/UserProfile/UserAddressFields.spec.tsx (4)
5-6: Correct usage of vi from Vitest.
Explicitly importing from vitest ensures the correct mocking and testing utilities are used. Great job removing jest references.
7-17: Thorough documentation.
This descriptive comment block helps other developers quickly grasp each test’s purpose, especially valuable in larger test files.
23-23: Consistent replacement of Jest mocks with Vitest mocks.
vi.fn() and vi.clearAllMocks() are correctly used, maintaining consistency with the new testing framework.
Also applies to: 32-32
Line range hint 35-93: Appropriate usage of it blocks.
Each test scenario is well-structured, and the mock prop usage aligns with Vitest best practices.
src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.spec.tsx (2)
7-15: Comprehensive test documentation.
This overview clarifies each scenario being tested, significantly aiding maintainability. Nicely done.
20-20: Smooth transition to it blocks.
No stray references to jest found, confirming a successful migration to Vitest.
Also applies to: 44-44, 71-71
src/components/UserPortal/UserProfile/EventsAttendedByUser.spec.tsx (3)
7-17: Well-documented test overview.
Including a detailed block comment outlining the test scenarios helps with clarity and maintainability.
111-111: Good transition from Jest to Vitest.
Switching from test to it aligns perfectly with the Vitest style.
122-122: Consistent naming for test declarations.
This usage of it matches the rest of the file and maintains a uniform testing approach.
src/components/UserPortal/PromotedPost/PromotedPost.spec.tsx (6)
13-23: Helpful doc block for future maintainers.
Clearly describing each test's purpose promotes thorough understanding.
42-42: Smooth rename from Jest's test to Vitest's it.
No functional change, just a style improvement.
58-58: Maintaining consistent test naming.
You’ve properly updated the test function as part of the Vitest migration.
80-80: Adopting Vitest’s "it" convention.
These changes help keep consistency across the test suite.
99-99: Test naming scheme remains uniform.
Retaining the same descriptive text while switching to it is good practice.
118-118: Good use of "it" block for clarity.
All updated test declarations reflect a clear and consistent style.
src/components/UserPortal/EventCard/EventCard.spec.tsx (4)
68-68: Proper "it" usage.
Switching from test to it adheres to Vitest philosophy.
106-106: Consistent test naming technique.
This maintains clarity after migrating to Vitest.
125-125: Well-structured "it" block.
Transitions like this ensure a smooth Jest-to-Vitest migration.
174-174: Retains original intent with Vitest syntax.
No issues found with this test block after migration.
src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.spec.tsx (6)
16-17: Importing ‘vi’ from Vitest confirmed.
This reflects the intended framework switch.
18-29: Comprehensive doc block describing tests.
Documenting scenarios ensures better readability for future contributors.
112-118: Correct usage of ‘vi.mock’.
Replacing jest.mock with vi.mock is a direct and valid Vitest translation.
121-121: Accurate "it" usage for test block.
Ensures naming consistency with the new framework.
140-140: Stylistic "it" replacement matches the rest.
Keeps the test suite uniform.
160-160: Consistent test naming for final block.
Implementation is aligned with the Vitest approach.
src/components/UserPortal/StartPostModal/StartPostModal.spec.tsx (6)
15-16: Good use of Vitest import.
These lines correctly switch from Jest to Vitest.
17-28: Documentation enhancements.
The updated doc comments provide a clearer outline of test scenarios and are acceptable additions alongside the framework migration.
30-34: Successful transition to vi.mock and vi.fn().
Replacing jest.mock and jest.fn() with vi.mock and vi.fn() is aligned with Vitest’s API.
79-80: Proper mocking of callbacks.
Using vi.fn() here correctly replaces Jest’s mock functions.
130-130: Clearing mocks with Vitest.
Good job switching from jest.clearAllMocks() to vi.clearAllMocks().
133-133: Migrated test declarations from test to it.
Changing from test to it is stylistic but aligns with Vitest.
Also applies to: 140-141, 151-151, 171-171, 182-182
src/components/UserPortal/CommentCard/CommentCard.spec.tsx (4)
14-15: Correct import for Vitest.
Replacing jest imports with vi aligns with the Vitest framework.
16-26: Documentation comment clarifications.
Expanding these doc comments improves test readability without affecting the scope. No issues here.
70-71: Mock functions switched to vi.fn().
This correctly replaces Jest’s fn() usage.
81-81: Test blocks updated to it().
Renaming from test to it is consistent with Vitest conventions.
Also applies to: 122-122, 163-163, 209-209
src/components/UserPortal/UserNavbar/UserNavbar.spec.tsx (2)
16-30: Well-documented test scenarios.
Enhanced documentation is acceptable and does not alter functionality.
58-58: Appropriate switch to it().
The usage of it with Vitest is accurate. All references to the old Jest style are properly replaced.
Also applies to: 74-74, 98-98, 122-122, 146-146, 170-170, 194-194, 214-214
src/components/UserPortal/Register/Register.spec.tsx (5)
15-16: Vitest import added.
Switching from Jest to Vitest import looks correct.
17-30: Docstring expansions.
Increasing the level of detail is acceptable and does not introduce out-of-scope changes.
75-79: Mocking react-toastify with Vitest.
Replacing jest.mock and jest.fn() with vi.mock and vi.fn() is correct for Vitest.
83-83: setCurrentMode uses vi.fn().
This accurately migrates from Jest to Vitest mocks.
90-90: Tests updated to it(...).
Your renaming from test to it maintains readability and aligns with Vitest’s style. Nicely done.
Also applies to: 106-106, 126-126, 146-146, 167-167, 191-191, 247-247
src/components/UserPortal/OrganizationCard/OrganizationCard.spec.tsx (13)
21-21: Great addition of the CANCEL_MEMBERSHIP_REQUEST import.
No issues spotted; it aligns well with the existing membership-related tests.
24-25: Consistent switching over to Vitest.
The import of vi instead of jest follows the PR objective to migrate to Vitest.
26-41: Nice job documenting the test suite.
These JSDoc comments provide additional clarity and align with best practices.
44-44: Mocking with vi.mock is correct.
This replacement from Jest to Vitest is consistent with the migration plan.
46-47: Correct usage of vi.fn() for toast mocks.
The approach ensures compatibility with Vitest's mocking features.
167-181: CANCEL_MEMBERSHIP_REQUEST mock is properly defined.
No issues found; the GraphQL mock structure remains consistent.
225-225: Renamed test block to it for Vitest.
All references to it are valid and align with the new testing framework style.
241-241: Consistent test naming with it.
Clear scenario definition and properly adapted to Vitest syntax.
262-262: Good transition to it for this test.
Test logic remains intact, preserving original functionality.
294-294: Proper use of it for membership request test.
No extraneous changes introduced; everything stays within the scope of migration.
322-322: Straightforward conversion to it.
Implementation details unchanged; continuing the PR’s stated goals.
352-352: The new test for withdrawing membership request remains consistent.
Switch to it is correctly handled.
359-366: Accurate membershipRequests structure for testing.
Retains functionality while adhering to the Vitest framework.
src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.spec.tsx (13)
16-16: Correct Vitest import.
Shifting from jest to vitest aligns with the PR’s objective.
18-33: Comprehensive documentation block.
The added comments improve test clarity without straying beyond refactoring scope.
65-65: Proper replacement of setHideDrawer: jest.fn() with vi.fn().
This ensures consistency with the new mocking approach.
231-235: mocking toast functions with vi.fn().
Implementation is correct and consistent with Vitest.
262-262: Use of vi.clearAllMocks() is correct.
Maintains the same functionality as Jest.
271-271: Test function now uses it.
Consistent naming convention across the suite.
293-293: it block for testing modals.
Correctly migrated from Jest.
313-313: No issues with the switch to it.
Remains within the scope of the migration.
334-334: Mobile/responsive test uses it.
Appropriately replaced test.
357-357: Checking org image with it.
Still meets coverage requirements with Vitest.
376-376: No issues with test name.
Matches the standard it usage.
398-398: Maintains original functionality.
hideDrawer checks remain valid.
416-416: Another straightforward Jest→Vitest rename.
No extraneous code modifications observed.
src/components/UserPortal/PostCard/PostCard.spec.tsx (22)
24-25: Vitest import added.
A direct, appropriate swap from Jest to vi.
26-42: Helpful block comment.
Clearly describes test scope and remains within the refactoring boundary.
46-50: Mocking react-toastify with vi.fn().
Implementation mirrors the Jest approach, ensuring functionality parity.
240-240: Proper usage of vi.fn() for fetchPosts.
Fully consistent with the Vitest framework.
258-258: it instead of test:
Maintains naming consistency and function.
285-285: vi.fn() replacement for callback.
Ensures the mocking is in line with Vitest.
307-307: Switching to it for edit post scenario.
No extraneous changes introduced.
334-334: Consistent rename from test to it.
Correct approach for post editing coverage.
363-363: Delete post test block.
Renamed to it and upholds existing logic.
390-390: Maintains the same test coverage.
Appropriately using vi.fn() for fetchPosts.
415-415: Checks if user has liked the post.
No new logic beyond switching from Jest.
443-443: Still using vi.fn() for fetch calls.
Remains consistent with the test’s original goal.
465-465: it name clarifies the unlike scenario.
No sign of out-of-scope adjustments.
493-493: Logic unchanged for user unlikes.
Plausibly tested, no expansions beyond the framework change.
518-518: it block for user liking a post.
Migration from Jest is straightforward.
546-546: Again, vi.fn() usage is accurate.
No extraneous code.
571-571: Post image scenario.
Renamed to it, same coverage.
596-596: No additional logic changes.
Sticks to the PR’s Vitest migration.
614-614: Comment creation test.
Maintained test coverage and switched to it.
639-639: No issues spotted.
Preserves the original test structure.
837-837: Renamed to it for comment modal scenario.
Aligns well with the rest of the file.
862-862: No issues.
Transition is consistent with the rest of the file.
src/components/UserPortal/ChatRoom/ChatRoom.spec.tsx (10)
24-25: Vitest import lines.
Replacing jest references is correctly done here.
26-32: Detailed doc comment.
Nicely documents the new test coverage scope without expanding functionality.
1200-1200: scrollIntoView mocked with vi.fn().
This approach matches Vitest usage.
1202-1202: Renamed to it
The fallback content test remains the same, only the function name changed.
1224-1224: Consistent use of it.
No deviation from old logic.
1246-1246: Sending a direct chat message
Continues the same functionality under Vitest.
1331-1331: UserId variant test scenario
Maintains logic with minimal changes.
1416-1416: Group chat test
Switched from test to it seamlessly.
1437-1437: Sending a group chat message
Implementation unchanged apart from Vitest migration.
1517-1517: Reply to message
Same logic, with it usage.
src/components/UserPortal/CreateDirectChat/CreateDirectChat.spec.tsx (6)
23-23: Switching to Vitest import looks correct.
The import statement for 'vi' aligns with Vitest's mocking approach.
26-39: Informative block comment.
The newly added documentation comments clearly outline the purpose and essential scenarios covered by the test suite.
1398-1398: Mocking scrollIntoView with vi.fn().
This approach is correct for suppressing the browser-specific behavior during tests.
1402-1410: Replacing matchMedia mocks with vi.fn().
These mocks are necessary for components relying on CSS media queries. The usage follows Vitest’s mocking pattern.
1414-1414: Migrating Jest test to Vitest's it() block.
The test syntax change meets the migration objective.
1464-1464: Ensuring test name clarity.
Renaming test blocks from test to it fosters a more descriptive, BDD-style naming convention in Vitest.
src/components/UserPortal/CreateGroupChat/CreateGroupChat.spec.tsx (7)
29-30: Correctly importing vi from Vitest.
This is consistent with the framework’s mocking utilities.
31-46: Expanded block comment.
The detailed description of test scenarios clarifies the coverage of group chat creation and user management.
2233-2233: Mocking DOM method with Vitest.
Replaces Jest usage and ensures consistent test behavior.
2237-2245: Refined browser environment mocks.
Using vi.fn() for the matchMedia and its listeners is a direct Vitest equivalent.
2249-2249: Clear BDD test naming.
Switching to it while preserving the scenario-based naming is appropriate.
2287-2287: Migration to Vitest’s it() is correct.
Ensures consistency across the test suite.
2387-2387: Preserves existing logic while adopting Vitest style.
Switching from Jest is achieved without functional changes to the test.
src/components/UserPortal/ContactCard/ContactCard.spec.tsx (7)
13-14: Vitest import for mocks.
Switching from jest.fn() to vi.fn() is aligned with the migration plan.
15-25: Concise and descriptive doc block.
Clearly explains the scope of the tests and how the component is verified.
45-46: Mock callbacks with vi.fn().
This aligns with Vitest best practices for capturing calls and verifying interactions.
50-50: Test description.
The usage of it matches Vitest’s style. No further changes needed.
66-66: Maintaining scope of the test logic.
Only the framework references and method naming are changed.
87-87: Ensuring minimal logic modifications.
User-event interactions remain valid.
107-107: Consistent naming.
Switching to it is on track with the PR objectives.
src/components/UserPortal/ChatRoom/ChatRoom.tsx (1)
162-169: Ensure subscription-based refetch logic is robust.
The new condition properly checks chatId before refetching. No concurrency or functional issues found.
Consider verifying that messageSentToChat always includes chatMessageBelongsTo. If optional, handle undefined references accordingly.
src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.spec.tsx (2)
21-40: Well-documented test scenarios!
The comprehensive documentation clearly outlines all test scenarios, making the test file more maintainable.
Line range hint 220-476: LGTM: Consistent test case migration
All test cases have been correctly migrated from test() to it() while maintaining the original test behavior.
src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx (3)
20-36: LGTM: Consistent documentation style
The test documentation follows the same comprehensive style as OrganizationNavbar.spec.tsx, maintaining consistency across test files.
49-49: LGTM: Correct migration of mocks and cleanup
The migration from Jest to Vitest for mocks (jest.fn() → vi.fn()) and cleanup methods (jest.clearAllMocks() → vi.clearAllMocks()) is implemented correctly.
Also applies to: 387-387, 493-493
Line range hint 390-570: LGTM: Thorough test case migration
All test cases have been successfully migrated from test() to it() while preserving the original test logic and assertions.
palisadoes
merged commit e73d61d
into
PalisadoesFoundation:develop-postgres
What kind of change does this PR introduce?
This PR migrates the test cases in src/components/UserPortal/* from Jest to Vitest, ensuring compatibility with Vitest .
✅ Replace Jest-specific functions and mocks with Vitest equivalents
✅ Ensure all tests in src/components/UserPortal/* from Jest to Vitest pass after migration using npm run test:vitest
✅ Maintain the test coverage for the file as 100% after migration
✅ Upload a video or photo for this specific file coverage is 100% in the PR description
Issue Number:
Fixes #2803
Did you add tests for your changes?
yes
Snapshots/Videos:
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Refactor
Style
testtoitfor improved readability and alignment with behavior-driven development practices.