@coreui/react-pro
Version:
UI Components Library for React.js
149 lines (119 loc) • 4.52 kB
Markdown
# CCalendar Component Testing Suite
This directory contains comprehensive tests for the CCalendar component, covering functionality, edge cases, accessibility, and the recent timezone parsing fix.
## Test Files Overview
### 1. `CCalendar.spec.tsx` (Main Test Suite)
- Basic rendering and props validation
- Regression tests for the timezone fix
- Core functionality testing
- Snapshot testing for UI consistency
### 2. `utils.spec.tsx` (Utility Functions)
- Date parsing functions (`convertToDateObject`, `getLocalDateFromString`)
- Timezone handling verification
- Locale support testing
- Edge case handling for invalid inputs
- Performance testing
### 3. `CCalendar.comprehensive.spec.tsx` (Comprehensive Coverage)
- All component props and combinations
- Different selection types (day, week, month, year)
- Range selection functionality
- Disabled dates handling
- Min/max date constraints
- Locale variations
- Callback behavior
### 4. `CCalendar.edge-cases.spec.tsx` (Edge Cases & Error Handling)
- Memory management and cleanup
- Extreme date values
- Browser compatibility scenarios
- Error recovery mechanisms
- Performance edge cases
- Security considerations (XSS prevention)
- Concurrent mode compatibility
### 5. `CCalendar.interactions.spec.tsx` (User Interactions)
- Mouse interactions (click, hover, drag)
- Keyboard navigation (arrows, enter, space, tab)
- Touch interactions (tap, swipe, pinch)
- Focus management
- Navigation controls
- Range selection interactions
- Callback behavior and error handling
### 6. `CCalendar.accessibility.spec.tsx` (Accessibility)
- ARIA compliance
- Keyboard navigation
- Screen reader support
- High contrast mode
- Reduced motion preferences
- Touch accessibility
- Localization accessibility
- Automated accessibility testing (axe-core integration)
### 7. `test-setup.ts` (Test Configuration)
- Jest configuration and mocks
- Browser API mocks (matchMedia, ResizeObserver, etc.)
- Performance and Intl mocking
- Common test utilities
## Key Test Scenarios
### Timezone Fix Regression Tests
The recent timezone parsing fix is specifically tested to ensure:
- Date strings like "2/16/2022" parse to February 16, 2022 at 00:00 local time
- No incorrect timezone offset adjustments
- Consistent behavior across different system timezones
- Proper handling of DST transitions
### Edge Cases Covered
- Invalid date inputs
- Leap year dates
- Year/month boundaries
- Very old and future dates
- Malformed date strings
- Null/undefined inputs
- Rapid prop changes
- Memory leaks prevention
### Accessibility Standards
- WCAG 2.1 AA compliance
- Keyboard navigation
- Screen reader compatibility
- High contrast mode support
- Reduced motion preferences
- Touch accessibility
- International localization
## Running the Tests
```bash
# Run all calendar tests
npm test -- --testPathPattern=calendar
# Run specific test file
npm test CCalendar.spec.tsx
# Run with coverage
npm test -- --coverage --testPathPattern=calendar
# Run accessibility tests specifically
npm test CCalendar.accessibility.spec.tsx
# Run edge case tests
npm test CCalendar.edge-cases.spec.tsx
```
## Test Dependencies
The tests require the following packages:
- `@testing-library/react` - React testing utilities
- `@testing-library/jest-dom` - Jest DOM matchers
- `@testing-library/user-event` - User interaction simulation
- `jest-axe` (optional) - Automated accessibility testing
## Debugging Tests
For debugging test failures:
1. **Timezone Issues**: Check if the system timezone affects test results
2. **Async Issues**: Ensure proper use of `waitFor` and async/await
3. **Mock Issues**: Verify that mocks are properly reset between tests
4. **DOM Issues**: Use `screen.debug()` to inspect rendered output
## Contributing
When adding new tests:
1. Follow the existing naming conventions
2. Add comprehensive edge cases
3. Include accessibility considerations
4. Document complex test scenarios
5. Ensure tests are deterministic and fast
## Known Limitations
- Some interaction tests depend on the actual DOM structure of the calendar
- Touch event testing has limitations in jsdom environment
- Timezone testing may behave differently in CI environments
- Some accessibility tests require manual verification with screen readers
## Future Improvements
- Integration with visual regression testing
- Enhanced touch interaction testing
- More comprehensive internationalization testing
- Performance benchmarking integration
- Real browser testing with Playwright/Cypress