Add Comprehensive Test Coverage for Utility Functions and Typed Chart Components
… Components# Add Comprehensive Test Coverage for Utility Functions and Typed Chart Components
Description
This PR adds extensive test coverage for previously untested parts of the react-chartjs-2 library, specifically:
- All utility functions in
src/utils.ts - All typed chart components in
src/typedCharts.tsx
Motivation
While the main Chart component has excellent test coverage in chart.test.tsx, several critical parts of the library lacked dedicated unit tests:
- Utility functions (
getDatasetAtEvent,getElementAtEvent,getElementsAtEvent,reforwardRef,setOptions,setLabels,setDatasets,cloneData) had no direct test coverage - Typed chart components (Line, Bar, Radar, Doughnut, PolarArea, Bubble, Pie, Scatter) had no dedicated unit tests beyond type checking
This PR addresses these gaps to improve code quality, maintainability, and confidence in the library.
Changes
New Test Files
1. test/utils.test.tsx (489 lines, ~40 test cases)
Comprehensive test suite for all utility functions:
reforwardRef tests:
- Function ref handling
- Object ref handling
- Null/undefined ref edge cases
setOptions tests:
- Chart options updates
- Empty options handling
- Missing options edge cases
setLabels tests:
- Label updates
- Undefined and empty labels
setDatasets tests:
- Dataset updates with matching labels
- Adding new datasets
- Custom
datasetIdKeysupport - Datasets with no data
- Preventing duplicate dataset references
cloneData tests:
- Data cloning with labels and datasets
- Independent copy verification
- Custom
datasetIdKeysupport - Empty datasets handling
Event handler tests:
-
getDatasetAtEvent- dataset element retrieval with correct mode parameters -
getElementAtEvent- single element retrieval with 'nearest' mode -
getElementsAtEvent- all elements retrieval with 'index' mode
2. test/typedCharts.test.tsx (456 lines, ~60 test cases)
Comprehensive test suite for all typed chart components:
Individual chart tests for:
- Line, Bar, Radar, Doughnut, PolarArea, Bubble, Pie, Scatter
Each chart type verifies:
- Proper rendering and type verification
- Data passing
- Options handling
- Chart-specific options (e.g.,
cutoutfor Doughnut,indexAxisfor Bar) - Data updates trigger chart updates
Common functionality tests (for all chart types):
- Ref forwarding
- Chart destruction on unmount
-
classNameprop support -
pluginsprop support -
redrawprop handling -
aria-labelsupport -
heightandwidthprops
Type safety tests:
- Verifying typed components work without explicit
typeprop - Controller registration verification
Test Coverage Impact
This PR adds test coverage for:
- ✅ 9 utility functions (previously 0% coverage)
- ✅ 8 typed chart components (previously minimal coverage)
- ✅ Event handling functionality
- ✅ Data manipulation and cloning
- ✅ Ref forwarding patterns
Total new test cases: ~100
Testing
All tests follow the existing patterns in the repository:
- Using Vitest as the test runner
- Using
@testing-library/reactfor component testing - Following the same structure and conventions as
chart.test.tsx - Proper cleanup and teardown in
afterEachhooks
To run the new tests:
pnpm test:unit
Checklist
- [x] Tests added for utility functions
- [x] Tests added for typed chart components
- [x] Tests follow existing code style and patterns
- [x] All tests use proper cleanup/teardown
- [x] Tests cover edge cases and error conditions
- [x] Tests verify correct Chart.js API usage
Related Issues
This PR improves test coverage and code quality, making the library more maintainable and reliable for contributors and users.
Breaking Changes
None. This PR only adds tests and does not modify any source code.