feat: Add comprehensive testing suite with Jest, Supertest, and React… - #56
Conversation
|
Someone is attempting to deploy a commit to the Parv Aggarwal's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe PR adds backend Jest/Supertest tests with in-memory MongoDB support, frontend Vitest/React Testing Library tests, coverage configuration, and frontend CI test execution. Existing backend tests migrate to Jest, while barter pagination validation is reformatted without behavioral changes. ChangesAutomated testing suite
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant CI
participant Vitest
participant SendBarterModal
participant skillService
participant barterService
CI->>Vitest: npm test
Vitest->>SendBarterModal: render modal
SendBarterModal->>skillService: getMySkills()
skillService-->>SendBarterModal: return active skills
SendBarterModal->>barterService: createBarterRequest(request data)
barterService-->>SendBarterModal: return success
SendBarterModal-->>Vitest: alert success and invoke onClose
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
barterly-backend/jest.config.js (1)
12-17: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a glob pattern for coverage collection.
Explicitly listing only four files in
collectCoverageFromrestricts coverage reporting to just those files. This means the 20% global coverage threshold is easily met, but newly added or untested files in the codebase are ignored, which defeats the purpose of a global threshold.Consider replacing the explicit list with a glob pattern (e.g.,
"src/**/*.js") to accurately measure coverage across the entire source directory. You can also exclude specific entry points or config files using negation (e.g.,"!src/server.js") if needed.♻️ Proposed refactor
collectCoverageFrom: [ - "src/utils/ip.utils.js", - "src/validations/auth.validation.js", - "src/controllers/auth.controller.js", - "src/services/auth.service.js" + "src/**/*.js" ],🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@barterly-backend/jest.config.js` around lines 12 - 17, Update the collectCoverageFrom configuration in jest.config.js to use a glob covering all JavaScript files under src rather than listing only selected files. Add negated patterns only for known entry points or configuration files that should be excluded, while preserving the global coverage threshold.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx`:
- Around line 49-55: The SendBarterModal tests must await the asynchronous
getMySkills update before completing assertions or capturing the snapshot. In
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx lines
49-55, wait for the empty-state error message before the test ends; in lines
126-130, wait for the same message before taking the snapshot so both tests
observe the finalized UI and avoid act warnings.
---
Nitpick comments:
In `@barterly-backend/jest.config.js`:
- Around line 12-17: Update the collectCoverageFrom configuration in
jest.config.js to use a glob covering all JavaScript files under src rather than
listing only selected files. Add negated patterns only for known entry points or
configuration files that should be excluded, while preserving the global
coverage threshold.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9e1edf95-160b-4b82-817d-2d2cc4bbe478
⛔ Files ignored due to path filters (3)
barterly-backend/package-lock.jsonis excluded by!**/package-lock.jsonbarterly-frontend/package-lock.jsonis excluded by!**/package-lock.jsonbarterly-frontend/src/components/modals/__tests__/__snapshots__/SendBarterModal.test.jsx.snapis excluded by!**/*.snap
📒 Files selected for processing (14)
.github/workflows/ci.ymlbarterly-backend/.gitignorebarterly-backend/babel.config.jsonbarterly-backend/jest.config.jsbarterly-backend/package.jsonbarterly-backend/src/validations/barter.validation.jsbarterly-backend/tests/auth.api.test.jsbarterly-backend/tests/auth.validation.test.jsbarterly-backend/tests/ip.utils.test.jsbarterly-backend/tests/setup.jsbarterly-frontend/package.jsonbarterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsxbarterly-frontend/src/tests/setup.jsbarterly-frontend/vite.config.js
| test("renders modal with requested skill title when open", async () => { | ||
| skillService.getMySkills.mockResolvedValueOnce({ data: [] }); | ||
| render(<SendBarterModal {...defaultProps} />); | ||
|
|
||
| expect(screen.getByText("Send Barter Request")).toBeInTheDocument(); | ||
| expect(screen.getByText("React Programming")).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Await state updates to prevent act(...) warnings and flaky snapshots.
These tests complete synchronously before the asynchronous getMySkills fetch resolves. This causes state updates to happen after the test finishes, triggering React's act(...) warnings. Additionally, the snapshot test captures the initial loading state rather than the finalized UI.
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L49-L55: Await the empty state error message before the test ends.barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L126-L130: Await the same error message before taking the snapshot.
🐛 Proposed fixes
For renders modal with requested skill title when open:
test("renders modal with requested skill title when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
render(<SendBarterModal {...defaultProps} />);
expect(screen.getByText("Send Barter Request")).toBeInTheDocument();
expect(screen.getByText("React Programming")).toBeInTheDocument();
+
+ await screen.findByText(/You don't have any active skills/i);
});For matches snapshot when open:
test("matches snapshot when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
const { asFragment } = render(<SendBarterModal {...defaultProps} />);
+
+ await screen.findByText(/You don't have any active skills/i);
+
expect(asFragment()).toMatchSnapshot();
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test("renders modal with requested skill title when open", async () => { | |
| skillService.getMySkills.mockResolvedValueOnce({ data: [] }); | |
| render(<SendBarterModal {...defaultProps} />); | |
| expect(screen.getByText("Send Barter Request")).toBeInTheDocument(); | |
| expect(screen.getByText("React Programming")).toBeInTheDocument(); | |
| }); | |
| test("renders modal with requested skill title when open", async () => { | |
| skillService.getMySkills.mockResolvedValueOnce({ data: [] }); | |
| render(<SendBarterModal {...defaultProps} />); | |
| expect(screen.getByText("Send Barter Request")).toBeInTheDocument(); | |
| expect(screen.getByText("React Programming")).toBeInTheDocument(); | |
| await screen.findByText(/You don't have any active skills/i); | |
| }); | |
| test("matches snapshot when open", async () => { | |
| skillService.getMySkills.mockResolvedValueOnce({ data: [] }); | |
| const { asFragment } = render(<SendBarterModal {...defaultProps} />); | |
| await screen.findByText(/You don't have any active skills/i); | |
| expect(asFragment()).toMatchSnapshot(); | |
| }); |
📍 Affects 1 file
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L49-L55(this comment)barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L126-L130
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx`
around lines 49 - 55, The SendBarterModal tests must await the asynchronous
getMySkills update before completing assertions or capturing the snapshot. In
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx lines
49-55, wait for the empty-state error message before the test ends; in lines
126-130, wait for the same message before taking the snapshot so both tests
observe the finalized UI and avoid act warnings.
feat: Add Comprehensive Testing Suite with Jest, Supertest, and React Testing Library
What Changed
Backend:
node --testtest runner with Jest and Supertest.mongodb-memory-serverfor database testing in-memory.ioredis-mock), RabbitMQ (amqplib), and rate limiters (express-rate-limit).tests/auth.api.test.jsvalidating user registration, login, and validation errors.Frontend:
src/tests/setup.js.SendBarterModalcomponent undersrc/components/modals/__tests__/SendBarterModal.test.jsx.CI/CD:
.github/workflows/ci.ymlto automatically execute both Vitest (frontend) and Jest (backend) test jobs on every PR.Why
How To Test
Backend
cd barterly-backend Install new dependencies and run tests:bash
npm install
npm test
Frontend
bash
cd barterly-frontend
Install new dependencies and run tests:
bash
npm install
npm test
Screenshots
Automated backend tests result:All 17 backend tests passed successfully(Optional: Replace with your screenshot if desired)
Automated frontend tests result:All 6 frontend tests passed successfully(Optional: Replace with your screenshot if desired)
Related Issue
Closes #55
Checklist
I have read CONTRIBUTING.md.
I kept this pull request focused on one issue.
I ran the relevant checks locally.
I added or updated tests where appropriate.
I added screenshots or screen recordings for UI changes.
I documented any known limitations or follow-up work.
Summary by CodeRabbit
Tests
Quality Improvements