@coreui/react-pro 5.19.0 → 5.21.0

package/src/components/calendar/__tests__/CCalendar.edge-cases.spec.tsx

@@ -0,0 +1,416 @@
+import * as React from 'react'
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { CCalendar } from '../CCalendar'
+
+describe('CCalendar Edge Cases', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Memory Management', () => {
+    it('cleans up event listeners on unmount', () => {
+      const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
+      const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
+      
+      const { unmount } = render(<CCalendar />)
+      
+      // Unmount the component
+      unmount()
+      
+      // Verify cleanup (this is implementation dependent)
+      expect(removeEventListenerSpy).toHaveBeenCalled()
+      
+      addEventListenerSpy.mockRestore()
+      removeEventListenerSpy.mockRestore()
+    })
+
+    it('handles rapid prop changes without memory leaks', () => {
+      const { rerender } = render(<CCalendar calendarDate="1/1/2022" />)
+      
+      // Rapidly change props
+      for (let i = 1; i <= 31; i++) {
+        rerender(<CCalendar calendarDate={`1/${i}/2022`} />)
+      }
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles component re-mounting', () => {
+      const { unmount, rerender } = render(<CCalendar calendarDate="1/1/2022" />)
+      
+      unmount()
+      
+      rerender(<CCalendar calendarDate="1/2/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Extreme Date Values', () => {
+    it('handles dates near JavaScript Date limits', () => {
+      // JavaScript Date can handle dates from -8,640,000,000,000,000 to 8,640,000,000,000,000 milliseconds
+      // relative to January 1, 1970 UTC
+      
+      // Very old date (but within JavaScript limits)
+      render(<CCalendar calendarDate="1/1/1970" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Very future date (but within JavaScript limits)  
+      render(<CCalendar calendarDate="1/1/2030" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles invalid date objects gracefully', () => {
+      const invalidDate = new Date('invalid')
+      render(<CCalendar calendarDate={invalidDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles NaN dates gracefully', () => {
+      const nanDate = new Date(NaN)
+      render(<CCalendar calendarDate={nanDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Browser Compatibility', () => {
+    it('handles browsers without Intl support', () => {
+      const originalIntl = global.Intl
+      
+      // Mock missing Intl support
+      Object.defineProperty(global, 'Intl', {
+        value: undefined,
+        writable: true
+      })
+      
+      render(<CCalendar locale="en-US" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Restore Intl
+      global.Intl = originalIntl
+    })
+
+    it('handles browsers with limited Date support', () => {
+      // Mock limited Date parsing
+      const originalDateParse = Date.parse
+      Date.parse = jest.fn(() => NaN)
+      
+      render(<CCalendar calendarDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Restore Date.parse
+      Date.parse = originalDateParse
+    })
+
+    it('handles touch events', async () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      
+      // Simulate touch events
+      fireEvent.touchStart(calendar, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      })
+      
+      fireEvent.touchEnd(calendar, {
+        changedTouches: [{ clientX: 100, clientY: 100 }]
+      })
+      
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Error Recovery', () => {
+    it('recovers from invalid prop combinations', () => {
+      // Start date after end date
+      render(
+        <CCalendar 
+          range
+          startDate="2/20/2022"
+          endDate="2/16/2022"
+        />
+      )
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles conflicting date constraints', () => {
+      // Min date after max date
+      render(
+        <CCalendar 
+          minDate="2/20/2022"
+          maxDate="2/16/2022"
+        />
+      )
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles disabled date that is also selected', () => {
+      const selectedDate = new Date(2022, 1, 16)
+      render(
+        <CCalendar 
+          calendarDate={selectedDate}
+          disabledDate={[selectedDate]}
+        />
+      )
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('recovers from callback errors', () => {
+      const errorCallback = jest.fn(() => {
+        throw new Error('Callback error')
+      })
+      
+      // Component should still render despite callback errors
+      expect(() => {
+        render(<CCalendar onCalendarDateChange={errorCallback} />)
+      }).not.toThrow()
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Performance Edge Cases', () => {
+    it('handles large number of disabled dates efficiently', () => {
+      const startTime = performance.now()
+      
+      // Create array of 1000 disabled dates
+      const disabledDates = Array.from({ length: 1000 }, (_, i) => 
+        new Date(2022, 0, i + 1)
+      )
+      
+      render(<CCalendar disabledDate={disabledDates} />)
+      
+      const endTime = performance.now()
+      const renderTime = endTime - startTime
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      // Should render in reasonable time (less than 1 second)
+      expect(renderTime).toBeLessThan(1000)
+    })
+
+    it('handles complex disabled date functions efficiently', () => {
+      const complexDisabledFn = (date: Date) => {
+        // Complex calculation to determine if date is disabled
+        const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000)
+        return dayOfYear % 7 === 0 || dayOfYear % 13 === 0
+      }
+      
+      const startTime = performance.now()
+      render(<CCalendar disabledDate={complexDisabledFn} />)
+      const endTime = performance.now()
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      expect(endTime - startTime).toBeLessThan(500)
+    })
+
+    it('handles rapid state updates', async () => {
+      const TestComponent = () => {
+        const [date, setDate] = React.useState<Date | null>(new Date(2022, 1, 16))
+        
+        React.useEffect(() => {
+          // Rapid state updates
+          const interval = setInterval(() => {
+            setDate(prev => prev ? new Date(prev.getTime() + 86400000) : null)
+          }, 10)
+          
+          setTimeout(() => clearInterval(interval), 100)
+          
+          return () => clearInterval(interval)
+        }, [])
+        
+        return <CCalendar calendarDate={date} />
+      }
+      
+      render(<TestComponent />)
+      
+      // Wait for rapid updates to complete
+      await waitFor(() => {
+        expect(screen.getByRole('application')).toBeInTheDocument()
+      }, { timeout: 200 })
+    })
+  })
+
+  describe('Accessibility Edge Cases', () => {
+    it('maintains focus during dynamic updates', async () => {
+      const { rerender } = render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      expect(calendar).toHaveFocus()
+      
+      // Update props while focused
+      rerender(<CCalendar calendarDate="2/16/2022" />)
+      
+      // Focus should be maintained (implementation dependent)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles screen reader announcements', () => {
+      const { rerender } = render(<CCalendar />)
+      
+      // Change to different date
+      rerender(<CCalendar calendarDate="2/16/2022" />)
+      
+      // Verify aria-live regions are updated (implementation dependent)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles high contrast mode', () => {
+      // Mock high contrast media query
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: query.includes('prefers-contrast: high'),
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        })),
+      })
+      
+      render(<CCalendar />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles reduced motion preference', () => {
+      // Mock reduced motion preference
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: query.includes('prefers-reduced-motion: reduce'),
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        })),
+      })
+      
+      render(<CCalendar />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Timezone Edge Cases', () => {
+    it('handles timezone changes during component lifecycle', () => {
+      const { rerender } = render(<CCalendar calendarDate="2/16/2022" />)
+      
+      // Mock timezone change (this is tricky to test properly)
+      const originalDateToString = Date.prototype.toString
+      Date.prototype.toString = function() {
+        return originalDateToString.call(this).replace(/GMT[+-]\d{4}/, 'GMT+0200')
+      }
+      
+      rerender(<CCalendar calendarDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Restore original method
+      Date.prototype.toString = originalDateToString
+    })
+
+    it('handles daylight saving time boundaries', () => {
+      // Test dates around DST transitions
+      const dstDates = [
+        '3/11/2023', // Spring forward (US)
+        '3/12/2023',
+        '3/13/2023',
+        '11/4/2023',  // Fall back (US)
+        '11/5/2023',
+        '11/6/2023'
+      ]
+      
+      dstDates.forEach(dateString => {
+        const { rerender } = render(<CCalendar calendarDate="1/1/2023" />)
+        rerender(<CCalendar calendarDate={dateString} />)
+        expect(screen.getByRole('application')).toBeInTheDocument()
+      })
+    })
+
+    it('handles system clock changes', () => {
+      // Mock system time change
+      const originalNow = Date.now
+      let mockTime = new Date('2022-02-16T12:00:00Z').getTime()
+      
+      Date.now = jest.fn(() => mockTime)
+      
+      render(<CCalendar />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Simulate time jumping forward
+      mockTime += 3600000 // +1 hour
+      
+      // Force re-render
+      act(() => {
+        // Component should handle time changes gracefully
+      })
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Restore original Date.now
+      Date.now = originalNow
+    })
+  })
+
+  describe('Concurrent Mode Compatibility', () => {
+    it('handles interrupting updates gracefully', async () => {
+      const SlowComponent = ({ date }: { date: string }) => {
+        // Simulate slow rendering
+        const start = performance.now()
+        while (performance.now() - start < 5) {
+          // Busy wait for 5ms
+        }
+        return <CCalendar calendarDate={date} />
+      }
+      
+      const { rerender } = render(<SlowComponent date="1/1/2022" />)
+      
+      // Rapid updates that might be interrupted
+      rerender(<SlowComponent date="1/2/2022" />)
+      rerender(<SlowComponent date="1/3/2022" />)
+      rerender(<SlowComponent date="1/4/2022" />)
+      
+      await waitFor(() => {
+        expect(screen.getByRole('application')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Security Edge Cases', () => {
+    it('handles XSS attempts in date strings', () => {
+      const maliciousDate = '<script>alert("xss")</script>'
+      
+      expect(() => {
+        render(<CCalendar calendarDate={maliciousDate} />)
+      }).not.toThrow()
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Verify no script tags were rendered
+      expect(document.querySelector('script')).toBeNull()
+    })
+
+    it('sanitizes user input in callbacks', () => {
+      const maliciousCallback = jest.fn((date) => {
+        // Attempt to access global objects
+        try {
+          (window as any).maliciousCode = 'executed'
+        } catch (e) {
+          // Expected to be blocked
+        }
+      })
+      
+      render(<CCalendar onCalendarDateChange={maliciousCallback} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      // Verify malicious code wasn't executed
+      expect((window as any).maliciousCode).toBeUndefined()
+    })
+  })
+})