UsersListPage.test.tsx
2.71 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
import { describe, it, expect } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigProvider } from 'antd';
import { configureStore } from '@reduxjs/toolkit';
import authReducer, { setSession } from '../../store/slices/authSlice';
import UsersListPage from './UsersListPage';
function makeStore() {
const store = configureStore({ reducer: { auth: authReducer } });
store.dispatch(
setSession({
accessToken: 'jwt',
userInfo: {
userId: 2,
username: 'admin',
userType: 'SUPER_ADMIN',
language: 'zh-CN',
companyCode: 'HQ',
},
}),
);
return store;
}
function renderPage() {
return render(
<Provider store={makeStore()}>
<ConfigProvider>
<MemoryRouter initialEntries={['/users']}>
<Routes>
<Route path="/users" element={<UsersListPage />} />
<Route path="/users/new" element={<div data-testid="users-new">NEW</div>} />
<Route path="/users/:userId" element={<div data-testid="users-detail">DETAIL</div>} />
</Routes>
</MemoryRouter>
</ConfigProvider>
</Provider>,
);
}
describe('UsersListPage', () => {
it('mount → list 加载并渲染表格行', async () => {
renderPage();
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument());
// "admin" 在两处出现（username 与 createdBy），用 getAllByText
expect(screen.getAllByText('admin').length).toBeGreaterThanOrEqual(1);
expect(screen.getByText('bob_deleted')).toBeInTheDocument();
});
it('点击新增 → 导航到 /users/new', async () => {
renderPage();
const user = userEvent.setup();
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument());
await user.click(screen.getByTestId('toolbar-add'));
expect(await screen.findByTestId('users-new')).toBeInTheDocument();
});
it('点击行 → 导航到 /users/:userId', async () => {
renderPage();
const user = userEvent.setup();
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument());
await user.click(screen.getByText('alice'));
expect(await screen.findByTestId('users-detail')).toBeInTheDocument();
});
it('刷新按钮可调用', async () => {
renderPage();
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument());
const user = userEvent.setup();
await user.click(screen.getByTestId('toolbar-refresh'));
// 重新查询后列表仍存在
await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument());
});
});