file-starter/src/client/__integration_tests__/admin/users.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UsersPage } from '@/client/admin/pages/Users';
import { TestWrapper } from '@/client/__test_utils__/test-render';

// Mock API 客户端
vi.mock('@/client/api', () => ({
  userClient: {
    $get: vi.fn().mockResolvedValue({
      status: 200,
      ok: true,
      json: async () => ({
        data: [
          {
            id: 1,
            username: 'admin',
            nickname: '管理员',
            email: 'admin@example.com',
            phone: '13800138000',
            name: '系统管理员',
            isDisabled: 0,
            createdAt: '2024-01-01T00:00:00.000Z',
            roles: [{ id: 1, name: 'admin' }]
          }
        ],
        pagination: {
          total: 1,
          current: 1,
          pageSize: 10
        }
      })
    }),
    $post: vi.fn().mockResolvedValue({
      status: 201,
      ok: true,
      json: async () => ({ message: '用户创建成功' })
    }),
    ':id': {
      $put: vi.fn().mockResolvedValue({
        status: 200,
        ok: true,
        json: async () => ({ message: '用户更新成功' })
      }),
      $delete: vi.fn().mockResolvedValue({
        status: 204,
        ok: true
      })
    }
  }
}));

// Mock toast 和 react-hook-form
vi.mock('sonner', () => ({
  toast: {
    success: vi.fn(),
    error: vi.fn(),
  }
}));

vi.mock('react-hook-form', async () => {
  const actual = await vi.importActual('react-hook-form');
  return {
    ...actual,
    useForm: vi.fn().mockReturnValue({
      control: {},
      handleSubmit: vi.fn((fn) => fn),
      reset: vi.fn(),
      formState: { errors: {} }
    })
  };
});

describe('UsersPage 集成测试', () => {
  const user = userEvent.setup();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('应该正确渲染用户管理页面标题', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    expect(screen.getByText('用户管理')).toBeInTheDocument();
    expect(screen.getByText('创建用户')).toBeInTheDocument();
  });

  it('应该显示用户列表和搜索功能', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 等待数据加载
    await waitFor(() => {
      expect(screen.getByPlaceholderText('搜索用户名、昵称或邮箱...')).toBeInTheDocument();
    });

    expect(screen.getByText('搜索')).toBeInTheDocument();
    expect(screen.getByText('高级筛选')).toBeInTheDocument();
  });

  it('应该处理搜索功能', async () => {
    render(<UsersPage />);

    const searchInput = screen.getByPlaceholderText('搜索用户名、昵称或邮箱...');
    const searchButton = screen.getByText('搜索');

    // 输入搜索关键词
    await user.type(searchInput, 'testuser');
    await user.click(searchButton);

    // 验证搜索参数被设置
    expect(searchInput).toHaveValue('testuser');
  });

  it('应该显示高级筛选功能', async () => {
    render(<UsersPage />);

    const filterButton = screen.getByText('高级筛选');
    await user.click(filterButton);

    // 验证筛选表单显示
    expect(screen.getByText('用户状态')).toBeInTheDocument();
    expect(screen.getByText('用户角色')).toBeInTheDocument();
    expect(screen.getByText('创建时间')).toBeInTheDocument();
  });

  it('应该处理用户状态筛选', async () => {
    render(<UsersPage />);

    const filterButton = screen.getByText('高级筛选');
    await user.click(filterButton);

    const statusSelect = screen.getByText('选择状态');
    await user.click(statusSelect);

    // 这里需要模拟选择操作，但由于 Select 组件的复杂性，我们验证选项存在
    expect(screen.getByText('全部状态')).toBeInTheDocument();
    expect(screen.getByText('启用')).toBeInTheDocument();
    expect(screen.getByText('禁用')).toBeInTheDocument();
  });

  it('应该显示创建用户按钮并打开模态框', async () => {
    render(<UsersPage />);

    const createButton = screen.getByText('创建用户');
    await user.click(createButton);

    // 验证模态框标题
    expect(screen.getByText('创建用户')).toBeInTheDocument();
  });

  it('应该显示分页组件', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 验证分页控件存在
    await waitFor(() => {
      expect(screen.getByText(/共 \d+ 位用户/)).toBeInTheDocument();
    });
  });

  it('应该处理表格数据加载状态', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 验证骨架屏或加载状态
    const skeletonElements = document.querySelectorAll('[data-slot="skeleton"]');
    expect(skeletonElements.length).toBeGreaterThan(0);

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByText('admin')).toBeInTheDocument();
    });
  });

  it('应该显示正确的表格列标题', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 等待数据加载
    await waitFor(() => {
      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(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByText('admin')).toBeInTheDocument();

      // 查找操作按钮
      const editButtons = document.querySelectorAll('[aria-label*="edit"], [aria-label*="编辑"]');
      const deleteButtons = document.querySelectorAll('[aria-label*="delete"], [aria-label*="删除"]');

      expect(editButtons.length).toBeGreaterThan(0);
      expect(deleteButtons.length).toBeGreaterThan(0);
    });
  });

  it('应该处理响应式布局', async () => {
    const { container } = render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 等待数据加载
    await waitFor(() => {
      expect(screen.getByText('admin')).toBeInTheDocument();
    });

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

    // 验证响应式类名存在
    const hasResponsiveClasses = container.innerHTML.includes('md:grid-cols-3');
    expect(hasResponsiveClasses).toBe(true);
  });

  it('应该显示用户总数信息', async () => {
    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // 验证用户总数显示
    await waitFor(() => {
      expect(screen.getByText(/共 \d+ 位用户/)).toBeInTheDocument();
    });
  });
});