Task 5.25: Dashboard-System — GET /api/v1/dashboard/widgets, DashboardWidgetLoader, DashboardGrid with drag-and-drop, 3 example widgets (RecentContacts, TasksSummary, CalendarUpcoming), updated Dashboard.tsx, i18n, 6 tests

2026-07-24 00:09:26 +02:00
parent 96e183bab2
commit 036e87a9ed
15 changed files with 544 additions and 6 deletions
@@ -0,0 +1,74 @@
+/**
+ * Dashboard tests — Task 5.25.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DashboardGrid } from '@/components/dashboard/DashboardGrid';
+import type { DashboardWidgetDef } from '@/api/dashboard';
+
+// Mock i18n
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+// Mock DashboardWidgetLoader to avoid lazy loading in tests
+vi.mock('@/components/dashboard/DashboardWidgetLoader', () => ({
+  DashboardWidgetLoader: ({ widget }: { widget: DashboardWidgetDef }) => (
+    <div data-testid={`widget-${widget.id}`}>Widget: {widget.label}</div>
+  ),
+}));
+
+// Mock Skeleton
+vi.mock('@/components/ui/Skeleton', () => ({
+  Skeleton: ({ className }: { className?: string }) => (
+    <div className={className} data-testid="skeleton">Loading...</div>
+  ),
+}));
+
+const mockWidgets: DashboardWidgetDef[] = [
+  {
+    id: 'recent_contacts',
+    label_key: 'dashboard.recentContacts',
+    label: 'Recent Contacts',
+    component: '@/components/dashboard/RecentContactsWidget',
+    icon: 'Users',
+    order: 10,
+    col_span: 2,
+    row_span: 1,
+    permission: '',
+    plugin_name: 'contacts',
+  },
+  {
+    id: 'tasks_summary',
+    label_key: 'dashboard.tasksSummary',
+    label: 'Tasks Summary',
+    component: '@/components/dashboard/TasksSummaryWidget',
+    icon: 'CheckSquare',
+    order: 20,
+    col_span: 1,
+    row_span: 1,
+    permission: '',
+    plugin_name: 'tasks',
+  },
+];
+
+describe('DashboardGrid', () => {
+  it('renders widgets in a grid', () => {
+    render(<DashboardGrid widgets={mockWidgets} />);
+    expect(screen.getByTestId('dashboard-grid')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-grid-item-recent_contacts')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-grid-item-tasks_summary')).toBeInTheDocument();
+  });
+
+  it('shows empty message when no widgets', () => {
+    render(<DashboardGrid widgets={[]} />);
+    expect(screen.getByTestId('dashboard-grid-empty')).toBeInTheDocument();
+  });
+
+  it('renders widget labels', () => {
+    render(<DashboardGrid widgets={mockWidgets} />);
+    expect(screen.getByText('Recent Contacts')).toBeInTheDocument();
+    expect(screen.getByText('Tasks Summary')).toBeInTheDocument();
+  });
+});