@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Calendar/Calendar.test.tsx

@@ -5,17 +5,165 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Calendar } from './Calendar';
+import { Calendar } from './index';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import { enAU } from 'date-fns/locale';
+
+let lastDayPickerProps: Record<string, unknown> | null = null;
+let mockDayPickerContext: Record<string, unknown> = {};
 
 // Mock react-day-picker to avoid complex date rendering issues in tests
 vi.mock('react-day-picker', () => {
   const React = require('react');
+  
+  // Default components that react-day-picker provides
+  // Months component filters out default caption/dropdown elements
+  const DefaultMonths = ({ children }: { children?: React.ReactNode }) => {
+    const filteredChildren = React.Children.toArray(children).filter((child: any) => {
+      // Filter out components with displayName 'MonthCaption' or 'Dropdown'
+      if (React.isValidElement(child) && child.type?.displayName) {
+        const displayName = child.type.displayName;
+        if (displayName === 'MonthCaption' || displayName === 'Dropdown') {
+          return false;
+        }
+      }
+      // Filter out elements with role="status" and aria-live="polite" (default caption)
+      if (React.isValidElement(child)) {
+        const props = child.props;
+        if (props?.role === 'status' && props?.['aria-live'] === 'polite') {
+          return false;
+        }
+        // Also check nested children
+        if (props?.children) {
+          const nestedChildren = React.Children.toArray(props.children);
+          if (nestedChildren.some((nested: any) => 
+            React.isValidElement(nested) && 
+            nested.props?.role === 'status' && 
+            nested.props?.['aria-live'] === 'polite'
+          )) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
+    return <>{filteredChildren}</>;
+  };
+  
+  // Root component applies props to child table element (recursively)
+  const DefaultRoot = ({ children, rootRef, className, mode, ...props }: any) => {
+    const rootProps = { 
+      ...props, 
+      'data-root': props['data-root'] !== undefined ? props['data-root'] : (props['dataRoot'] !== undefined ? props['dataRoot'] : 'true')
+    };
+    
+    // Recursively find and update table elements in children
+    // This handles both direct table children and tables nested in components
+    const processChildren = (node: any): any => {
+      if (!React.isValidElement(node)) {
+        return node;
+      }
+      
+      // If this is a table, merge Root props with existing props
+      if (node.type === 'table') {
+        const existingClassName = node.props?.className || '';
+        const mergedClassName = className ? `${className} ${existingClassName}`.trim() : existingClassName;
+        return React.cloneElement(node, {
+          ...rootProps,
+          ref: rootRef,
+          className: mergedClassName,
+          'data-mode': mode,
+          ...node.props, // Preserve existing props, Root props take precedence
+        });
+      }
+      
+      // If this is a component (function or class), process its children from props
+      // Components receive their children as props, so we can process them before rendering
+      const isComponent = typeof node.type === 'function';
+      if (isComponent) {
+        // Process children if they exist in props
+        if (node.props?.children) {
+          const processedChildren = React.Children.map(node.props.children, processChildren);
+          return React.cloneElement(node, { ...node.props, children: processedChildren });
+        }
+        // If no children in props, return as-is (component will render its own children)
+        return node;
+      }
+      
+      // If this element has children, recursively process them
+      if (node.props?.children) {
+        const processedChildren = React.Children.map(node.props.children, processChildren);
+        return React.cloneElement(node, { ...node.props, children: processedChildren });
+      }
+      
+      return node;
+    };
+    
+    return React.Children.map(children, processChildren);
+  };
+  
+  // Month component applies props to child table element
+  // Note: Root processes children first, so Month receives already-processed children
+  // Month should merge its props with existing props
+  const DefaultMonth = ({ children, className, ...props }: any) => {
+    if (!children) return null;
+    
+    return React.Children.map(children, (child: any) => {
+      if (!React.isValidElement(child)) {
+        return child;
+      }
+      
+      // If this is a table, merge Month's props with existing props (from Root)
+      if (child.type === 'table') {
+        const existingClassName = child.props?.className || '';
+        // Merge className: existing (from Root) + Month's className
+        const mergedClassName = className 
+          ? `${existingClassName} ${className}`.trim() 
+          : existingClassName;
+        return React.cloneElement(child, {
+          ...child.props, // Preserve all props from Root first
+          className: mergedClassName, // Then apply merged className
+          ...props, // Month props take precedence for non-className props
+        });
+      }
+      
+      // If this element has children, recursively process them
+      if (child.props?.children) {
+        const processedChildren = React.Children.map(child.props.children, (grandchild: any) => {
+          if (React.isValidElement(grandchild) && grandchild.type === 'table') {
+            const existingClassName = grandchild.props?.className || '';
+            const mergedClassName = className 
+              ? `${existingClassName} ${className}`.trim() 
+              : existingClassName;
+            return React.cloneElement(grandchild, {
+              ...grandchild.props,
+              className: mergedClassName,
+              ...props,
+            });
+          }
+          return grandchild;
+        });
+        return React.cloneElement(child, { ...child.props, children: processedChildren });
+      }
+      
+      return child;
+    });
+  };
+  
   return {
     DayPicker: React.forwardRef<HTMLTableElement, any>(({ selected, onSelect, disabled, mode, className, classNames, components, ...props }: any, ref) => {
+      // Merge provided components with defaults (react-day-picker behavior)
+      const mergedComponents = {
+        Months: DefaultMonths,
+        Root: DefaultRoot,
+        Month: DefaultMonth,
+        ...components,
+      };
+      
+      lastDayPickerProps = { selected, onSelect, disabled, mode, className, classNames, components: mergedComponents, ...props };
       const handleDateClick = (date: Date) => {
         if (disabled && typeof disabled === 'function' && disabled(date)) {
           return;
@@ -45,8 +193,9 @@ vi.mock('react-day-picker', () => {
         return date;
       });
 
-      const IconLeft = components?.IconLeft;
-      const IconRight = components?.IconRight;
+      // Use merged components for rendering
+      const IconLeft = mergedComponents?.IconLeft;
+      const IconRight = mergedComponents?.IconRight;
       const monthsClass = classNames?.months ? `${classNames.months} calendar-header` : 'calendar-header';
 
       // Mock returns a table element to match Calendar's ref forwarding
@@ -89,52 +238,53 @@ vi.mock('react-day-picker', () => {
         </table>
       );
     }),
+    useDayPicker: () => mockDayPickerContext,
   };
 });
 
 describe('Calendar Component', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    lastDayPickerProps = null;
+    mockDayPickerContext = {
+      formatters: {
+        formatCaption: () => 'May 2024',
+      },
+      components: {
+        Chevron: ({ orientation, ...props }: { orientation: string }) => (
+          <span data-testid={`chevron-${orientation}`} {...props} />
+        ),
+      },
+      labels: {
+        labelPrevious: () => 'Previous month',
+        labelNext: () => 'Next month',
+      },
+      previousMonth: new Date(2024, 3, 1),
+      nextMonth: new Date(2024, 5, 1),
+      goToMonth: vi.fn(),
+    };
   });
 
   // Basic rendering tests
   describe('Rendering', () => {
-    it('renders calendar with default props', () => {
-      renderWithProviders(<Calendar />);
-      const calendar = screen.getByTestId('calendar');
-      expect(calendar).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(<Calendar className="custom-calendar" />);
-      const calendar = screen.getByTestId('calendar');
-      // className is applied directly to the table element
-      expect(calendar).toHaveClass('custom-calendar');
-    });
-
-    it('forwards ref correctly', () => {
+    it('renders calendar with default props and custom className', () => {
       const ref = React.createRef<HTMLTableElement>();
-      renderWithProviders(<Calendar ref={ref} />);
-      // Calendar forwards ref to table element
-      // Note: The Calendar component's ref forwarding depends on DayPicker's internal structure.
-      // With the simplified mock, the ref forwarding logic may not execute, but the component
-      // should still accept the ref prop without errors. In real usage with the actual DayPicker,
-      // the ref would be forwarded to the table element.
+      renderWithProviders(<Calendar ref={ref} className="custom-calendar" />);
       const calendar = screen.getByTestId('calendar');
       expect(calendar).toBeInTheDocument();
-      // Verify the ref prop is accepted (component renders without error)
-      // The actual ref forwarding is tested implicitly through component rendering
+      expect(calendar).toHaveClass('custom-calendar');
       expect(ref.current).toBeDefined();
     });
   });
 
   // Single date selection tests
   describe('Single Date Selection', () => {
-    it('handles single date selection', async () => {
+    it('handles single date selection and displays selected date', async () => {
       const handleSelect = vi.fn();
       const user = userEvent.setup();
+      const selectedDate = new Date();
       
-      renderWithProviders(
+      const { rerender } = renderWithProviders(
         <Calendar mode="single" selected={undefined} onSelect={handleSelect} />
       );
       
@@ -146,31 +296,26 @@ describe('Calendar Component', () => {
       
       expect(handleSelect).toHaveBeenCalled();
       expect(handleSelect.mock.calls[0][0]).toBeInstanceOf(Date);
-    });
-
-    it('displays selected date', () => {
-      const selectedDate = new Date();
-      renderWithProviders(
-        <Calendar mode="single" selected={selectedDate} />
-      );
       
-      const dateStr = selectedDate.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      expect(dateButton).toHaveAttribute('aria-selected', 'true');
+      // Test displaying selected date
+      rerender(<Calendar mode="single" selected={selectedDate} />);
+      const selectedDateStr = selectedDate.toISOString().split('T')[0];
+      const selectedButton = screen.getByTestId(`date-${selectedDateStr}`);
+      expect(selectedButton).toHaveAttribute('aria-selected', 'true');
     });
   });
 
   // Multiple date selection tests
   describe('Multiple Date Selection', () => {
-    it('handles multiple date selection', async () => {
+    it('handles multiple date selection and toggles dates', async () => {
       const handleSelect = vi.fn();
       const user = userEvent.setup();
+      const today = new Date();
       
-      renderWithProviders(
+      const { rerender } = renderWithProviders(
         <Calendar mode="multiple" selected={[]} onSelect={handleSelect} />
       );
       
-      const today = new Date();
       const dateStr = today.toISOString().split('T')[0];
       const dateButton = screen.getByTestId(`date-${dateStr}`);
       
@@ -178,36 +323,13 @@ describe('Calendar Component', () => {
       
       expect(handleSelect).toHaveBeenCalled();
       expect(Array.isArray(handleSelect.mock.calls[0][0])).toBe(true);
-    });
-
-    it('toggles date selection in multiple mode', async () => {
-      const TestComponent = () => {
-        const today = new Date();
-        const [selected, setSelected] = React.useState<Date[]>([today]);
-        const handleSelect = vi.fn((dates) => {
-          setSelected(dates);
-          return dates;
-        });
-        
-        return (
-          <Calendar mode="multiple" selected={selected} onSelect={handleSelect} />
-        );
-      };
-      
-      const user = userEvent.setup();
-      renderWithProviders(<TestComponent />);
-      
-      const today = new Date();
-      const dateStr = today.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
       
+      // Test toggle behavior
+      rerender(<Calendar mode="multiple" selected={[today]} onSelect={handleSelect} />);
       expect(dateButton).toHaveAttribute('aria-selected', 'true');
       
       await user.click(dateButton);
-      
-      // After clicking, the date should be deselected (toggled off)
-      // Note: The mock handles the toggle logic
-      expect(dateButton).toBeInTheDocument();
+      expect(handleSelect).toHaveBeenCalledTimes(2);
     });
   });
 
@@ -235,83 +357,40 @@ describe('Calendar Component', () => {
 
   // Disabled dates tests
   describe('Disabled Dates', () => {
-    it('disables dates based on function', () => {
-      const disabledDate = new Date();
-      disabledDate.setDate(disabledDate.getDate() + 1);
-      
-      renderWithProviders(
-        <Calendar
-          mode="single"
-          disabled={(date) => date > new Date()}
-        />
-      );
-      
-      const dateStr = disabledDate.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      expect(dateButton).toBeDisabled();
-    });
-
-    it('prevents selection of disabled dates', async () => {
+    it('disables dates based on function and prevents selection', async () => {
       const handleSelect = vi.fn();
       const user = userEvent.setup();
-      
       const tomorrow = new Date();
       tomorrow.setDate(tomorrow.getDate() + 1);
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
       
       renderWithProviders(
         <Calendar
           mode="single"
           selected={undefined}
           onSelect={handleSelect}
-          disabled={(date) => date > new Date()}
+          disabled={(date) => date > new Date() || date < new Date()}
         />
       );
       
-      const dateStr = tomorrow.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      
-      await user.click(dateButton);
-      
+      // Test future date disabled
+      const tomorrowStr = tomorrow.toISOString().split('T')[0];
+      const tomorrowButton = screen.getByTestId(`date-${tomorrowStr}`);
+      expect(tomorrowButton).toBeDisabled();
+      await user.click(tomorrowButton);
       expect(handleSelect).not.toHaveBeenCalled();
-    });
-
-    it('disables past dates', () => {
-      const yesterday = new Date();
-      yesterday.setDate(yesterday.getDate() - 1);
       
-      renderWithProviders(
-        <Calendar
-          mode="single"
-          disabled={(date) => date < new Date()}
-        />
-      );
-      
-      const dateStr = yesterday.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      expect(dateButton).toBeDisabled();
+      // Test past date disabled
+      const yesterdayStr = yesterday.toISOString().split('T')[0];
+      const yesterdayButton = screen.getByTestId(`date-${yesterdayStr}`);
+      expect(yesterdayButton).toBeDisabled();
     });
   });
 
   // Accessibility tests
   describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      renderWithProviders(<Calendar mode="single" />);
-      const calendar = screen.getByTestId('calendar');
-      expect(calendar).toBeInTheDocument();
-    });
-
-    it('marks selected dates with aria-selected', () => {
-      const selectedDate = new Date();
-      renderWithProviders(
-        <Calendar mode="single" selected={selectedDate} />
-      );
-      
-      const dateStr = selectedDate.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      expect(dateButton).toHaveAttribute('aria-selected', 'true');
-    });
-
-    it('marks unselected dates with aria-selected="false"', () => {
+    it('has proper ARIA attributes for selected and unselected dates', () => {
       const selectedDate = new Date();
       const unselectedDate = new Date();
       unselectedDate.setDate(selectedDate.getDate() + 1);
@@ -320,9 +399,13 @@ describe('Calendar Component', () => {
         <Calendar mode="single" selected={selectedDate} />
       );
       
-      const dateStr = unselectedDate.toISOString().split('T')[0];
-      const dateButton = screen.getByTestId(`date-${dateStr}`);
-      expect(dateButton).toHaveAttribute('aria-selected', 'false');
+      const selectedDateStr = selectedDate.toISOString().split('T')[0];
+      const selectedButton = screen.getByTestId(`date-${selectedDateStr}`);
+      expect(selectedButton).toHaveAttribute('aria-selected', 'true');
+      
+      const unselectedDateStr = unselectedDate.toISOString().split('T')[0];
+      const unselectedButton = screen.getByTestId(`date-${unselectedDateStr}`);
+      expect(unselectedButton).toHaveAttribute('aria-selected', 'false');
     });
   });
 
@@ -342,14 +425,12 @@ describe('Calendar Component', () => {
       };
 
       renderWithProviders(<TestComponent />);
-
       expect(screen.getByTestId('selected-date')).toHaveTextContent('No date selected');
     });
 
     it('handles undefined selected prop gracefully', () => {
       renderWithProviders(<Calendar mode="single" selected={undefined} />);
-      const calendar = screen.getByTestId('calendar');
-      expect(calendar).toBeInTheDocument();
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
     });
   });
 
@@ -383,5 +464,316 @@ describe('Calendar Component', () => {
       expect(header).toHaveClass('calendar-header');
     });
   });
-});
 
+  describe('Month Navigation', () => {
+    it('handles controlled month navigation', () => {
+      const TestComponent = () => {
+        const [month, setMonth] = React.useState<Date>(new Date(2024, 0, 1));
+        return (
+          <Calendar
+            mode="single"
+            month={month}
+            onMonthChange={setMonth}
+          />
+        );
+      };
+
+      renderWithProviders(<TestComponent />);
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles uncontrolled month navigation', () => {
+      renderWithProviders(<Calendar mode="single" />);
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+
+  describe('Custom Component Rendering', () => {
+    it('filters out default caption/dropdown elements from CustomMonths', () => {
+      renderWithProviders(<Calendar mode="single" captionLayout="dropdown" />);
+
+      // Ensure lastDayPickerProps is set after render
+      expect(lastDayPickerProps).toBeDefined();
+      expect(lastDayPickerProps?.components).toBeDefined();
+      
+      const Months = (lastDayPickerProps?.components as { Months?: React.ComponentType<{ children?: React.ReactNode }> })
+        ?.Months;
+      expect(Months).toBeDefined();
+
+      const MockCaption = () => <span>Caption</span>;
+      MockCaption.displayName = 'MonthCaption';
+      const MockDropdown = () => <span>Dropdown</span>;
+      MockDropdown.displayName = 'Dropdown';
+
+      renderWithProviders(
+        <Months>
+          <MockCaption />
+          <MockDropdown />
+          <div>
+            <span role="status" aria-live="polite">
+              Default caption
+            </span>
+          </div>
+          <span>Keep this</span>
+        </Months>
+      );
+
+      expect(screen.queryByText('Caption')).not.toBeInTheDocument();
+      expect(screen.queryByText('Dropdown')).not.toBeInTheDocument();
+      expect(screen.queryByText('Default caption')).not.toBeInTheDocument();
+      expect(screen.getByText('Keep this')).toBeInTheDocument();
+    });
+
+    it('applies root props and handles navigation buttons in CustomMonth', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<Calendar mode="single" />);
+
+      // Ensure lastDayPickerProps is set after render
+      expect(lastDayPickerProps).toBeDefined();
+      expect(lastDayPickerProps?.components).toBeDefined();
+
+      const { Root, Month } = lastDayPickerProps?.components as {
+        Root?: React.ComponentType<any>;
+        Month?: React.ComponentType<any>;
+      };
+
+      expect(Root).toBeDefined();
+      expect(Month).toBeDefined();
+
+      const rootRef = React.createRef<HTMLTableElement>();
+      const previousMonth = mockDayPickerContext.previousMonth as Date;
+      const nextMonth = mockDayPickerContext.nextMonth as Date;
+      const goToMonth = mockDayPickerContext.goToMonth as ReturnType<typeof vi.fn>;
+
+      renderWithProviders(
+        <Root className="root-props" data-root="true" style={{ backgroundColor: 'red' }} rootRef={rootRef} mode="single">
+          <Month calendarMonth={{ date: new Date(2024, 4, 1) }} displayIndex={0} className="month-props">
+            <table data-testid="month-grid">
+              <thead>
+                <tr>
+                  <th colSpan={7}>
+                    <button
+                      onClick={() => goToMonth(previousMonth)}
+                      aria-label="Previous month"
+                    >
+                      Previous month
+                    </button>
+                    <button
+                      onClick={() => goToMonth(nextMonth)}
+                      aria-label="Next month"
+                    >
+                      Next month
+                    </button>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Cell</td>
+                </tr>
+              </tbody>
+            </table>
+          </Month>
+        </Root>
+      );
+
+      const monthGrid = screen.getByTestId('month-grid');
+      expect(monthGrid).toHaveClass('root-props');
+      expect(monthGrid).toHaveClass('month-props');
+      expect(monthGrid).toHaveAttribute('data-root', 'true');
+      expect(monthGrid).toHaveAttribute('data-mode', 'single');
+      expect(rootRef.current).toBe(monthGrid);
+
+      await user.click(screen.getByRole('button', { name: 'Previous month' }));
+      await user.click(screen.getByRole('button', { name: 'Next month' }));
+
+      expect(goToMonth).toHaveBeenCalledWith(previousMonth);
+      expect(goToMonth).toHaveBeenCalledWith(nextMonth);
+    });
+
+    it('renders dropdown selectors when captionLayout is dropdown', () => {
+      renderWithProviders(<Calendar mode="single" captionLayout="dropdown" />);
+
+      // Ensure lastDayPickerProps is set after render
+      expect(lastDayPickerProps).toBeDefined();
+      expect(lastDayPickerProps?.components).toBeDefined();
+
+      const { Month } = lastDayPickerProps?.components as {
+        Month?: React.ComponentType<any>;
+      };
+
+      expect(Month).toBeDefined();
+
+      renderWithProviders(
+        <Month calendarMonth={{ date: new Date(2024, 4, 1) }} displayIndex={0} className="month-props">
+          <table data-testid="month-table">
+            <tbody>
+              <tr>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </Month>
+      );
+
+      // Verify Month component renders correctly with props applied
+      const table = screen.getByTestId('month-table');
+      expect(table).toHaveClass('month-props');
+      // Note: Dropdown selectors are rendered by react-day-picker internally when captionLayout="dropdown"
+      // The mock doesn't fully implement dropdown rendering, but we verify Month component works
+    });
+  });
+
+  describe('Locale Handling', () => {
+    it('uses default en-AU locale', () => {
+      renderWithProviders(<Calendar mode="single" />);
+      // Calendar should render with Australian locale (Monday as first day)
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('accepts custom locale', () => {
+      // Note: The mock doesn't fully test locale, but we verify it doesn't crash
+      renderWithProviders(<Calendar mode="single" locale={enAU} />);
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+
+  describe('Caption Layout', () => {
+    it('handles different caption layout options', () => {
+      const layouts: Array<'buttons' | 'dropdown' | 'dropdown-buttons'> = ['buttons', 'dropdown', 'dropdown-buttons'];
+      
+      layouts.forEach(layout => {
+        const { unmount } = renderWithProviders(
+          <Calendar mode="single" captionLayout={layout} />
+        );
+        expect(screen.getByTestId('calendar')).toBeInTheDocument();
+        unmount();
+      });
+    }, 10000);
+  });
+
+  describe('Start/End Month Boundaries', () => {
+    it('handles startMonth prop', () => {
+      const startMonth = new Date(2024, 0, 1);
+      renderWithProviders(
+        <Calendar mode="single" startMonth={startMonth} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles endMonth prop', () => {
+      const endMonth = new Date(2024, 11, 31);
+      renderWithProviders(
+        <Calendar mode="single" endMonth={endMonth} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles both startMonth and endMonth', () => {
+      const startMonth = new Date(2024, 0, 1);
+      const endMonth = new Date(2024, 11, 31);
+      renderWithProviders(
+        <Calendar mode="single" startMonth={startMonth} endMonth={endMonth} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+
+  describe('Ref Forwarding', () => {
+    it('forwards ref to table element', () => {
+      const ref = React.createRef<HTMLTableElement>();
+      renderWithProviders(<Calendar ref={ref} mode="single" />);
+      // Mock may not fully support ref forwarding, but we verify the calendar renders
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      // If ref is set, verify it points to the calendar element
+      if (ref.current) {
+        expect(ref.current).toBe(screen.getByTestId('calendar'));
+      }
+    }, 10000);
+
+    it('handles ref updates correctly', () => {
+      const ref1 = React.createRef<HTMLTableElement>();
+      const { rerender } = renderWithProviders(<Calendar ref={ref1} mode="single" />);
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+
+      const ref2 = React.createRef<HTMLTableElement>();
+      rerender(<Calendar ref={ref2} mode="single" />);
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+
+  describe('Edge Cases', () => {
+    it('handles invalid dates gracefully', () => {
+      // Calendar should handle invalid dates without crashing
+      const invalidDate = new Date('invalid');
+      if (!isNaN(invalidDate.getTime())) {
+        // Only test if date is actually invalid
+        renderWithProviders(
+          <Calendar mode="single" selected={invalidDate} />
+        );
+        expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      }
+    }, 10000);
+
+    it('handles very old dates', () => {
+      const oldDate = new Date(1900, 0, 1);
+      renderWithProviders(
+        <Calendar mode="single" selected={oldDate} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles very future dates', () => {
+      const futureDate = new Date(2100, 11, 31);
+      renderWithProviders(
+        <Calendar mode="single" selected={futureDate} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles null selected value', () => {
+      renderWithProviders(
+        <Calendar mode="single" selected={null as any} />
+      );
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+
+  describe('Performance', () => {
+    it('handles large date ranges efficiently', () => {
+      const startDate = new Date(2020, 0, 1);
+      const endDate = new Date(2030, 11, 31);
+      
+      renderWithProviders(
+        <Calendar
+          mode="single"
+          fromDate={startDate}
+          toDate={endDate}
+        />
+      );
+      
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+
+    it('handles rapid date selection changes', async () => {
+      const handleSelect = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Calendar mode="single" onSelect={handleSelect} />
+      );
+
+      const today = new Date();
+      const dateStr = today.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+
+      // Rapid clicks
+      await user.click(dateButton);
+      await user.click(dateButton);
+      await user.click(dateButton);
+
+      // Should handle rapid changes without crashing
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    }, 10000);
+  });
+});