leocrm/frontend/src/pages/__tests__/AgentDashboard.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { AgentDashboardPage } from '../AgentDashboard';

// Helper to create a mock mutation result
const mockMutation = (overrides = {}) => ({
  mutateAsync: vi.fn().mockResolvedValue({}),
  isPending: false,
  isError: false,
  error: null,
  data: undefined,
  ...overrides,
});

// Mock the API hooks
vi.mock('@/api/automation', () => ({
  useAgents: vi.fn(),
  useCreateAgent: vi.fn(() => mockMutation()),
  useUpdateAgent: vi.fn(() => mockMutation()),
  useDeleteAgent: vi.fn(() => mockMutation()),
  useExecuteAgent: vi.fn(() => mockMutation()),
  useTestRunAgent: vi.fn(() => mockMutation()),
  useAgentRuns: vi.fn(),
  useAgentVersions: vi.fn(),
  useRestoreAgentVersion: vi.fn(() => mockMutation()),
  useAgentTools: vi.fn(() => ({ data: [] })),
  useSendAgentMessage: vi.fn(() => mockMutation()),
}));

// Mock i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { language: 'en' },
  }),
}));

// Mock toast
vi.mock('@/components/ui/Toast', () => ({
  useToast: () => ({
    toast: { success: vi.fn(), error: vi.fn() },
  }),
}));

// Mock lucide-react icons
vi.mock('lucide-react', () => ({
  Activity: () => <div data-testid="icon-activity" />,
  AlertCircle: () => <div data-testid="icon-alert" />,
  Bot: () => <div data-testid="icon-bot" />,
  Brain: () => <div data-testid="icon-brain" />,
  Clock: () => <div data-testid="icon-clock" />,
  DollarSign: () => <div data-testid="icon-dollar" />,
  GitBranch: () => <div data-testid="icon-git-branch" />,
  History: () => <div data-testid="icon-history" />,
  Loader2: () => <div data-testid="icon-loader" />,
  MessageCircle: () => <div data-testid="icon-message-circle" />,
  Play: () => <div data-testid="icon-play" />,
  Plus: () => <div data-testid="icon-plus" />,
  RefreshCw: () => <div data-testid="icon-refresh" />,
  Send: () => <div data-testid="icon-send" />,
  Settings2: () => <div data-testid="icon-settings2" />,
  TestTube: () => <div data-testid="icon-test-tube" />,
  Trash2: () => <div data-testid="icon-trash" />,
  Zap: () => <div data-testid="icon-zap" />,
}));

// Mock Modal component
vi.mock('@/components/ui/Modal', () => ({
  Modal: ({ open, title, children }: any) => open ? <div data-testid="modal"><h2>{title}</h2>{children}</div> : null,
}));

// Mock AgentForm
vi.mock('@/components/automation/AgentForm', () => ({
  AgentForm: () => <div data-testid="agent-form" />,
}));

// Mock Skeleton
vi.mock('@/components/ui/Skeleton', () => ({
  Skeleton: ({ className }: any) => <div data-testid="skeleton" className={className} />,
}));

// Mock Card
vi.mock('@/components/ui/Card', () => ({
  Card: ({ children, className }: any) => <div className={className}>{children}</div>,
}));

// Mock EmptyState
vi.mock('@/components/ui/EmptyState', () => ({
  EmptyState: ({ title, description, icon, action }: any) => (
    <div data-testid="empty-state">
      <h3>{title}</h3>
      <p>{description}</p>
      {icon}
      {action}
    </div>
  ),
}));

// Mock Badge
vi.mock('@/components/ui/Badge', () => ({
  Badge: ({ children, variant }: any) => <span data-testid="badge" data-variant={variant}>{children}</span>,
}));

const mockAgents = [
  {
    id: '1',
    name: 'Test Agent',
    description: 'A test agent',
    llm_model: 'gpt-4',
    mode: 'reactive',
    is_active: true,
    created_at: '2024-01-01T00:00:00Z',
    updated_at: '2024-01-01T00:00:00Z',
  },
  {
    id: '2',
    name: 'Inactive Agent',
    description: 'An inactive agent',
    llm_model: 'gpt-3.5',
    mode: 'scheduled',
    is_active: false,
    created_at: '2024-01-02T00:00:00Z',
    updated_at: '2024-01-02T00:00:00Z',
  },
];

function renderWithProviders(ui: React.ReactElement) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  });
  return render(
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>{ui}</BrowserRouter>
    </QueryClientProvider>
  );
}

describe('AgentDashboard', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders the agent list', async () => {
    const { useAgents } = await import('@/api/automation');
    (useAgents as any).mockReturnValue({
      data: mockAgents,
      isLoading: false,
      error: null,
    });

    renderWithProviders(<AgentDashboardPage />);

    await waitFor(() => {
      expect(screen.getByText('Test Agent')).toBeDefined();
      expect(screen.getByText('Inactive Agent')).toBeDefined();
    });
  });

  it('shows loading state', async () => {
    const { useAgents } = await import('@/api/automation');
    (useAgents as any).mockReturnValue({
      data: undefined,
      isLoading: true,
      error: null,
    });

    renderWithProviders(<AgentDashboardPage />);

    expect(screen.getAllByTestId('skeleton').length).toBe(3);
  });

  it('shows empty state when no agents', async () => {
    const { useAgents } = await import('@/api/automation');
    (useAgents as any).mockReturnValue({
      data: [],
      isLoading: false,
      error: null,
    });

    renderWithProviders(<AgentDashboardPage />);

    await waitFor(() => {
      expect(screen.getByText('agent.noAgents')).toBeDefined();
    });
  });

  it('opens create form when create button is clicked', async () => {
    const { useAgents } = await import('@/api/automation');
    (useAgents as any).mockReturnValue({
      data: mockAgents,
      isLoading: false,
      error: null,
    });

    renderWithProviders(<AgentDashboardPage />);

    const createButton = screen.getByText('agent.create');
    fireEvent.click(createButton);

    await waitFor(() => {
      expect(screen.getByTestId('modal')).toBeDefined();
    });
  });

  it('calls execute API when execute button is clicked', async () => {
    const { useAgents, useExecuteAgent } = await import('@/api/automation');
    const mockExecute = vi.fn().mockResolvedValue({});
    (useAgents as any).mockReturnValue({
      data: mockAgents,
      isLoading: false,
      error: null,
    });
    (useExecuteAgent as any).mockReturnValue({
      mutateAsync: mockExecute,
      isPending: false,
    });

    renderWithProviders(<AgentDashboardPage />);

    // Execute buttons have title="agent.execute" - find by title attribute
    const executeButtons = screen.getAllByTitle('agent.execute');
    expect(executeButtons.length).toBeGreaterThan(0);
    fireEvent.click(executeButtons[0]);

    await waitFor(() => {
      expect(mockExecute).toHaveBeenCalledWith('1');
    });
  });
});