@coreui/react-pro 5.20.0 → 5.22.0

package/src/components/calendar/__tests__/CCalendar.comprehensive.spec.tsx

@@ -0,0 +1,402 @@
+import * as React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { CCalendar } from '../CCalendar'
+import { convertToDateObject } from '../utils'
+import { SelectionTypes } from '../types'
+
+// Mock Date constructor to control timezone during tests
+const mockDate = (dateString: string) => {
+  const OriginalDate = Date
+  const MockedDate = class extends OriginalDate {
+    constructor(...args: any[]) {
+      if (args.length === 0) {
+        super(dateString)
+      } else {
+        super(...args)
+      }
+    }
+  }
+  MockedDate.now = () => new OriginalDate(dateString).getTime()
+  Object.setPrototypeOf(MockedDate, OriginalDate)
+  Object.setPrototypeOf(MockedDate.prototype, OriginalDate.prototype)
+  return MockedDate as any
+}
+
+describe('CCalendar Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Basic Rendering', () => {
+    it('renders without crashing', () => {
+      render(<CCalendar />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('renders with default props', () => {
+      const { container } = render(<CCalendar />)
+      expect(container.querySelector('.calendar')).toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      const { container } = render(<CCalendar className="custom-calendar" />)
+      expect(container.querySelector('.custom-calendar')).toBeInTheDocument()
+    })
+
+    it('renders with custom data attributes', () => {
+      render(<CCalendar data-testid="calendar-component" />)
+      expect(screen.getByTestId('calendar-component')).toBeInTheDocument()
+    })
+  })
+
+  describe('Date Selection Types', () => {
+    it('renders day selection by default', () => {
+      render(<CCalendar />)
+      // Should show day view by default
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('renders week selection', () => {
+      render(<CCalendar selectionType="week" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('renders month selection', () => {
+      render(<CCalendar selectionType="month" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('renders year selection', () => {
+      render(<CCalendar selectionType="year" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Date Props and Parsing', () => {
+    it('accepts Date object as calendarDate', () => {
+      const testDate = new Date(2022, 1, 16) // February 16, 2022
+      render(<CCalendar calendarDate={testDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts date string as calendarDate', () => {
+      render(<CCalendar calendarDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts Date object as startDate', () => {
+      const startDate = new Date(2022, 1, 16)
+      render(<CCalendar startDate={startDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts date string as startDate', () => {
+      render(<CCalendar startDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts Date object as endDate', () => {
+      const endDate = new Date(2022, 1, 20)
+      render(<CCalendar endDate={endDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts date string as endDate', () => {
+      render(<CCalendar endDate="2/20/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Min/Max Date Constraints', () => {
+    it('accepts minDate as Date object', () => {
+      const minDate = new Date(2022, 0, 1) // January 1, 2022
+      render(<CCalendar minDate={minDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts minDate as string', () => {
+      render(<CCalendar minDate="1/1/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts maxDate as Date object', () => {
+      const maxDate = new Date(2022, 11, 31) // December 31, 2022
+      render(<CCalendar maxDate={maxDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts maxDate as string', () => {
+      render(<CCalendar maxDate="12/31/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Disabled Dates', () => {
+    it('accepts single disabled date', () => {
+      const disabledDate = new Date(2022, 1, 16)
+      render(<CCalendar disabledDate={disabledDate} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts array of disabled dates', () => {
+      const disabledDates = [
+        new Date(2022, 1, 16),
+        new Date(2022, 1, 17),
+        new Date(2022, 1, 18)
+      ]
+      render(<CCalendar disabledDate={disabledDates} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts function for disabled dates', () => {
+      const disabledDateFn = (date: Date) => date.getDay() === 0 || date.getDay() === 6 // weekends
+      render(<CCalendar disabledDate={disabledDateFn} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Callbacks', () => {
+    it('calls onCalendarDateChange when date is selected', async () => {
+      const onCalendarDateChange = jest.fn()
+      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
+      
+      // This test would need more specific DOM interaction based on the actual calendar implementation
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('calls onStartDateChange when start date is selected', async () => {
+      const onStartDateChange = jest.fn()
+      render(<CCalendar onStartDateChange={onStartDateChange} />)
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('calls onEndDateChange when end date is selected', async () => {
+      const onEndDateChange = jest.fn()
+      render(<CCalendar onEndDateChange={onEndDateChange} />)
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('calls onViewChange when view changes', async () => {
+      const onViewChange = jest.fn()
+      render(<CCalendar onViewChange={onViewChange} />)
+      
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Locale Support', () => {
+    it('accepts custom locale', () => {
+      render(<CCalendar locale="pl-PL" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('accepts different locale formats', () => {
+      render(<CCalendar locale="de-DE" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('falls back to default locale for invalid locale', () => {
+      render(<CCalendar locale="invalid-locale" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Range Selection', () => {
+    it('supports range selection', () => {
+      render(
+        <CCalendar 
+          range
+          startDate="2/16/2022"
+          endDate="2/20/2022"
+        />
+      )
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles range selection with only start date', () => {
+      render(
+        <CCalendar 
+          range
+          startDate="2/16/2022"
+        />
+      )
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Navigation', () => {
+    it('supports navigation controls', () => {
+      render(<CCalendar navigation />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('supports custom navigation format', () => {
+      render(<CCalendar navigation navYearFirst />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      render(<CCalendar />)
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports keyboard navigation', async () => {
+      render(<CCalendar />)
+      const calendar = screen.getByRole('application')
+      
+      // Test keyboard navigation
+      await userEvent.keyboard('{ArrowDown}')
+      await userEvent.keyboard('{ArrowUp}')
+      await userEvent.keyboard('{ArrowLeft}')
+      await userEvent.keyboard('{ArrowRight}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Enter key for selection', async () => {
+      const onCalendarDateChange = jest.fn()
+      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      await userEvent.keyboard('{Enter}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Space key for selection', async () => {
+      const onCalendarDateChange = jest.fn()
+      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      await userEvent.keyboard('{Space}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles null calendarDate', () => {
+      render(<CCalendar calendarDate={null} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles undefined calendarDate', () => {
+      render(<CCalendar calendarDate={undefined} />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles invalid date strings', () => {
+      render(<CCalendar calendarDate="invalid-date" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles empty date strings', () => {
+      render(<CCalendar calendarDate="" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles leap year dates', () => {
+      render(<CCalendar calendarDate="2/29/2024" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles invalid leap year dates', () => {
+      render(<CCalendar calendarDate="2/29/2023" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles year boundaries', () => {
+      render(<CCalendar calendarDate="12/31/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles month boundaries', () => {
+      render(<CCalendar calendarDate="1/31/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles very old dates', () => {
+      render(<CCalendar calendarDate="1/1/1900" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('handles far future dates', () => {
+      render(<CCalendar calendarDate="12/31/2099" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props Updates', () => {
+    it('updates when calendarDate prop changes', () => {
+      const { rerender } = render(<CCalendar calendarDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      rerender(<CCalendar calendarDate="3/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('updates when startDate prop changes', () => {
+      const { rerender } = render(<CCalendar startDate="2/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      rerender(<CCalendar startDate="3/16/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('updates when endDate prop changes', () => {
+      const { rerender } = render(<CCalendar endDate="2/20/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      rerender(<CCalendar endDate="3/20/2022" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('updates when selectionType changes', () => {
+      const { rerender } = render(<CCalendar selectionType="day" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      rerender(<CCalendar selectionType="week" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('updates when locale changes', () => {
+      const { rerender } = render(<CCalendar locale="en-US" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+      
+      rerender(<CCalendar locale="pl-PL" />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+
+  describe('Integration with Form Libraries', () => {
+    it('works with controlled components', () => {
+      const TestComponent = () => {
+        const [date, setDate] = React.useState<string | Date | null>("2/16/2022")
+        
+        return (
+          <CCalendar 
+            calendarDate={date}
+            onCalendarDateChange={(date) => setDate(date)}
+          />
+        )
+      }
+      
+      render(<TestComponent />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+
+    it('works with uncontrolled components', () => {
+      render(<CCalendar />)
+      expect(screen.getByRole('application')).toBeInTheDocument()
+    })
+  })
+})