mini-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(),
  }
}));

// 移除 react-hook-form mock，使用真实实现

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(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

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

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

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

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

    const filterButton = screen.getByRole('button', { name: '高级筛选' });
    await user.click(filterButton);

    // 验证筛选表单显示
    expect(screen.getByText('用户状态')).toBeInTheDocument();
    expect(screen.getByText('用户角色')).toBeInTheDocument();
    // 使用 getAllByText 并检查第一个元素
    expect(screen.getAllByText('创建时间')[0]).toBeInTheDocument();
  });

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

    const filterButton = screen.getByRole('button', { name: '高级筛选' });
    await user.click(filterButton);

    // 验证筛选表单显示和状态筛选标签
    expect(screen.getByText('用户状态')).toBeInTheDocument();

    // 验证状态筛选器存在（通过查找Select组件）
    const selectElements = document.querySelectorAll('[role="combobox"]');
    expect(selectElements.length).toBeGreaterThan(0);
  });

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

    // 使用更具体的查询找到主创建按钮
    const createButton = screen.getByRole('button', { name: /创建用户/i });
    await user.click(createButton);

    // 验证模态框标题
    expect(screen.getByRole('heading', { name: '创建用户' })).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 () => {
    const { container } = render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

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

      // 查找操作按钮（通过按钮元素）
      const actionButtons = container.querySelectorAll('button');
      const hasActionButtons = Array.from(actionButtons).some(button =>
        button.innerHTML.includes('edit') || button.innerHTML.includes('trash')
      );

      expect(hasActionButtons).toBe(true);
    });
  });

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

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

    // 展开筛选表单以显示响应式网格
    const filterButton = screen.getByRole('button', { name: '高级筛选' });
    await user.click(filterButton);

    // 验证响应式网格类名
    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();
    });
  });
});