test: assign roles test coverage upto 100%

Description

Improve the test coverage of AssignRolesPage.tsx to 100%, focusing on covering all previously untested branches, conditional logic, and edge cases.

Problem Statement

The current implementation of AssignRolesPage.tsx has incomplete test coverage:

Statements: 86.29%
Branches: 67.56% ❗
Functions: 84.61%

Issues Identified

Missing coverage for critical logic paths:
- Lines: 69, 165–196, 261–262, 311, 467–481, 509–510
Unverified conditional rendering
Role assignment flows not fully tested
Edge cases (empty selection, invalid roles) not covered
Risk of regressions during future changes

Impact

Reduced confidence in role assignment logic
Potential hidden bugs
Difficult refactoring and maintenance

Proposed Solution

Add comprehensive unit tests using Vitest + React Testing Library
Mock API calls using vi.mock()
Cover:
- Role assignment workflows
- API success and error scenarios
- Empty states and edge cases
- Conditional rendering branches

Files to Update

File Path	Action	Purpose
`src/pages/AssignRolesPage.tsx`	Validate behavior	Ensure logic supports testing
`tests/pages/AssignRolesPage.test.tsx`	Create/Update	Add complete test coverage

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Load Assign Roles Page

Given the user is an admin
When the Assign Roles page loads
Then the loader should be displayed
And roles data should be fetched

Scenario 2: Successful Role Assignment

Given a user is selected
When a valid role is assigned
Then the API should be called
And success message should be displayed

Scenario 3: API Error Handling

Given the API fails
When role assignment is attempted
Then an error message should be shown

Scenario 4: Empty Selection

Given no user is selected
When assign role is clicked
Then validation error should be shown

Scenario 5: Conditional Rendering

Given different role states
When UI renders
Then correct components should be displayed

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Page loading	Admin logged in	Open page	Loader visible	High
TC-002	Role assignment success	User selected	Assign role	API called, success shown	High
TC-003	API failure	API mocked error	Assign role	Error displayed	High
TC-004	Empty selection	No user selected	Click assign	Validation message	High
TC-005	Conditional UI	Different roles	Render UI	Correct UI shown	Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases
`AssignRolesPage.tsx`	Role assignment handler	TC-002, TC-003
	Validation logic	TC-004
	Conditional rendering	TC-005

Test Assertions Required:

Implementation Details

Technical Considerations

Use TanStack Query for API mocking
Use waitFor() for async testing
Ensure no shallow tests
Focus on real user behavior simulation

Testing Strategy

Manual Testing

Verify role assignment works in UI
Validate error messages appear correctly
Test edge cases manually

Automated Testing

Unit Tests:

Render tests
Interaction tests
API tests
Error handling

Test Data

const mockUsers = [
  { id: '1', role: 'volunteer' },
  { id: '2', role: 'doctor' },
];