test(7.3): add tests for Calendar pages

- CalendarPage: page render, tree/view/detail panes, MonthView default, mobile panes - CalendarKanban: page render, kanban board, task columns, error handling All 13 calendar tests passing.
2026-07-24 00:54:16 +02:00
parent 02024d32b8
commit 6c3ca5bef7
2 changed files with 175 additions and 0 deletions
@@ -0,0 +1,109 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('@/api/calendar', () => ({
+  fetchCalendars: vi.fn().mockResolvedValue([
+    { id: 'cal1', name: 'Personal', type: 'personal', color: '#3b82f6', owner_id: 'u1', shared: false, share_permissions: [] },
+    { id: 'cal2', name: 'Team', type: 'team', color: '#10b981', owner_id: 'u1', shared: true, share_permissions: [] },
+  ]),
+  createCalendar: vi.fn().mockResolvedValue({ id: 'cal3', name: 'New', type: 'personal', color: '#000', owner_id: 'u1', shared: false, share_permissions: [] }),
+  listEntries: vi.fn().mockResolvedValue([
+    { id: 'e1', calendar_id: 'cal1', entry_type: 'appointment', subtype: 'normal', title: 'Team Meeting', all_day: false, priority: 'medium', status: 'open', start: '2024-07-01T10:00:00Z', end: '2024-07-01T11:00:00Z', created_by: 'u1' },
+  ]),
+  updateEntry: vi.fn().mockResolvedValue({}),
+  deleteEntry: vi.fn().mockResolvedValue({}),
+}));
+
+vi.mock('@/components/calendar/CalendarTree', () => ({
+  CalendarTree: () => <div data-testid="calendar-tree-stub">CalendarTree</div>,
+}));
+vi.mock('@/components/calendar/MonthView', () => ({
+  MonthView: () => <div data-testid="month-view-stub">MonthView</div>,
+}));
+vi.mock('@/components/calendar/WeekView', () => ({
+  WeekView: () => <div data-testid="week-view-stub">WeekView</div>,
+}));
+vi.mock('@/components/calendar/DayView', () => ({
+  DayView: () => <div data-testid="day-view-stub">DayView</div>,
+}));
+vi.mock('@/components/calendar/RangeView', () => ({
+  RangeView: () => <div data-testid="range-view-stub">RangeView</div>,
+}));
+vi.mock('@/components/calendar/CalendarDetail', () => ({
+  CalendarDetail: () => <div data-testid="calendar-detail-stub">CalendarDetail</div>,
+}));
+vi.mock('@/components/calendar/AppointmentModal', () => ({
+  AppointmentModal: () => <div data-testid="appointment-modal-stub">AppointmentModal</div>,
+}));
+vi.mock('@/components/calendar/IcsControls', () => ({
+  IcsControls: () => <div data-testid="ics-controls-stub">IcsControls</div>,
+}));
+vi.mock('@/components/calendar/SharingSettings', () => ({
+  SharingSettings: () => <div data-testid="sharing-settings-stub">SharingSettings</div>,
+}));
+vi.mock('@/components/ui/ResizablePanel', () => ({
+  ResizablePanel: ({ children, ...props }: any) => <div data-testid={props['data-testid']}>{children}</div>,
+}));
+vi.mock('@/components/ui/ConfirmDialog', () => ({
+  ConfirmDialog: () => null,
+}));
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+import { CalendarPage } from '@/pages/Calendar';
+
+describe('CalendarPage', () => {
+  it('renders calendar page container', async () => {
+    render(<CalendarPage />);
+    expect(screen.getByTestId('calendar-page')).toBeInTheDocument();
+  });
+
+  it('renders calendar tree pane', async () => {
+    render(<CalendarPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId('calendar-tree-pane')).toBeInTheDocument();
+    });
+  });
+
+  it('renders calendar view pane', async () => {
+    render(<CalendarPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId('calendar-view-pane')).toBeInTheDocument();
+    });
+  });
+
+  it('renders calendar detail pane', async () => {
+    render(<CalendarPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId('calendar-detail-pane')).toBeInTheDocument();
+    });
+  });
+
+  it('renders CalendarTree component', async () => {
+    render(<CalendarPage />);
+    // CalendarTree is rendered inside both desktop and mobile panes
+    await waitFor(() => {
+      expect(screen.getAllByTestId('calendar-tree-stub').length).toBeGreaterThan(0);
+    });
+  });
+
+  it('renders MonthView by default', async () => {
+    render(<CalendarPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId('month-view-stub')).toBeInTheDocument();
+    });
+  });
+
+  it('renders mobile calendar tree pane', async () => {
+    render(<CalendarPage />);
+    expect(screen.getByTestId('mobile-calendar-tree-pane')).toBeInTheDocument();
+  });
+
+  it('renders mobile calendar view pane only after navigation', async () => {
+    render(<CalendarPage />);
+    // Mobile view starts on 'tree', so view pane should not be visible initially
+    expect(screen.queryByTestId('mobile-calendar-view-pane')).not.toBeInTheDocument();
+  });
+});