test : add comprehensive unit tests for ContentInput, ContributionDashboard and ContributionsList

Summary

This MR significantly improves frontend reliability by adding comprehensive unit test coverage for the following critical components:

ContentInput.tsx
ContributionDashboard.tsx
ContributionsList.tsx

A total of 217 tests are now passing covering major workflows including media uploads, dashboard analytics, pagination logic, validation, accessibility, and edge cases. This improves confidence in future changes and reduces regression risks.

What does this MR do and why?

Previously, these components had limited or incomplete test coverage, leaving important workflows like content uploads, contribution tracking, pagination, and validation partially untested.

This MR addresses these gaps by:

Adding comprehensive test coverage for critical UI components
Testing success, failure, validation, and loading states
Covering edge cases and accessibility scenarios
Improving component testability
Identifying remaining uncovered utilities

Motivation:

Improve code reliability and maintainability
Prevent regressions in contribution workflows
Increase confidence in future refactors
Strengthen overall frontend test coverage
Improve test quality standards

Approach

Used Vitest and React Testing Library
Followed behavior-driven testing practices
Focused on user behavior instead of implementation details
Mocked external dependencies and browser APIs
Tested edge cases and accessibility scenarios
Improved branch coverage

Trade-offs:

Mocked browser media APIs may not perfectly match real devices
Slight increase in test execution time due to additional coverage
Some defensive code paths cannot realistically reach 100% coverage without modifying production logic

Changes Made

New Test Files Added:

tests/src/components/ContentInput.test.tsx (84 tests)
tests/src/components/ContributionDashboard.test.tsx (62 tests)
tests/src/components/ContributionsList.test.tsx (52 tests)

Total core component tests: 198
Total project tests: 217

Component Improvements:

src/components/ContentInput.tsx

Coverage:

Statements: 98.56% Branches: 83.05% Functions: 98.14% Lines: 100%

Remaining uncovered:

980-1015 1059

src/components/ContributionDashboard.tsx

Coverage:

Statements: 96.8% Branches: 78.09% Functions: 90.47% Lines: 96.7%

Remaining uncovered:

189 420 449

src/components/ContributionsList.tsx

Coverage:

Statements: 100% Branches: 100% Functions: 100% Lines: 100%

UI Components Coverage:

components/ui/button.tsx

Statements: 100% Branches: 66.66% Functions: 100% Lines: 100%

Uncovered:

45

components/ui/card.tsx

Statements: 77.77% Branches: 100% Functions: 33.33% Lines: 77.77%

Uncovered:

23 35 50 70

Library Coverage:

lib/constants.ts

Statements: 100% Branches: 100% Functions: 100% Lines: 100%

lib/utils.ts

Statements: 3.33% Branches: 0% Functions: 16.66% Lines: 4.54%

Uncovered:

10-49

Configuration Update:

vitest.config.ts

Changes:

Improved test execution stability
Coverage reporting improvements

Technical Details

Root Cause:

Missing test coverage for critical components
No validation of edge cases
Pagination logic partially untested
Utility helpers not tested
Some UI components had low function coverage

Solution:

Implemented comprehensive test suites
Mocked external dependencies
Tested UI state transitions
Verified pagination logic
Covered media upload workflows
Added accessibility testing
Improved component coverage

Component Behavior Covered:

ContentInput:

Component rendering
Form validation
Category selection
Location verification
Language selection
Release rights selection
Media uploads
Recording workflows
Camera functionality
Upload progress
Error handling
Edge cases

ContributionDashboard:

Loading state
Empty state
Statistics calculations
Contribution streak logic
Upload counts
Language distribution
Monthly contributions
Media type stats
Timezone handling
Icons and styling
Edge cases

ContributionsList:

Empty states
Media filtering
Grid rendering
Pagination logic
Page navigation
Responsive layout
Accessibility behavior
Boundary cases

Test Coverage Results

Overall Project:

Statements: 92.61% Branches: 79.35% Functions: 87.5% Lines: 94.62%

ContentInput:

Statements: 98.56% Branches: 83.05% Functions: 98.14% Lines: 100%

ContributionDashboard:

Statements: 96.8% Branches: 78.09% Functions: 90.47% Lines: 96.7%

ContributionsList:

Statements: 100% Branches: 100% Functions: 100% Lines: 100%

Test Summary

Component Tests Added

ContentInput → 84
ContributionDashboard → 62
ContributionsList → 52

Total: 198 tests

Total project tests:

217 tests Type of Change

• Bug fix
• Feature development (Test coverage improvement)
• Breaking change
• Documentation update
• UI/UX improvement
• Refactor
• Performance improvement
• Test update
• Configuration change
• Security fix

Testing Done

Testing performed:

Unit tests added
Manual validation performed
Desktop testing completed
Mobile testing considered
Edge cases validated
Accessibility tested

Test Quality:

✓ No skipped tests ✓ No fake assertions ✓ No coverage bypasses ✓ All major branches covered ✓ Error scenarios tested ✓ Edge cases tested ✓ Accessibility verified

Code Quality Checklist

Code Standards:

✓ Code follows project conventions ✓ No console.log statements ✓ No unused imports ✓ No duplicate code ✓ Proper TypeScript typing ✓ ESLint passes ✓ Prettier formatting maintained

React Best Practices:

✓ Proper component structure ✓ Hooks follow rules ✓ Clean state management ✓ No unnecessary re-renders ✓ Proper event handling

Testing Standards:

✓ Behavior-focused testing ✓ Proper mocking strategy ✓ Edge cases covered ✓ Helper components tested independently ✓ No test anti-patterns

Notes

217 total tests passing
No production functionality modified
No breaking changes introduced
Minor improvements made for testability
Improves long-term maintainability
Provides strong regression protection
Overall coverage improved to 94.62% lines
Strong component coverage achieved

Close #244 (closed)