690617:1443 237 #01.3

frontend/components/dashboard/__tests__/pending-tasks.test.tsx

@@ -0,0 +1,75 @@
+// File: frontend/components/dashboard/__tests__/pending-tasks.test.tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { PendingTasks } from '../pending-tasks';
+import { PendingTask } from '@/types/dashboard';
+
+describe('PendingTasks', () => {
+  const mockTasks: PendingTask[] = [
+    {
+      publicId: 'task-1',
+      title: 'Review RFA-001',
+      description: 'Needs structural review',
+      type: 'rfa_review',
+      dueDate: new Date('2026-06-10T00:00:00Z').toISOString(),
+      daysOverdue: 5,
+      url: '/rfas/task-1'
+    },
+    {
+      publicId: 'task-2',
+      title: 'Approve Transmittal',
+      description: 'Monthly submittals',
+      type: 'transmittal_approval',
+      dueDate: new Date('2026-06-20T00:00:00Z').toISOString(),
+      daysOverdue: 0,
+      url: '/transmittals/task-2'
+    }
+  ];
+
+  it('renders loading state when isLoading is true', () => {
+    render(<PendingTasks tasks={[]} isLoading={true} />);
+    
+    expect(screen.getByText('Pending Tasks')).toBeInTheDocument();
+    // Check for skeletons (pulse animation)
+    const cardContent = screen.getByText('Pending Tasks').closest('.border');
+    expect(cardContent?.querySelectorAll('.animate-pulse').length).toBe(3);
+  });
+
+  it('renders empty state when no tasks are present', () => {
+    render(<PendingTasks tasks={[]} isLoading={false} />);
+    
+    expect(screen.getByText('Pending Tasks')).toBeInTheDocument();
+    expect(screen.getByText('No pending tasks. Good job!')).toBeInTheDocument();
+  });
+
+  it('handles undefined tasks prop gracefully', () => {
+    render(<PendingTasks tasks={undefined} isLoading={false} />);
+    
+    expect(screen.getByText('Pending Tasks')).toBeInTheDocument();
+    expect(screen.getByText('No pending tasks. Good job!')).toBeInTheDocument();
+  });
+
+  it('renders tasks list correctly', () => {
+    render(<PendingTasks tasks={mockTasks} isLoading={false} />);
+    
+    expect(screen.getByText('Review RFA-001')).toBeInTheDocument();
+    expect(screen.getByText('Needs structural review')).toBeInTheDocument();
+    expect(screen.getByText('Approve Transmittal')).toBeInTheDocument();
+    expect(screen.getByText('Monthly submittals')).toBeInTheDocument();
+
+    // Check count badge
+    const countBadge = screen.getByText('2');
+    expect(countBadge).toHaveClass('bg-destructive');
+  });
+
+  it('displays correct badges for overdue and due soon tasks', () => {
+    render(<PendingTasks tasks={mockTasks} isLoading={false} />);
+    
+    const overdueBadge = screen.getByText('5d overdue');
+    expect(overdueBadge).toHaveClass('bg-destructive');
+
+    const dueSoonBadge = screen.getByText('Due Soon');
+    expect(dueSoonBadge).toHaveClass('border-yellow-200');
+  });
+});

frontend/components/dashboard/__tests__/quick-actions.test.tsx

@@ -0,0 +1,27 @@
+// File: frontend/components/dashboard/__tests__/quick-actions.test.tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { QuickActions } from '../quick-actions';
+
+// Mock Next.js Link component
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children: React.ReactNode; href: string }) => (
+    <a href={href}>{children}</a>
+  )
+}));
+
+describe('QuickActions', () => {
+  it('renders all quick action links correctly', () => {
+    render(<QuickActions />);
+    
+    const newRfaLink = screen.getByRole('link', { name: /new rfa/i });
+    expect(newRfaLink).toHaveAttribute('href', '/rfas/new');
+    
+    const newCorrespondenceLink = screen.getByRole('link', { name: /new correspondence/i });
+    expect(newCorrespondenceLink).toHaveAttribute('href', '/correspondences/new');
+    
+    const uploadDrawingLink = screen.getByRole('link', { name: /upload drawing/i });
+    expect(uploadDrawingLink).toHaveAttribute('href', '/drawings/upload');
+  });
+});

frontend/components/dashboard/__tests__/recent-activity.test.tsx

@@ -0,0 +1,77 @@
+// File: frontend/components/dashboard/__tests__/recent-activity.test.tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { RecentActivity } from '../recent-activity';
+import { ActivityLog } from '@/types/dashboard';
+
+describe('RecentActivity', () => {
+  const mockActivities: ActivityLog[] = [
+    {
+      id: 'act-1',
+      action: 'Created',
+      description: 'Created new RFA-001',
+      targetUrl: '/rfas/1',
+      createdAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(), // 5 minutes ago
+      user: {
+        id: 'u1',
+        name: 'John Doe',
+        initials: 'JD'
+      }
+    },
+    {
+      id: 'act-2',
+      action: 'Approved',
+      description: 'Approved Transmittal TR-005',
+      targetUrl: '/transmittals/5',
+      createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(), // 2 hours ago
+      user: {
+        id: 'u2',
+        name: 'Jane Smith',
+        initials: 'JS'
+      }
+    }
+  ];
+
+  it('renders loading state when isLoading is true', () => {
+    render(<RecentActivity activities={[]} isLoading={true} />);
+    
+    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    // Check for skeletons (pulse animation)
+    const cardContent = screen.getByText('Recent Activity').closest('.border');
+    expect(cardContent?.querySelectorAll('.animate-pulse').length).toBe(3);
+  });
+
+  it('renders empty state when no activities are present', () => {
+    render(<RecentActivity activities={[]} isLoading={false} />);
+    
+    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    expect(screen.getByText('No recent activity.')).toBeInTheDocument();
+  });
+
+  it('handles undefined activities prop gracefully', () => {
+    render(<RecentActivity activities={undefined} isLoading={false} />);
+    
+    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    expect(screen.getByText('No recent activity.')).toBeInTheDocument();
+  });
+
+  it('renders activities list correctly', () => {
+    render(<RecentActivity activities={mockActivities} isLoading={false} />);
+    
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('JD')).toBeInTheDocument();
+    expect(screen.getByText('Created')).toBeInTheDocument();
+    expect(screen.getByText('Created new RFA-001')).toBeInTheDocument();
+    
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    expect(screen.getByText('JS')).toBeInTheDocument();
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+    expect(screen.getByText('Approved Transmittal TR-005')).toBeInTheDocument();
+    
+    // date-fns formatDistanceToNow will output text like '5 minutes ago', 'about 2 hours ago'
+    // We can just verify some part of it or that it renders without error.
+    const createdLink = screen.getByText('Created new RFA-001').closest('a');
+    expect(createdLink).toHaveAttribute('href', '/rfas/1');
+  });
+});

frontend/components/dashboard/__tests__/stats-cards.test.tsx

@@ -0,0 +1,44 @@
+// File: frontend/components/dashboard/__tests__/stats-cards.test.tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { StatsCards } from '../stats-cards';
+import { DashboardStats } from '@/types/dashboard';
+
+describe('StatsCards', () => {
+  const mockStats: DashboardStats = {
+    totalDocuments: 150,
+    totalRfas: 45,
+    approved: 120,
+    pendingApprovals: 15
+  };
+
+  it('renders loading state when isLoading is true', () => {
+    // using container to query raw DOM for animate-pulse since skeletons don't have text
+    const { container } = render(<StatsCards stats={mockStats} isLoading={true} />);
+    const pulses = container.querySelectorAll('.animate-pulse');
+    expect(pulses.length).toBe(4);
+  });
+
+  it('renders loading state when stats is undefined', () => {
+    const { container } = render(<StatsCards stats={undefined} isLoading={false} />);
+    const pulses = container.querySelectorAll('.animate-pulse');
+    expect(pulses.length).toBe(4);
+  });
+
+  it('renders stats cards correctly with values', () => {
+    render(<StatsCards stats={mockStats} isLoading={false} />);
+    
+    expect(screen.getByText('Total Correspondences')).toBeInTheDocument();
+    expect(screen.getByText('150')).toBeInTheDocument();
+
+    expect(screen.getByText('Active RFAs')).toBeInTheDocument();
+    expect(screen.getByText('45')).toBeInTheDocument();
+
+    expect(screen.getByText('Approved Documents')).toBeInTheDocument();
+    expect(screen.getByText('120')).toBeInTheDocument();
+
+    expect(screen.getByText('Pending Approvals')).toBeInTheDocument();
+    expect(screen.getByText('15')).toBeInTheDocument();
+  });
+});