test: Add comprehensive test coverage for InlineEditHistory and LocationPicker components

Issue: Add comprehensive test coverage for InlineEditHistory and LocationPicker components

Type: Enhancement
Priority: Medium
Component: Frontend Testing
Story Points: 3
Labels: frontend, testing, test-coverage, quality, react

Issue Summary

Add comprehensive unit and component tests to improve test coverage for the InlineEditHistory and LocationPicker components. This will ensure critical UI flows, async operations, geolocation handling, and edge cases are properly validated to reduce regression risk and improve maintainability.

Problem Statement

The InlineEditHistory and LocationPicker components currently have limited or no dedicated test coverage, leaving important UI interactions, async flows, and edge cases unverified.

What is missing?

Missing test coverage for InlineEditHistory
Missing test coverage for LocationPicker
No validation for async API flows
No validation for geolocation workflows
Edge cases not tested
External dependencies not mocked

Who is affected?

Frontend developers working on contribution/history features
Users interacting with edit history and location selection
Future contributors modifying these components

Impact:

Increased risk of regressions
Unreliable UI behavior
Reduced maintainability
Lack of confidence when making changes

Reproduction:

Run coverage report → observe low or missing coverage for:

src/components/InlineEditHistory.tsx
src/components/LocationPicker.tsx

Proposed Solution

Add comprehensive unit tests using Vitest and React Testing Library.

Approach:

Write tests covering:

InlineEditHistory:

Initial rendering
Loading state
Success state
Empty state
Error state
Expand/collapse history
Field change rendering
Fallback values
API integration
Error handling

LocationPicker:

Initial render
Modal open/close behavior
Location confirmation
onClose callback
onLocationSelect callback
Geolocation success
Geolocation failure
Loading state
Map interaction behavior

Components/files affected:

src/components/InlineEditHistory.tsx
src/components/LocationPicker.tsx

Tests to add:

tests/src/components/InlineEditHistory.test.tsx
tests/src/components/LocationPicker.test.tsx

Dependencies:

fetch API
navigator.geolocation
react-leaflet
map components

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: InlineEditHistory renders successfully

Given the InlineEditHistory component is mounted
When the component loads
Then the UI should render correctly
And the initial state should be displayed

Scenario 2: InlineEditHistory loading state

Given the history API request is pending
When the component renders
Then a loading indicator should be displayed

Scenario 3: InlineEditHistory API success

Given the API returns history data
When the component loads
Then the history entries should be displayed

Scenario 4: InlineEditHistory API failure

Given the API request fails
When the component loads
Then an error message should be shown

Scenario 5: LocationPicker location confirmation

Given the LocationPicker modal is open
When a user selects a location and confirms
Then onLocationSelect should be called with correct coordinates

Scenario 6: LocationPicker close action

Given the LocationPicker modal is open
When the user clicks close
Then onClose should be triggered

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Render InlineEditHistory	Component mounted	Load component	UI renders correctly	High
TC-002	Loading state	API pending	Render component	Loader displayed	High
TC-003	API success	Mock success response	Fetch history	History displayed	High
TC-004	Empty state	Empty response	Fetch history	Empty message shown	Medium
TC-005	API failure	Mock failure	Fetch history	Error message shown	High
TC-006	Expand history	History exists	Click expand	Details visible	Medium
TC-007	Render LocationPicker	Component mounted	Load picker	Map renders	High
TC-008	Close picker	Modal open	Click close	onClose triggered	High
TC-009	Confirm location	Valid location	Confirm	onLocationSelect called	High
TC-010	Geolocation success	Mock success	Get location	Coordinates updated	Medium
TC-011	Geolocation failure	Mock error	Get location	Error handled	Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases
InlineEditHistory.tsx	Render logic	TC-001
	History fetch logic	TC-002, TC-003
	Error handling	TC-005
	Expand logic	TC-006
LocationPicker.tsx	Render logic	TC-007
	Modal actions	TC-008
	Location selection	TC-009
	Geolocation handling	TC-010, TC-011

Test Assertions Required:

Implementation Details

Files to Change

File Path	Action	Purpose
src/components/InlineEditHistory.tsx	Modify	Improve testability
src/components/LocationPicker.tsx	Modify	Improve testability
tests/src/components/InlineEditHistory.test.tsx	Create	Unit tests
tests/src/components/LocationPicker.test.tsx	Create	Unit tests

Technical Considerations

Proper mocking of async APIs
Mock geolocation behavior
Mock map libraries
Maintain existing behavior
Avoid unnecessary production changes

Testing Strategy

Manual Testing

Test Environment:

Browser: Chrome / Firefox
Viewport: Desktop
Component context: Volunteer UI

Manual Test Steps:

InlineEditHistory:

1 Open component
2 Verify history loads
3 Expand entries
4 Verify errors

LocationPicker:

1 Open picker
2 Select location
3 Confirm location
4 Close modal
5 Verify callbacks

Automated Testing

Unit Tests:

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

Integration Tests:

Multi-component interaction tests
Route navigation tests

Test Data Requirements

Example mock data:

const mockHistoryData = {
  id: "record-123",
  changes: ["field update"]
};

const mockLocation = {
  lat: 17.3850,
  lng: 78.4867
};

Definition of Done

Coverage improved for:

src/components/InlineEditHistory.tsx
src/components/LocationPicker.tsx

Additional Context

Related Issues

Frontend test coverage improvements.

References

React Testing Library docs
Vitest docs

Notes

Improves frontend stability
Reduces regression risk
Improves maintainability
Strengthens component coverage

Edited Mar 22, 2026 by Prashanth