AppShell.test.tsx
3.04 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
import { describe, it, expect, vi } 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, { openTab } from '../store/slices/tabsSlice'
import AppShell from '../components/AppShell'
vi.mock('../components/NavOverlay', () => ({
default: ({ onClose }: { onClose: () => void }) => (
<div data-testid="nav-overlay" onClick={onClose}>NavOverlay</div>
),
}))
function makeStore(extraTabs = false) {
const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
store.dispatch({
type: 'auth/setCredentials',
payload: { accessToken: 'tok', refreshToken: 'ref', userInfo: { userId: 'u0', username: 'admin', userType: '超级管理员', language: '中文', brandId: 'b1' } },
})
if (extraTabs) {
store.dispatch(openTab({ id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }))
}
return store
}
function renderShell(path = '/', extraTabs = false) {
const store = makeStore(extraTabs)
return {
store,
...render(
<Provider store={store}>
<MemoryRouter initialEntries={[path]}>
<Routes>
<Route element={<AppShell />}>
<Route path="/" element={<div>MainPage</div>} />
<Route path="/usr/users" element={<div>UserListPage</div>} />
</Route>
</Routes>
</MemoryRouter>
</Provider>
),
}
}
describe('AppShell', () => {
it('renders_mainTabAndUserInfo', () => {
renderShell()
expect(screen.getByText('主页')).toBeInTheDocument()
expect(screen.getByText(/admin/)).toBeInTheDocument()
})
it('renders_openTabs', () => {
renderShell('/', true)
expect(screen.getByText('用户列表')).toBeInTheDocument()
})
it('clickTab_navigatesToTabPath', async () => {
renderShell('/', true)
await userEvent.click(screen.getByText('用户列表'))
await waitFor(() => expect(screen.getByText('UserListPage')).toBeInTheDocument())
})
it('closeTab_removesTabAndNavigates', async () => {
renderShell('/usr/users', true)
await userEvent.click(screen.getByRole('button', { name: '关闭 用户列表' }))
await waitFor(() => expect(screen.queryByText('用户列表')).not.toBeInTheDocument())
expect(screen.getByText('MainPage')).toBeInTheDocument()
})
it('navToggle_showsNavOverlay', async () => {
renderShell()
await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
expect(screen.getByTestId('nav-overlay')).toBeInTheDocument()
})
it('navToggle_secondClick_hidesOverlay', async () => {
renderShell()
await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
expect(screen.queryByTestId('nav-overlay')).not.toBeInTheDocument()
})
})