Improve Test Coverage for ManageDoctorsPage.tsx to 100%

Issue Summary

Improve Test Coverage for ManageDoctorsPage.tsx to 100%

Current Behavior: Test coverage for ManageDoctorsPage.tsx is below optimal levels, with several uncovered lines and branches.

Expected Behavior: Achieve 100% test coverage across statements, branches, functions, and lines with meaningful and robust test cases.

---

Problem Statement

• What is broken or missing? Several code paths (especially conditionals, event handlers, and edge cases) are not covered by tests.

• Who is affected? Developers and QA engineers relying on test coverage for reliability.

• Impact:

  • Increased risk of bugs
  • Lower code confidence
  • Reduced maintainability

• Uncovered Lines: 161-176, 212-215, 226, 235, 262-263, 267-268, 272-273, 277-278, 519, 595

• Reproduction: Run coverage:

  npm run test -- --coverage

---

Proposed Solution

• Write additional unit tests using Vitest + React Testing Library

• Mock API calls using vi.mock()

• Cover:

  • Conditional rendering
  • Event handlers
  • Edge cases
  • API success & failure scenarios

Files to update:

• ManageDoctorsPage.tsx
• ManageDoctorsPage.test.tsx

---

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Loading State Rendering

Given the component is fetching doctor data
 When the page is rendered
 Then a loading indicator should be displayed

Scenario 2: Display Doctors List

Given API returns doctor data
 When the component renders
 Then doctor list should be displayed correctly

Scenario 3: Handle Empty State

Given API returns empty doctor list
 When the component renders
 Then an empty state message should be shown

Scenario 4: API Error Handling

Given API request fails
 When the component renders
 Then an error message should be displayed

Scenario 5: Add Doctor Interaction

Given user clicks Add Doctor button
 When modal opens and form is submitted
 Then API should be called and UI updated

Scenario 6: Edit Doctor

Given user selects a doctor to edit
 When form is updated and submitted
 Then updated data should be reflected

Scenario 7: Delete Doctor

Given user clicks delete button
 When confirmation is accepted
 Then doctor should be removed from list

---

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Render loading state	API pending	1. Render component	Loader visible	High
TC-002	Render doctors list	API success	1. Mock data 2. Render	Data displayed	High
TC-003	Empty state	No data	1. Mock empty response	Empty message shown	High
TC-004	API error	API fails	1. Mock error	Error UI shown	High
TC-005	Add doctor	Valid input	1. Click add 2. Submit form	Doctor added	High
TC-006	Edit doctor	Existing doctor	1. Click edit 2. Submit	Updated UI	Medium
TC-007	Delete doctor	Existing doctor	1. Click delete	Doctor removed	High

---

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases to Cover
ManageDoctorsPage.tsx	Rendering logic	TC-001, TC-002, TC-003
	API calls	TC-004
	Event handlers	TC-005, TC-006, TC-007

---

Test Assertions Required:

• Renders correctly with initial state
• Handles user input correctly
• Validates input and shows errors
• Calls API with correct payload
• Handles loading state
• Handles success response
• Handles error response
• Updates UI state appropriately

---

Implementation Details

Files to Change

File Path	Action	Purpose
src/pages/ManageDoctorsPage.tsx	Modify	Improve testability if needed
src/__tests__/ManageDoctorsPage.test.tsx	Create/Modify	Add missing test cases

---

Technical Considerations

• Use vi.mock() for API mocking
• Use waitFor() for async testing
• Prefer userEvent over fireEvent
• Avoid testing implementation details

---

UI/UX Requirements

• Validate:

  • Modal behavior
  • Form validation
  • Button interactions

• Ensure accessibility:

  • Proper labels
  • Keyboard navigation

---

Testing Strategy

Manual Testing

Environment:

• Browser: Chrome
• Viewport: Desktop
• Role: Admin

Steps:

1. Open Manage Doctors page
2. Add/Edit/Delete doctor
3. Validate UI updates

---

Automated Testing

Unit Tests:

• Component render tests
• User interaction tests
• API tests
• Error handling tests

---

Test Data

const mockDoctors = [
  {
    id: 1,
    name: "Dr. John Doe",
    specialization: "Cardiology",
  },
];

---

Definition of Done

• All acceptance criteria pass
• Coverage reaches 100%
• All uncovered lines tested
• Tests are meaningful
• Code reviewed
• No console errors
• ESLint passes

---

Additional Context

Notes

• Focus on uncovered lines:

  • 161–176 (conditional logic)
  • 212–278 (event handlers)
  • 519 & 595 (edge cases)

• Avoid writing dummy tests just for coverage