UserListPage.test.tsx
3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Provider } from 'react-redux'
import { MemoryRouter, Routes, Route } from 'react-router-dom'
import { configureStore } from '@reduxjs/toolkit'
import authReducer from '../store/slices/authSlice'
import tabsReducer from '../store/slices/tabsSlice'
import UserListPage from '../pages/usr/UserListPage'
vi.mock('../api/usr', () => ({
getStaffs: vi.fn().mockResolvedValue([]),
getPermissionGroups: vi.fn().mockResolvedValue([]),
createUser: vi.fn(),
getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] }),
updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' }),
}))
vi.mock('../api/request', () => ({
default: { get: vi.fn(), post: vi.fn(), put: vi.fn() },
}))
function makeStore(userType: string) {
const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
store.dispatch({
type: 'auth/setCredentials',
payload: { accessToken: 'test-token', refreshToken: 'test-refresh', userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' } },
})
return store
}
const sampleRow = {
sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
sStaffName: '张三', sDepartment: '研发部',
}
function renderPage(userType: string, extraRoutes = false) {
const store = makeStore(userType)
return render(
<Provider store={store}>
<MemoryRouter initialEntries={['/usr/users']}>
{extraRoutes ? (
<Routes>
<Route path="/usr/users" element={<UserListPage />} />
<Route path="/usr/users/new" element={<div>NewUserPage</div>} />
<Route path="/usr/users/:id" element={<div>DetailPage</div>} />
</Routes>
) : (
<UserListPage />
)}
</MemoryRouter>
</Provider>
)
}
describe('UserListPage', () => {
beforeEach(() => { vi.clearAllMocks() })
it('superAdmin_seesNewButton', () => {
renderPage('超级管理员')
expect(screen.getByRole('button', { name: /新\s*增/ })).toBeInTheDocument()
})
it('normalUser_doesNotSeeNewButton', () => {
renderPage('普通用户')
expect(screen.queryByRole('button', { name: /新\s*增/ })).not.toBeInTheDocument()
})
it('clickNewButton_navigatesToNewPage', async () => {
renderPage('超级管理员', true)
await userEvent.click(screen.getByRole('button', { name: /新\s*增/ }))
await waitFor(() => expect(screen.getByText('NewUserPage')).toBeInTheDocument())
})
it('initialLoad_rendersTableRows', async () => {
const { getUserList } = await import('../api/usr')
vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
renderPage('超级管理员')
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
expect(screen.getByText('张三')).toBeInTheDocument()
})
it('searchButton_callsGetUserList', async () => {
const { getUserList } = await import('../api/usr')
renderPage('超级管理员')
await userEvent.click(screen.getByRole('button', { name: /搜\s*索|搜索/ }))
await waitFor(() => expect(vi.mocked(getUserList)).toHaveBeenCalledTimes(2))
})
it('doubleClickRow_navigatesToDetailPage', async () => {
const { getUserList } = await import('../api/usr')
vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
renderPage('超级管理员', true)
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
await userEvent.dblClick(screen.getByText('alice').closest('tr')!)
await waitFor(() => expect(screen.getByText('DetailPage')).toBeInTheDocument())
})
})