test: assign roles test coverage

Overview

This MR improves the test coverage of AssignRolesPage.tsx to 100% by adding comprehensive unit tests and covering previously uncovered lines, branches, functions, and edge cases.

---

What does this MR do and why?

Motivation

Previously, AssignRolesPage.tsx had:

• 86.29% statement coverage

• 67.56% branch coverage ❗

• 84.61% function coverage

• Several uncovered critical lines:

  • 69
  • 165–170
  • 177–196
  • 261–262
  • 311
  • 467–481
  • 509–510

This created risks of:

• Hidden bugs in role assignment logic
• Low confidence during updates
• Unverified conditional flows

---

Approach

• Added unit tests using Vitest + React Testing Library

• Mocked API calls using vi.mock()

• Focused on:

  • Role assignment workflows
  • Conditional rendering paths
  • API success, error, and empty states
  • Edge cases (invalid roles, no selection)
  • Branch-heavy logic coverage

---

Trade-offs

• Slight increase in test complexity
• Additional mocking setup required
• More effort to cover deep conditional branches

---

Changes Made

• ✅ Added new test cases for AssignRolesPage

• ✅ Covered all previously uncovered lines:

  • 69
  • 165–196
  • 261–262
  • 311
  • 467–481
  • 509–510

• ✅ Improved branch coverage from 67% → 100%

• ✅ Added tests for:

  • Role assignment actions
  • API responses (success/error)
  • Conditional UI rendering

• ✅ Ensured full function execution

---

Technical Details

• Root issue:

  • Missing tests for conditional branches and role logic

• Fix:

  • Added tests for all UI states
  • Simulated user actions (assign/update roles)
  • Used waitFor() for async operations
  • Mocked API calls thoroughly

• Ensured:

  • No shallow/dummy tests
  • Tests validate real behavior and flows

---

Type of Change

• 🐛 Bug fix
• ✨ New feature
• 💥 Breaking change
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Refactor
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Configuration change
• 🚨 Security fix

---

Related Issues / References

• Closes #270 (closed)

---

Screenshots or Screen Recordings

Not applicable (test-related changes only)

---

How to Set Up and Validate Locally

1. Checkout this branch:

   git checkout feature/assign-roles-coverage

2. Install dependencies:

   bun install

3. Run tests:

   bun run test

4. Run coverage:

   bun run test -- --coverage

5. Expected result:

   • ✅ 100% coverage for AssignRolesPage.tsx
   • ✅ All tests passing

---

Testing Done

• Manual testing completed
• Unit tests added/updated

Test Cases Covered

Scenario	Expected Result	Status
Loading state	Loader displayed	✅
API success	Roles assigned correctly	✅
API error	Error message shown	✅
Empty selection	Validation message shown	✅
Role assignment	UI updates correctly	✅
Conditional rendering	Correct UI displayed	✅

---

Code Quality Checklist

Code Standards

• Code follows project conventions
• No console logs
• No unused code
• No duplication
• TypeScript types properly used
• ESLint/Prettier pass

---

React Best Practices

• Components follow single responsibility
• Hooks used correctly
• State management optimized
• No unnecessary re-renders

---

API & Data Fetching

• API calls mocked properly
• Loading & error states handled
• TanStack Query behavior tested

---

Error Handling

• Errors handled gracefully
• User-friendly messages displayed

---

Documentation

• README updated (not required)
• .env.example updated (not required)

---

Known Limitations / Technical Debt

• Tests depend on mocked API responses
• Future API changes may require updates to tests

---

Additional Notes

• Focus was on branch coverage improvement (67% → 100%)
• Ensures safer refactoring and better reliability
• Avoided artificial coverage; all tests are meaningful

---

MR Acceptance Checklist

All acceptance criteria met. Ready for review ✅