Testing: Integration Testing for Authentication and Profile Workflows

[rishabh0510rishabh]

Problem Statement

The current application lacks automated integration tests for critical user journeys. specifically the authentication and profile management workflows. This absence poses a high risk of regressions, meaning changes to the codebase could inadvertently break the login process or expose protected routes to unauthenticated users without immediate detection.

Current Behavior / Limitation

• There is no automated testing suite configured to validate the interactions in src/components/Auth/LoginForm.jsx or the profile update logic.
• Verification of these features currently requires manual testing (clicking through the UI) every time a change is made.
• package.json may lack the necessary scripts and dependencies for running modern React integration tests.

Expected Improvement

• A robust testing environment established using Vitest and React Testing Library.
• Automated tests that simulate real user behavior (typing credentials, clicking submit, navigating routes).
• Assurance that critical security paths (like redirecting unauthenticated users away from protected routes) function correctly.

Proposed Approach

1. Environment Setup:

   • Install development dependencies: vitest, jsdom, @testing-library/react, @testing-library/user-event, and @testing-library/jest-dom.
   • Update vite.config.js (or create a vitest.config.js) to configure the test environment.
   • Add a "test": "vitest" script to package.json.

2. Test Implementation (src/tests/auth.test.jsx):

   • Login Flow:
     • Render the LoginForm component wrapped in necessary providers (Router, AuthContext).
     • Simulate user input for email and password.
     • Mock the API response (success and failure cases).
     • Assert that a successful login redirects the user or updates the UI state.
     • Assert that an invalid login displays an error message.
   • Protected Routes:
     • Attempt to render a protected component without a valid token.
     • Assert that the router redirects to the Login page.
   • Profile Update:
     • Simulate a form submission on the Profile page and verify the success message.

Verification Steps

To verify that the testing suite is correctly implemented:

1. Install Dependencies: Run npm install to ensure new testing libraries are available.
2. Run Tests: Execute npm test (or npm run test) in the terminal.
3. Validate Output:
   • Ensure the terminal shows PASS for src/tests/auth.test.js.
   • Verify that individual test cases (e.g., "should log in successfully", "should show error on invalid credentials") are checked off.
4. Negative Testing (Proof of Utility):
   • Go to src/components/Auth/LoginForm.jsx and intentionally break the logic (e.g., comment out the submit handler or change the button type to "button" instead of "submit").
   • Run npm test again.
   • Result: The test suite should FAIL, confirming that the tests are accurately catching regressions.

Labels: ECWoC26

[rishabh0510rishabh]

hey @TiwariDivya25
I’d like to work on this. Please assign it to me if possible.