Skip to content

Improved Test Coverage for VerifyMedicinesPage

Sai Jeevana Jyothi Chesetti requested to merge test_coverage_Jyo into develop

Overview

This MR improves the unit test coverage for the VerifyMedicinesPage component by ensuring all statements, branches, functions, and lines are fully tested. The goal is to achieve besttest coverage and enhance the reliability of the component by covering all user interactions, edge cases, and error handling scenarios.

What does this MR do and why?

Previously, VerifyMedicinesPage had incomplete test coverage, leaving several conditional paths, edge cases, and user interaction flows untested. This posed a risk of undetected issues in critical functionalities such as medicine verification, replacement, and deletion.

This MR addresses those gaps by:

  • Analyzing the coverage report (npm run test:coverage)
  • Identifying uncovered lines, branches, and conditions
  • Writing comprehensive unit tests to cover all logic paths
  • Ensuring all user actions and UI states are properly validated
  • This improves overall confidence in the component and reduces the risk of regressions.

Trade-offs:

  • Increased test file size
  • Slightly longer test execution time
  • Additional effort required for mocking API and UI states

Changes Made

Added / Updated

VerifyMedicinesPage.test.tsx

Key Additions

✅ Error Handling API error handling with detailed error messages Generic fallback error handling when no API detail is available

✅ Edge Cases Empty or null medicine list handling Undefined or missing medicine ID safety checks Handling unexpected API responses

✅ User Interaction Coverage Verify medicine action Replace medicine flow

✅ Conditional Rendering Loading states Empty state UI Data present UI

✅ State Management UI updates after actions (verify/replace/delete) Proper handling of async operations

Technical Details

  • Used Vitest and React Testing Library
  • Mocked API calls using vi.mock
  • Covered async flows using waitFor
  • Ensured all conditional branches are executed
  • Isolated dependencies for stable and reliable tests

Root Cause

  • Incomplete test coverage due to missing test cases for:
  • Conditional rendering paths
  • Edge cases (empty/null data)
  • User interaction flows (verify, replace, delete)

Fix Approach

  • Used coverage report to identify uncovered areas

  • Added targeted test cases for each missing branch

  • Simulated different states:

    • Loading
    • Success
    • Error
    • Empty data
    • Ensured full execution of all conditions and logic paths
    • Testing Strategy
    • Mocked API responses and dependencies
    • Simulated real user interactions
    • Verified DOM updates and UI behavior
    • Validated error handling and fallback scenarios

Type of Change

🐛 Bug fix ✨ New feature 💥 Breaking change 📝 Documentation update 🎨 UI/UX improvement ♻️ Refactor

⚡ Performance improvement 🧪 Test update 🔧 Configuration change 🚨 Security fix 🧪 Test update

Testing Done

Unit Tests Added/Updated

Scenario Expected Result Status
Render medicines list Medicines displayed correctly ✅
Verify medicine Medicine verified successfully ✅
Replace medicine Replacement flow works correctly ✅
Delete medicine Medicine deleted successfully ✅
Empty data Empty state displayed ✅
API error with detail Specific error shown ✅
Generic error fallback Default error message shown ✅
Loading state Loader displayed correctly ✅
UI updates after actions UI reflects latest state ✅

How to Set Up and Validate Locally

  • git checkout test_coverage_Jyo
  • npm install
  • npm run test:coverage

Related Issue to this MR: #233 (closed)

Edited by Sai Jeevana Jyothi Chesetti

Merge request reports