NavOverlay.test.tsx
1.82 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
import { describe, it, expect, vi } from 'vitest'
import { render, screen } 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 NavOverlay from '../components/NavOverlay'
function makeStore() {
return configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
}
function renderOverlay(onClose = vi.fn()) {
return render(
<Provider store={makeStore()}>
<MemoryRouter initialEntries={['/']}>
<Routes>
<Route path="/" element={<NavOverlay onClose={onClose} />} />
<Route path="/usr/users" element={<div>UserList</div>} />
</Routes>
</MemoryRouter>
</Provider>
)
}
describe('NavOverlay', () => {
it('renders_systemModules', () => {
renderOverlay()
expect(screen.getByText('系统设置')).toBeInTheDocument()
expect(screen.getByText('用户管理')).toBeInTheDocument()
})
it('clickUserList_navigatesAndClosesOverlay', async () => {
const onClose = vi.fn()
renderOverlay(onClose)
await userEvent.click(screen.getByText('用户列表'))
expect(screen.getByText('UserList')).toBeInTheDocument()
expect(onClose).toHaveBeenCalledTimes(1)
})
it('clickBackground_callsOnClose', async () => {
const onClose = vi.fn()
render(
<Provider store={makeStore()}>
<MemoryRouter>
<NavOverlay onClose={onClose} />
</MemoryRouter>
</Provider>
)
// Click the outer overlay div (background)
await userEvent.click(document.querySelector('[data-testid="nav-bg"]')!)
expect(onClose).toHaveBeenCalledTimes(1)
})
})