file-starter/tests/integration/client/admin/dashboard.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { DashboardPage } from '../../../../src/client/admin/pages/Dashboard';

// Mock 导航功能
const mockNavigate = vi.fn();
vi.mock('react-router', () => ({
  useNavigate: () => mockNavigate,
}));

describe('DashboardPage 集成测试', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('应该正确渲染核心指标卡片', async () => {
    render(<DashboardPage />);

    // 验证统计卡片显示
    expect(screen.getByText('活跃用户')).toBeInTheDocument();
    expect(screen.getByText('112,893')).toBeInTheDocument();
    expect(screen.getByText('较昨日增长 12.5%')).toBeInTheDocument();

    expect(screen.getByText('系统消息')).toBeInTheDocument();
    expect(screen.getByText('93')).toBeInTheDocument();

    expect(screen.getByText('在线用户')).toBeInTheDocument();
    expect(screen.getByText('1,128')).toBeInTheDocument();
  });

  it('应该正确渲染系统性能指标', async () => {
    render(<DashboardPage />);

    // 验证系统性能部分
    expect(screen.getByText('系统性能')).toBeInTheDocument();
    expect(screen.getByText('当前系统各项资源的使用情况')).toBeInTheDocument();

    expect(screen.getByText('CPU使用率')).toBeInTheDocument();
    expect(screen.getByText('65%')).toBeInTheDocument();

    expect(screen.getByText('内存使用率')).toBeInTheDocument();
    expect(screen.getByText('78%')).toBeInTheDocument();

    expect(screen.getByText('磁盘使用率')).toBeInTheDocument();
    expect(screen.getByText('45%')).toBeInTheDocument();

    expect(screen.getByText('网络使用率')).toBeInTheDocument();
    expect(screen.getByText('32%')).toBeInTheDocument();
  });

  it('应该正确渲染最近活动列表', async () => {
    render(<DashboardPage />);

    // 验证最近活动部分
    expect(screen.getByText('最近活动')).toBeInTheDocument();
    expect(screen.getByText('系统最新操作记录')).toBeInTheDocument();

    expect(screen.getByText('张三 登录系统')).toBeInTheDocument();
    expect(screen.getByText('2分钟前')).toBeInTheDocument();

    expect(screen.getByText('李四 创建了新用户')).toBeInTheDocument();
    expect(screen.getByText('5分钟前')).toBeInTheDocument();

    expect(screen.getByText('王五 删除了用户')).toBeInTheDocument();
    expect(screen.getByText('10分钟前')).toBeInTheDocument();

    expect(screen.getByText('赵六 修改了配置')).toBeInTheDocument();
    expect(screen.getByText('15分钟前')).toBeInTheDocument();
  });

  it('应该正确渲染快捷操作卡片', async () => {
    render(<DashboardPage />);

    // 验证快捷操作部分
    expect(screen.getByText('快捷操作')).toBeInTheDocument();
    expect(screen.getByText('常用的管理功能')).toBeInTheDocument();

    expect(screen.getByText('用户管理')).toBeInTheDocument();
    expect(screen.getByText('查看和管理所有用户')).toBeInTheDocument();

    expect(screen.getByText('系统设置')).toBeInTheDocument();
    expect(screen.getByText('配置系统参数')).toBeInTheDocument();

    expect(screen.getByText('数据备份')).toBeInTheDocument();
    expect(screen.getByText('执行数据备份操作')).toBeInTheDocument();

    expect(screen.getByText('日志查看')).toBeInTheDocument();
    expect(screen.getByText('查看系统日志')).toBeInTheDocument();
  });

  it('应该正确渲染页面标题和描述', async () => {
    render(<DashboardPage />);

    expect(screen.getByText('仪表盘')).toBeInTheDocument();
    expect(screen.getByText('欢迎回来！这里是系统概览和关键指标。')).toBeInTheDocument();
  });

  it('应该具有正确的响应式布局类名', async () => {
    const { container } = render(<DashboardPage />);

    // 验证网格布局类名
    const gridElements = container.querySelectorAll('.grid');
    expect(gridElements.length).toBeGreaterThan(0);

    // 验证响应式类名存在 - 使用更宽松的检查
    const hasResponsiveClasses = container.innerHTML.includes('md:grid-cols-2') ||
                                container.innerHTML.includes('lg:grid-cols-3');
    expect(hasResponsiveClasses).toBe(true);
  });

  it('应该包含正确的图标和视觉元素', async () => {
    render(<DashboardPage />);

    // 验证卡片标题存在
    expect(screen.getByText('活跃用户')).toBeInTheDocument();
    expect(screen.getByText('系统消息')).toBeInTheDocument();
    expect(screen.getByText('在线用户')).toBeInTheDocument();

    // 验证进度条存在 - 使用更通用的检查
    const progressElements = document.querySelectorAll('[role="progressbar"]');
    expect(progressElements.length).toBeGreaterThan(0);
  });

  it('应该正确处理快捷操作导航', async () => {
    const user = userEvent.setup();
    render(<DashboardPage />);

    // 验证快捷操作卡片存在
    expect(screen.getByText('用户管理')).toBeInTheDocument();
    expect(screen.getByText('系统设置')).toBeInTheDocument();
    expect(screen.getByText('数据备份')).toBeInTheDocument();
    expect(screen.getByText('日志查看')).toBeInTheDocument();

    // 点击用户管理卡片
    const userManagementCard = screen.getByText('用户管理').closest('.cursor-pointer');
    await user.click(userManagementCard!);
    expect(mockNavigate).toHaveBeenCalledWith('/admin/users');

    // 点击系统设置卡片
    const settingsCard = screen.getByText('系统设置').closest('.cursor-pointer');
    await user.click(settingsCard!);
    expect(mockNavigate).toHaveBeenCalledWith('/admin/settings');

    // 点击数据备份卡片
    const backupCard = screen.getByText('数据备份').closest('.cursor-pointer');
    await user.click(backupCard!);
    expect(mockNavigate).toHaveBeenCalledWith('/admin/backup');

    // 点击日志查看卡片
    const logsCard = screen.getByText('日志查看').closest('.cursor-pointer');
    await user.click(logsCard!);
    expect(mockNavigate).toHaveBeenCalledWith('/admin/logs');
  });

  it('应该正确渲染所有导航元素', async () => {
    render(<DashboardPage />);

    // 验证所有快捷操作卡片都包含正确的描述
    expect(screen.getByText('查看和管理所有用户')).toBeInTheDocument();
    expect(screen.getByText('配置系统参数')).toBeInTheDocument();
    expect(screen.getByText('执行数据备份操作')).toBeInTheDocument();
    expect(screen.getByText('查看系统日志')).toBeInTheDocument();

    // 验证快捷操作区域存在
    const quickActionSection = screen.getByText('快捷操作');
    expect(quickActionSection).toBeInTheDocument();

    // 验证快捷操作卡片标题存在
    expect(screen.getByText('用户管理')).toBeInTheDocument();
    expect(screen.getByText('系统设置')).toBeInTheDocument();
    expect(screen.getByText('数据备份')).toBeInTheDocument();
    expect(screen.getByText('日志查看')).toBeInTheDocument();
  });
});