|
|
@@ -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);
|
|
|
+ });
|
|
|
});
|