@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/calendar/Calendar/MiniMonthCalendar.spec.js

@@ -0,0 +1,1191 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/svelte';
+import MiniMonthCalendar from './MiniMonthCalendar.svelte';
+
+describe('MiniMonthCalendar Component', () => {
+  const mockEvents = [
+    { date: '2024-03-15', id: 1, name: 'Event 1' },
+    { date: '2024-03-20', id: 2, name: 'Event 2' },
+    { date: '2024-03-20', id: 3, name: 'Event 3' },
+  ];
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2024-03-10T12:00:00Z'));
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders calendar grid', () => {
+      const { container } = render(MiniMonthCalendar);
+      expect(container.querySelector('[role="grid"]')).toBeInTheDocument();
+    });
+
+    it('renders day headers', () => {
+      render(MiniMonthCalendar);
+      expect(screen.getByRole('columnheader', { name: 'Sunday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Monday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Tuesday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Wednesday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Thursday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Friday' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Saturday' })).toBeInTheDocument();
+    });
+
+    it('renders days of the month', () => {
+      const { container } = render(MiniMonthCalendar);
+      // March 2024 has 31 days
+      const allCells = container.querySelectorAll('[role="gridcell"]');
+      // Should have at least 31 day cells (actual days, not preview days)
+      expect(allCells.length).toBeGreaterThanOrEqual(31);
+    });
+
+    it('renders month name in header', () => {
+      render(MiniMonthCalendar);
+      expect(screen.getByText('March')).toBeInTheDocument();
+    });
+
+    it('shows navigation by default', () => {
+      render(MiniMonthCalendar);
+      expect(screen.getByLabelText('Previous month')).toBeInTheDocument();
+      expect(screen.getByLabelText('Next month')).toBeInTheDocument();
+      expect(screen.getByLabelText('Go to current month')).toBeInTheDocument();
+    });
+
+    it('hides navigation when showNavigation is false', () => {
+      render(MiniMonthCalendar, { props: { showNavigation: false } });
+      expect(screen.queryByLabelText('Previous month')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Next month')).not.toBeInTheDocument();
+    });
+
+    it('hides today button when showTodayButton is false', () => {
+      render(MiniMonthCalendar, { props: { showTodayButton: false } });
+      expect(screen.queryByLabelText('Go to current month')).not.toBeInTheDocument();
+    });
+
+    it('shows legend for availability variant by default', () => {
+      render(MiniMonthCalendar, { props: { variant: 'availability' } });
+      expect(screen.getByText('Available')).toBeInTheDocument();
+      expect(screen.getByText('Unavailable')).toBeInTheDocument();
+    });
+
+    it('hides legend when showLegend is false', () => {
+      render(MiniMonthCalendar, { props: { variant: 'availability', showLegend: false } });
+      expect(screen.queryByText('Available')).not.toBeInTheDocument();
+      expect(screen.queryByText('Unavailable')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('variants', () => {
+    it('renders availability variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+      expect(screen.getByText('Available')).toBeInTheDocument();
+    });
+
+    it('renders display variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'display', events: mockEvents }
+      });
+      // Display variant shows event indicators
+      const gridCells = container.querySelectorAll('[role="gridcell"]');
+      expect(gridCells.length).toBeGreaterThan(0);
+    });
+
+    it('renders public variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'public', events: mockEvents }
+      });
+      const gridCells = container.querySelectorAll('[role="gridcell"]');
+      expect(gridCells.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('date selection (availability variant)', () => {
+    it('selects a date when clicked', async () => {
+      const onDateSelect = vi.fn();
+      const selectedDates = [];
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          selectedDates,
+          onDateSelect
+        }
+      });
+
+      // Find a future date (March 15, 2024)
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && !cell.hasAttribute('aria-disabled'));
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(onDateSelect).toHaveBeenCalledWith(
+          expect.objectContaining({
+            date: expect.stringContaining('2024-03-15'),
+            selected: true
+          })
+        );
+      }
+    });
+
+    it('deselects a date when clicked again', async () => {
+      const onDateSelect = vi.fn();
+      const selectedDates = ['2024-03-15'];
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          selectedDates,
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell =>
+        cell.textContent.includes('15') && cell.getAttribute('aria-selected') === 'true'
+      );
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(onDateSelect).toHaveBeenCalledWith(
+          expect.objectContaining({
+            date: expect.stringContaining('2024-03-15'),
+            selected: false
+          })
+        );
+      }
+    });
+
+    it('does not select past dates in availability variant', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      // Try to click March 5 (past date, today is March 10)
+      const cells = screen.getAllByRole('gridcell');
+      const day5 = cells.find(cell => {
+        const text = cell.textContent.trim();
+        return text === '5' && cell.getAttribute('aria-disabled') !== 'true';
+      });
+
+      if (day5) {
+        await fireEvent.click(day5);
+        // Should not be called for past dates
+        expect(onDateSelect).not.toHaveBeenCalled();
+      }
+    });
+
+    it('does not select dates in readOnly mode', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          readOnly: true,
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15'));
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(onDateSelect).not.toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('events display', () => {
+    it('shows event indicators for display variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: mockEvents
+        }
+      });
+
+      // Check for event indicator dots
+      const dots = container.querySelectorAll('.bg-blue-600, .bg-blue-500');
+      expect(dots.length).toBeGreaterThan(0);
+    });
+
+    it('shows multiple event indicators when multiple events on same day', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: mockEvents // March 20 has 2 events
+        }
+      });
+
+      const dots = container.querySelectorAll('.bg-blue-600, .bg-blue-500');
+      // Should show up to 3 dots per day
+      expect(dots.length).toBeGreaterThan(0);
+    });
+
+    it('calls onDayClick when clicking day with events', async () => {
+      const onDayClick = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: mockEvents,
+          onDayClick
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15'));
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(onDayClick).toHaveBeenCalledWith(
+          expect.objectContaining({
+            date: expect.stringContaining('2024-03-15'),
+            events: expect.arrayContaining([
+              expect.objectContaining({ id: 1 })
+            ])
+          })
+        );
+      }
+    });
+
+    it('does not call onDayClick for days without events', async () => {
+      const onDayClick = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: mockEvents,
+          onDayClick
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      // Click day 5 which has no events
+      const day5 = cells.find(cell => cell.textContent.trim() === '5');
+
+      if (day5) {
+        await fireEvent.click(day5);
+        expect(onDayClick).not.toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('month navigation', () => {
+    it('navigates to next month', async () => {
+      const onMonthChange = vi.fn();
+      render(MiniMonthCalendar, { props: { onMonthChange } });
+
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('April')).toBeInTheDocument();
+      });
+
+      expect(onMonthChange).toHaveBeenCalledWith(
+        expect.objectContaining({ month: 3, year: 2024 })
+      );
+    });
+
+    it('navigates to previous month', async () => {
+      const onMonthChange = vi.fn();
+      render(MiniMonthCalendar, { props: { onMonthChange } });
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.click(prevButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('February')).toBeInTheDocument();
+      });
+
+      expect(onMonthChange).toHaveBeenCalledWith(
+        expect.objectContaining({ month: 1, year: 2024 })
+      );
+    });
+
+    it('wraps to next year when navigating from December', async () => {
+      vi.setSystemTime(new Date('2024-12-15T12:00:00Z'));
+      render(MiniMonthCalendar);
+
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('January')).toBeInTheDocument();
+      });
+    });
+
+    it('wraps to previous year when navigating from January', async () => {
+      vi.setSystemTime(new Date('2024-01-15T12:00:00Z'));
+      render(MiniMonthCalendar);
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.click(prevButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('December')).toBeInTheDocument();
+      });
+    });
+
+    it('navigates to current month when Today button clicked', async () => {
+      vi.setSystemTime(new Date('2024-03-10T12:00:00Z'));
+      render(MiniMonthCalendar);
+
+      // Navigate to a different month first
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+      await waitFor(() => expect(screen.getByText('April')).toBeInTheDocument(), { timeout: 1000 });
+
+      // Wait for animation to complete
+      await vi.advanceTimersByTimeAsync(500);
+
+      // Click Today button
+      const todayButton = screen.getByLabelText('Go to current month');
+      await fireEvent.click(todayButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('March')).toBeInTheDocument();
+      }, { timeout: 1000 });
+    });
+
+    it('disables Today button when at current month', () => {
+      render(MiniMonthCalendar);
+      const todayButton = screen.getByLabelText('Go to current month');
+      expect(todayButton).toBeDisabled();
+    });
+
+    it('enables Today button when not at current month', async () => {
+      render(MiniMonthCalendar);
+
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+
+      await waitFor(() => {
+        const todayButton = screen.getByLabelText('Go to current month');
+        expect(todayButton).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('disablePastNavigation', () => {
+    it('disables previous month button at current month', () => {
+      render(MiniMonthCalendar, { props: { disablePastNavigation: true } });
+      const prevButton = screen.getByLabelText('Previous month');
+      expect(prevButton).toBeDisabled();
+    });
+
+    it('enables previous month button when not at current month', async () => {
+      render(MiniMonthCalendar, { props: { disablePastNavigation: true } });
+
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+
+      await waitFor(() => {
+        const prevButton = screen.getByLabelText('Previous month');
+        expect(prevButton).not.toBeDisabled();
+      });
+    });
+
+    it('allows past navigation when disablePastNavigation is false', () => {
+      render(MiniMonthCalendar, { props: { disablePastNavigation: false } });
+      const prevButton = screen.getByLabelText('Previous month');
+      expect(prevButton).not.toBeDisabled();
+    });
+  });
+
+  describe('save status indicator', () => {
+    it('shows saving spinner', () => {
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          saveStatus: 'saving'
+        }
+      });
+
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          saveStatus: 'saving'
+        }
+      });
+      // Check for spinner
+      expect(container.querySelector('.w-5.h-5')).toBeInTheDocument();
+    });
+
+    it('shows saved checkmark', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          saveStatus: 'saved'
+        }
+      });
+
+      // Check for green checkmark
+      const checkmark = container.querySelector('.text-green-600');
+      expect(checkmark).toBeInTheDocument();
+    });
+
+    it('does not show status for non-availability variants', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          saveStatus: 'saving'
+        }
+      });
+
+      // Should not show spinner for display variant
+      expect(container.querySelector('.text-green-600')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('triggers selection on Enter key', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.keyDown(day15, { key: 'Enter' });
+        expect(onDateSelect).toHaveBeenCalled();
+      }
+    });
+
+    it('triggers selection on Space key', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.keyDown(day15, { key: ' ' });
+        expect(onDateSelect).toHaveBeenCalled();
+      }
+    });
+
+    it('does not trigger on other keys', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.keyDown(day15, { key: 'Tab' });
+        expect(onDateSelect).not.toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has proper ARIA grid structure', () => {
+      const { container } = render(MiniMonthCalendar);
+      const grid = container.querySelector('[role="grid"]');
+      expect(grid).toHaveAttribute('aria-label', expect.stringContaining('March'));
+      expect(grid).toHaveAttribute('aria-label', expect.stringContaining('2024'));
+    });
+
+    it('marks selected dates with aria-selected', () => {
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          selectedDates: ['2024-03-15']
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const selectedCell = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+      expect(selectedCell).toBeInTheDocument();
+    });
+
+    it('marks past dates as disabled in availability variant', () => {
+      render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const disabledCells = cells.filter(cell =>
+        cell.getAttribute('aria-disabled') === 'true'
+      );
+      expect(disabledCells.length).toBeGreaterThan(0);
+    });
+
+    it('provides descriptive aria-labels for days', () => {
+      render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        const ariaLabel = day15.getAttribute('aria-label');
+        expect(ariaLabel).toBeTruthy();
+        expect(ariaLabel).toContain('March');
+        expect(ariaLabel).toContain('15');
+      }
+    });
+
+    it('includes today indicator in aria-label', () => {
+      render(MiniMonthCalendar);
+
+      const cells = screen.getAllByRole('gridcell');
+      const todayCell = cells.find(cell => {
+        const label = cell.getAttribute('aria-label');
+        return label && label.includes('Today');
+      });
+
+      expect(todayCell).toBeInTheDocument();
+    });
+
+    it('sets correct tabindex for interactive days', () => {
+      render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const focusableCells = cells.filter(cell => cell.tabIndex === 0);
+
+      // Future dates should be focusable
+      expect(focusableCells.length).toBeGreaterThan(0);
+    });
+
+    it('sets tabindex -1 for non-interactive days', () => {
+      render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const nonFocusableCells = cells.filter(cell => cell.tabIndex === -1);
+
+      // Past dates should not be focusable
+      expect(nonFocusableCells.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('preview days', () => {
+    it('shows previous month preview days by default', () => {
+      const { container } = render(MiniMonthCalendar);
+      const previewDays = container.querySelectorAll('.text-gray-300, .dark\\:text-gray-600');
+      // March 2024 starts on a Friday, so should show some preview days
+      expect(previewDays.length).toBeGreaterThan(0);
+    });
+
+    it('shows next month preview days by default', () => {
+      const { container } = render(MiniMonthCalendar);
+      const previewDays = container.querySelectorAll('.text-gray-300, .dark\\:text-gray-600');
+      expect(previewDays.length).toBeGreaterThan(0);
+    });
+
+    it('hides preview days when showPartialPreview is false', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { showPartialPreview: false }
+      });
+
+      // When showPartialPreview is false, there should be no preview day elements with pointer-events-none
+      const previewDays = container.querySelectorAll('.pointer-events-none');
+      expect(previewDays.length).toBe(0);
+    });
+  });
+
+  describe('touch events', () => {
+    it('handles touch events for day selection', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.touchEnd(day15, {
+          preventDefault: vi.fn()
+        });
+        expect(onDateSelect).toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('swipe navigation', () => {
+    it('handles swipe right to go to previous month', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start touch
+      await fireEvent.touchStart(calendarContainer, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      });
+
+      // Swipe right (previous month)
+      await fireEvent.touchMove(calendarContainer, {
+        touches: [{ clientX: 200, clientY: 100 }]
+      });
+
+      await fireEvent.touchEnd(calendarContainer);
+
+      // Should navigate to previous month
+      await waitFor(() => {
+        expect(screen.getByText('February')).toBeInTheDocument();
+      });
+    });
+
+    it('handles swipe left to go to next month', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start touch
+      await fireEvent.touchStart(calendarContainer, {
+        touches: [{ clientX: 200, clientY: 100 }]
+      });
+
+      // Swipe left (next month)
+      await fireEvent.touchMove(calendarContainer, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      });
+
+      await fireEvent.touchEnd(calendarContainer);
+
+      // Should navigate to next month
+      await waitFor(() => {
+        expect(screen.getByText('April')).toBeInTheDocument();
+      });
+    });
+
+    it('cancels swipe if vertical scroll detected', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start touch
+      await fireEvent.touchStart(calendarContainer, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      });
+
+      // Move vertically (should cancel horizontal swipe)
+      await fireEvent.touchMove(calendarContainer, {
+        touches: [{ clientX: 105, clientY: 200 }]
+      });
+
+      await fireEvent.touchEnd(calendarContainer);
+
+      // Should still be on March
+      expect(screen.getByText('March')).toBeInTheDocument();
+    });
+
+    it('does not swipe when threshold not met', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start touch
+      await fireEvent.touchStart(calendarContainer, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      });
+
+      // Small swipe (below threshold)
+      await fireEvent.touchMove(calendarContainer, {
+        touches: [{ clientX: 110, clientY: 100 }]
+      });
+
+      await fireEvent.touchEnd(calendarContainer);
+
+      // Should still be on March
+      expect(screen.getByText('March')).toBeInTheDocument();
+    });
+  });
+
+  describe('mouse drag navigation', () => {
+    it('handles mouse drag right to go to previous month', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start drag
+      await fireEvent.mouseDown(calendarContainer, {
+        clientX: 100,
+        clientY: 100,
+        button: 0
+      });
+
+      // Drag right (previous month)
+      await fireEvent.mouseMove(calendarContainer, {
+        clientX: 200,
+        clientY: 100
+      });
+
+      await fireEvent.mouseUp(calendarContainer);
+
+      // Should navigate to previous month
+      await waitFor(() => {
+        expect(screen.getByText('February')).toBeInTheDocument();
+      });
+    });
+
+    it('handles mouse drag left to go to next month', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start drag
+      await fireEvent.mouseDown(calendarContainer, {
+        clientX: 200,
+        clientY: 100,
+        button: 0
+      });
+
+      // Drag left (next month)
+      await fireEvent.mouseMove(calendarContainer, {
+        clientX: 100,
+        clientY: 100
+      });
+
+      await fireEvent.mouseUp(calendarContainer);
+
+      // Should navigate to next month
+      await waitFor(() => {
+        expect(screen.getByText('April')).toBeInTheDocument();
+      });
+    });
+
+    it('ignores non-left mouse button', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Try to drag with right button
+      await fireEvent.mouseDown(calendarContainer, {
+        clientX: 100,
+        clientY: 100,
+        button: 2
+      });
+
+      await fireEvent.mouseMove(calendarContainer, {
+        clientX: 200,
+        clientY: 100
+      });
+
+      await fireEvent.mouseUp(calendarContainer);
+
+      // Should still be on March
+      expect(screen.getByText('March')).toBeInTheDocument();
+    });
+
+    it('handles mouseleave during drag', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start drag
+      await fireEvent.mouseDown(calendarContainer, {
+        clientX: 100,
+        clientY: 100,
+        button: 0
+      });
+
+      // Small move (not enough to trigger swipe)
+      await fireEvent.mouseMove(calendarContainer, {
+        clientX: 120,
+        clientY: 100
+      });
+
+      // Mouse leaves container
+      await fireEvent.mouseLeave(calendarContainer);
+
+      // Should complete or cancel the swipe - just verify no error
+      const monthName = screen.queryByText('March') || screen.queryByText('February');
+      expect(monthName).toBeInTheDocument();
+    });
+
+    it('cancels mouse drag if vertical scroll detected', async () => {
+      const { container } = render(MiniMonthCalendar);
+      const calendarContainer = container.querySelector('.w-full.max-w-full');
+
+      // Start drag
+      await fireEvent.mouseDown(calendarContainer, {
+        clientX: 100,
+        clientY: 100,
+        button: 0
+      });
+
+      // Move vertically
+      await fireEvent.mouseMove(calendarContainer, {
+        clientX: 105,
+        clientY: 200
+      });
+
+      await fireEvent.mouseUp(calendarContainer);
+
+      // Should still be on March
+      expect(screen.getByText('March')).toBeInTheDocument();
+    });
+  });
+
+  describe('button press states', () => {
+    it('applies pressed state on previous button mousedown', async () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { disablePastNavigation: false }
+      });
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.mouseDown(prevButton);
+
+      expect(prevButton.className).toContain('scale-90');
+    });
+
+    it('removes pressed state on previous button mouseup', async () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { disablePastNavigation: false }
+      });
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.mouseDown(prevButton);
+      await fireEvent.mouseUp(prevButton);
+
+      expect(prevButton.className).not.toContain('scale-90');
+    });
+
+    it('applies pressed state on next button mousedown', async () => {
+      render(MiniMonthCalendar);
+
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.mouseDown(nextButton);
+
+      expect(nextButton.className).toContain('scale-90');
+    });
+
+    it('applies pressed state on today button mousedown', async () => {
+      render(MiniMonthCalendar);
+
+      // Navigate away from current month first
+      const nextButton = screen.getByLabelText('Next month');
+      await fireEvent.click(nextButton);
+
+      await waitFor(() => {
+        const todayButton = screen.getByLabelText('Go to current month');
+        fireEvent.mouseDown(todayButton);
+        expect(todayButton.className).toContain('scale-95');
+      });
+    });
+
+    it('handles touch events on navigation buttons', async () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { disablePastNavigation: false }
+      });
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.touchStart(prevButton, {
+        touches: [{ clientX: 0, clientY: 0 }]
+      });
+
+      expect(prevButton.className).toContain('scale-90');
+
+      await fireEvent.touchEnd(prevButton, {
+        touches: []
+      });
+      expect(prevButton.className).not.toContain('scale-90');
+    });
+
+    it('handles touchcancel on navigation buttons', async () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { disablePastNavigation: false }
+      });
+
+      const prevButton = screen.getByLabelText('Previous month');
+      await fireEvent.touchStart(prevButton, {
+        touches: [{ clientX: 0, clientY: 0 }]
+      });
+      await fireEvent.touchCancel(prevButton);
+
+      expect(prevButton.className).not.toContain('scale-90');
+    });
+  });
+
+  describe('styling and visual states', () => {
+    it('applies selected style to selected dates', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          selectedDates: ['2024-03-15']
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const selectedCell = cells.find(cell =>
+        cell.getAttribute('aria-selected') === 'true'
+      );
+
+      expect(selectedCell?.className).toContain('bg-blue-700');
+    });
+
+    it('applies past date style for availability variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const pastCell = cells.find(cell =>
+        cell.textContent.trim() === '5' && // Day 5 is in the past
+        !cell.hasAttribute('aria-disabled')
+      );
+
+      if (pastCell) {
+        expect(pastCell.className).toContain('bg-gray-');
+      }
+    });
+
+    it('applies event indicator background for display variant', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: mockEvents
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const eventCell = cells.find(cell => cell.textContent.includes('15'));
+
+      if (eventCell) {
+        expect(eventCell.className).toContain('bg-blue-');
+      }
+    });
+
+    it('shows cursor pointer for interactive days', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const futureCell = cells.find(cell =>
+        cell.tabIndex === 0
+      );
+
+      expect(futureCell?.className).toContain('cursor-pointer');
+    });
+
+    it('shows default cursor for past days', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const pastCell = cells.find(cell =>
+        cell.textContent.trim() === '5'
+      );
+
+      if (pastCell) {
+        expect(pastCell.className).toContain('cursor-default');
+      }
+    });
+  });
+
+  describe('prefers-reduced-motion', () => {
+    it('detects prefers-reduced-motion media query', () => {
+      const mockMatchMedia = vi.fn().mockImplementation(query => ({
+        matches: query === '(prefers-reduced-motion: reduce)',
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }));
+
+      window.matchMedia = mockMatchMedia;
+
+      render(MiniMonthCalendar);
+
+      expect(mockMatchMedia).toHaveBeenCalledWith('(prefers-reduced-motion: reduce)');
+    });
+  });
+
+  describe('haptic feedback', () => {
+    beforeEach(() => {
+      // Reset window.matchMedia to prevent errors
+      window.matchMedia = vi.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }));
+
+      delete window.webkit;
+      delete window.TapticEngine;
+      navigator.vibrate = vi.fn().mockReturnValue(true);
+    });
+
+    it('triggers webkit haptic when available', async () => {
+      const postMessage = vi.fn();
+      window.webkit = {
+        messageHandlers: {
+          haptic: { postMessage }
+        }
+      };
+
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(postMessage).toHaveBeenCalledWith('light');
+      }
+    });
+
+    it('triggers TapticEngine when available', async () => {
+      const impact = vi.fn();
+      window.TapticEngine = { impact };
+
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(impact).toHaveBeenCalledWith({ style: 'light' });
+      }
+    });
+
+    it('triggers navigator.vibrate as fallback', async () => {
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(navigator.vibrate).toHaveBeenCalledWith(10);
+      }
+    });
+
+    it('triggers medium haptic for deselection', async () => {
+      const postMessage = vi.fn();
+      window.webkit = {
+        messageHandlers: {
+          haptic: { postMessage }
+        }
+      };
+
+      const onDateSelect = vi.fn();
+      render(MiniMonthCalendar, {
+        props: {
+          variant: 'availability',
+          selectedDates: ['2024-03-15'],
+          onDateSelect
+        }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell =>
+        cell.textContent.includes('15') && cell.getAttribute('aria-selected') === 'true'
+      );
+
+      if (day15) {
+        await fireEvent.click(day15);
+        expect(postMessage).toHaveBeenCalledWith('medium');
+      }
+    });
+  });
+
+  describe('edge cases', () => {
+    beforeEach(() => {
+      // Reset window.matchMedia to prevent errors
+      window.matchMedia = vi.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }));
+    });
+
+    it('handles empty events array', () => {
+      const { container } = render(MiniMonthCalendar, {
+        props: {
+          variant: 'display',
+          events: []
+        }
+      });
+
+      expect(container.querySelector('[role="grid"]')).toBeInTheDocument();
+    });
+
+    it('handles undefined callbacks', async () => {
+      render(MiniMonthCalendar, {
+        props: { variant: 'availability' }
+      });
+
+      const cells = screen.getAllByRole('gridcell');
+      const day15 = cells.find(cell => cell.textContent.includes('15') && cell.tabIndex === 0);
+
+      if (day15) {
+        await expect(fireEvent.click(day15)).resolves.not.toThrow();
+      }
+    });
+
+    it('handles month with different starting day', async () => {
+      vi.setSystemTime(new Date('2024-04-10T12:00:00Z'));
+      const { container } = render(MiniMonthCalendar);
+
+      // April 2024 has 30 days
+      const allCells = container.querySelectorAll('[role="gridcell"]');
+      expect(allCells.length).toBeGreaterThanOrEqual(30);
+    });
+
+    it('handles February in leap year', async () => {
+      vi.setSystemTime(new Date('2024-02-10T12:00:00Z'));
+      const { container } = render(MiniMonthCalendar);
+
+      // 2024 is a leap year, February has 29 days
+      const allCells = container.querySelectorAll('[role="gridcell"]');
+      expect(allCells.length).toBeGreaterThanOrEqual(29);
+    });
+
+    it('handles February in non-leap year', async () => {
+      vi.setSystemTime(new Date('2023-02-10T12:00:00Z'));
+      const { container } = render(MiniMonthCalendar);
+
+      // 2023 is not a leap year, February has 28 days
+      const allCells = container.querySelectorAll('[role="gridcell"]');
+      expect(allCells.length).toBeGreaterThanOrEqual(28);
+    });
+  });
+});