Parcourir la source

✅ test(admin): 增强用户管理页面测试覆盖率

- 添加大量数据分页场景测试,验证100条数据的分页显示正确性
- 添加禁用用户状态显示测试,验证启用/禁用标签正确展示
- 添加搜索无结果场景测试,验证空状态处理逻辑
- 添加角色筛选功能测试,验证UI交互正常工作
yourname il y a 2 mois
Parent
commit
317621b502
1 fichiers modifiés avec 184 ajouts et 0 suppressions
  1. 184 0
      src/client/admin/pages/__tests__/Users.test.tsx

+ 184 - 0
src/client/admin/pages/__tests__/Users.test.tsx

@@ -496,4 +496,188 @@ describe('UsersPage Component', () => {
       expect(screen.queryByText('admin')).not.toBeInTheDocument();
     });
   });
+
+  it('应该处理大量数据的分页场景', async () => {
+    // 模拟大量数据
+    const largeMockUsers = Array.from({ length: 100 }, (_, i) => ({
+      id: i + 1,
+      username: `user${i + 1}`,
+      nickname: `用户${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      phone: `13800${String(i + 1).padStart(5, '0')}`,
+      name: `测试用户${i + 1}`,
+      isDisabled: i % 10 === 0 ? 1 : 0,
+      createdAt: new Date(Date.now() - i * 86400000).toISOString(),
+      roles: [{ id: i % 3 + 1, name: ['admin', 'user', 'guest'][i % 3] }]
+    }));
+
+    (userClient.$get as any).mockResolvedValue({
+      status: 200,
+      ok: true,
+      json: async () => ({
+        data: largeMockUsers.slice(0, 10),
+        pagination: {
+          total: 100,
+          current: 1,
+          pageSize: 10
+        }
+      })
+    });
+
+    render(
+      <TestWrapper>
+        <UsersPage />
+      </TestWrapper>
+    );
+
+    // 验证分页信息显示正确
+    await waitFor(() => {
+      expect(screen.getByText(/共 100 位用户/)).toBeInTheDocument();
+      expect(screen.getByText('1')).toBeInTheDocument();
+      expect(screen.getByText('2')).toBeInTheDocument();
+      expect(screen.getByText('10')).toBeInTheDocument();
+    });
+  });
+
+  it('应该处理禁用用户的状态显示', async () => {
+    // 模拟包含禁用用户的数据
+    const usersWithDisabled = [
+      {
+        id: 1,
+        username: 'activeuser',
+        nickname: '活跃用户',
+        email: 'active@example.com',
+        phone: '13800138001',
+        name: '活跃用户',
+        isDisabled: 0,
+        createdAt: '2024-01-01T00:00:00.000Z',
+        roles: [{ id: 2, name: 'user' }]
+      },
+      {
+        id: 2,
+        username: 'disableduser',
+        nickname: '禁用用户',
+        email: 'disabled@example.com',
+        phone: '13800138002',
+        name: '禁用用户',
+        isDisabled: 1,
+        createdAt: '2024-01-02T00:00:00.000Z',
+        roles: [{ id: 2, name: 'user' }]
+      }
+    ];
+
+    (userClient.$get as any).mockResolvedValue({
+      status: 200,
+      ok: true,
+      json: async () => ({
+        data: usersWithDisabled,
+        pagination: {
+          total: 2,
+          current: 1,
+          pageSize: 10
+        }
+      })
+    });
+
+    render(
+      <TestWrapper>
+        <UsersPage />
+      </TestWrapper>
+    );
+
+    // 验证两种状态的用户都正确显示
+    await waitFor(() => {
+      expect(screen.getByText('activeuser')).toBeInTheDocument();
+      expect(screen.getByText('disableduser')).toBeInTheDocument();
+      // 验证状态标签存在
+      expect(screen.getByText('启用')).toBeInTheDocument();
+      expect(screen.getByText('禁用')).toBeInTheDocument();
+    });
+  });
+
+  it('应该处理搜索无结果场景', async () => {
+    const user = userEvent.setup();
+
+    // 模拟搜索无结果
+    (userClient.$get as any).mockImplementation(async (params: any) => {
+      if (params.query?.keyword === 'nonexistent') {
+        return {
+          status: 200,
+          ok: true,
+          json: async () => ({
+            data: [],
+            pagination: {
+              total: 0,
+              current: 1,
+              pageSize: 10
+            }
+          })
+        };
+      }
+      return {
+        status: 200,
+        ok: true,
+        json: async () => ({
+          data: mockUsers,
+          pagination: {
+            total: 2,
+            current: 1,
+            pageSize: 10
+          }
+        })
+      };
+    });
+
+    render(
+      <TestWrapper>
+        <UsersPage />
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('admin')).toBeInTheDocument();
+    });
+
+    // 搜索不存在的用户
+    const searchInput = screen.getByPlaceholderText('搜索用户名、昵称或邮箱...');
+    await user.clear(searchInput);
+    await user.click(searchInput);
+    await user.paste('nonexistent');
+
+    // 等待防抖完成
+    await new Promise(resolve => setTimeout(resolve, 400));
+
+    const searchButton = screen.getByText('搜索');
+    await user.click(searchButton);
+
+    // 验证空状态显示
+    await waitFor(() => {
+      expect(screen.getByText(/0.*位用户/)).toBeInTheDocument();
+      expect(screen.queryByText('admin')).not.toBeInTheDocument();
+    });
+  });
+
+  it('应该处理角色筛选功能', async () => {
+    const user = userEvent.setup();
+    render(
+      <TestWrapper>
+        <UsersPage />
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('admin')).toBeInTheDocument();
+    });
+
+    // 打开高级筛选
+    const filterButton = screen.getByText('高级筛选');
+    await user.click(filterButton);
+
+    // 验证角色筛选选项存在
+    expect(screen.getByText('用户角色')).toBeInTheDocument();
+
+    // 由于Select组件复杂性,主要验证UI交互正常
+    const roleSelects = screen.queryAllByRole('combobox');
+    expect(roleSelects.length).toBeGreaterThan(0);
+  });
 });