test: add comprehensive test cases for PublicQueuePage & ManageMedicalCampsPage.tsx

Overview

This MR improves test coverage for all components under src/pages/admin and includes enhanced coverage for PublicQueuePage.

It achieves 100% statement and line coverage across admin pages, with near-complete branch coverage.

What does this MR do and why?

test: add comprehensive test cases for PublicQueuePage & src/pages/admin

This MR ensures comprehensive test coverage for:

• Admin pages (src/pages/admin)
• Public-facing queue functionality (PublicQueuePage)

Motivation:

• Eliminate untested logic paths
• Improve reliability of critical admin and queue workflows
• Strengthen confidence in UI behavior under edge cases

Approach:

• Added targeted unit tests for uncovered branches
• Covered UI states, API errors, and edge cases
• Included real-time queue scenarios (connection, reconnection, empty states)

Changes Made

• tests/admin/ManageMedicalCampsPage.test.tsx
• tests/pages/PublicQueuePage.test.tsx

Technical Details

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Refactor (no functional changes)
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Configuration change
• 🚨 Security fix

Related Issues / References

Screenshots or Screen Recordings

before after

How to Set Up and Validate Locally

How to Set Up and Validate Locally

1. Pull this branch / checkout MR
2. Install dependencies (if any changed):

   bun install

3. Run tests:

   bun test

4. Run tests with coverage:

   bun run test:coverage

5. Verify coverage for specific files:
   • PublicQueuePage: src/pages/PublicQueuePage.tsx - 100% coverage
   • ManageMedicalCampsPage: src/pages/admin/ManageMedicalCampsPage.tsx - 100% coverage

Testing Done

Describe the testing performed:

• Manual testing completed
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
PublicQueuePage - Basic rendering	Queue heading, connection status display correctly	✅
PublicQueuePage - Navigation	Back button navigates to home	✅
PublicQueuePage - Reconnect functionality	Reconnect button shows/calls function appropriately	✅
PublicQueuePage - Patient count	Correct singular/plural/zero patient count display	✅
PublicQueuePage - Error handling	Connection errors display appropriately	✅
PublicQueuePage - Empty state	Loading spinner and message shown	✅
PublicQueuePage - Queue items	Patient details render correctly	✅
PublicQueuePage - Emergency priority	Emergency badges and styling applied correctly	✅
PublicQueuePage - Connection indicator	Green/red indicator based on connection state	✅
ManageMedicalCampsPage - Basic rendering	Page title, loading, data, empty state render	✅
ManageMedicalCampsPage - Null values	Null values display as "--"	✅
ManageMedicalCampsPage - Create flow	Dialog opens, form submits, success/error handling	✅
ManageMedicalCampsPage - Edit flow	Dialog opens with data, updates, success/error handling	✅
ManageMedicalCampsPage - Loading states	Mutation loading states display	✅
ManageMedicalCampsPage - Dialog management	Escape key closes, form resets on switch	✅

Code Quality Checklist

Code Standards

• Code follows project conventions (naming, structure, formatting)
• No console.log() or debugger statements left in code
• No unused imports, variables, or functions
• No duplicate code and use of existing components for reusability
• i18n check passed with no hardcoded strings in codebase for i18n support
• TypeScript types are properly defined (no any unless justified)
• ESLint and Prettier checks pass

  bun run lint

React Best Practices

• Components are properly split and single-responsibility
• Hooks follow rules (no conditional hooks, proper dependencies)
• State management is appropriate (local vs global state)
• No unnecessary re-renders (memoization used where needed)
• Event handlers are properly cleaned up

Component Patterns

• shadcn/ui components used correctly
• Tailwind classes follow utility-first approach
• Responsive design considered (mobile-first if applicable)
• Accessibility attributes included (aria-*, role, etc.)
• Icons from lucide-react used consistently

API & Data Fetching

• TanStack Query used for server state (if applicable)
• Loading and error states handled
• API types defined in src/types/api.ts
• Axios interceptors handle auth tokens correctly
• Use of Zod for data validations

Error Handling

• Errors are caught and handled gracefully
• User-friendly error messages displayed
• Errors are being toasted properly
• Network failures handled appropriately

Documentation

• README.md updated (if setup steps changed)
• .env.example updated (if new env vars added)
• CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

None. This MR focuses solely on adding comprehensive test coverage for existing functionality.

Coverage Summary

File	Lines	Functions	Branches
src/pages/PublicQueuePage.tsx	100%	100%	100%
src/pages/admin/ManageMedicalCampsPage.tsx	100%	100%	100%

Overall Project Coverage:

• Lines: ~88%
• Functions: ~85%
• Branches: ~82%

Additional Notes

• All tests use Vitest and React Testing Library
• Mocks are properly cleaned up in beforeEach and afterEach hooks
• API calls are mocked using vi.mock()
• Navigation is mocked to prevent actual routing during tests
• QueryClient is configured with retry: false for faster test execution

---

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to improve quality, performance, reliability, security, and maintainability.