71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { MemoryRouter } from 'react-router'
|
|
import { describe, it, expect } from 'vitest'
|
|
import { AppLayout } from '@/components/AppLayout'
|
|
|
|
const renderWithRouter = (component: React.ReactNode) => {
|
|
return render(<MemoryRouter initialEntries={['/providers']}>{component}</MemoryRouter>)
|
|
}
|
|
|
|
describe('AppLayout', () => {
|
|
it('renders sidebar with app name', () => {
|
|
renderWithRouter(<AppLayout />)
|
|
|
|
expect(screen.getByText('Nex')).toBeInTheDocument()
|
|
expect(screen.getByAltText('Nex logo')).toBeInTheDocument()
|
|
})
|
|
|
|
it('keeps logo visible when sidebar is collapsed', async () => {
|
|
const user = userEvent.setup()
|
|
renderWithRouter(<AppLayout />)
|
|
|
|
await user.click(screen.getByLabelText('收起侧边栏'))
|
|
|
|
expect(screen.getByAltText('Nex logo')).toBeInTheDocument()
|
|
expect(screen.queryByText('Nex')).not.toBeInTheDocument()
|
|
expect(screen.getByLabelText('展开侧边栏')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders navigation menu items', () => {
|
|
renderWithRouter(<AppLayout />)
|
|
|
|
expect(screen.getAllByText('供应商管理').length).toBeGreaterThan(0)
|
|
expect(screen.getAllByText('总览').length).toBeGreaterThan(0)
|
|
})
|
|
|
|
it('renders settings menu item', () => {
|
|
renderWithRouter(<AppLayout />)
|
|
|
|
expect(screen.getByText('设置')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders about menu item', () => {
|
|
renderWithRouter(<AppLayout />)
|
|
|
|
expect(screen.getByText('关于')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders content outlet', () => {
|
|
const { container } = renderWithRouter(<AppLayout />)
|
|
|
|
// TDesign Layout content
|
|
expect(container.querySelector('.t-layout__content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders sidebar', () => {
|
|
const { container } = renderWithRouter(<AppLayout />)
|
|
|
|
// TDesign Layout.Aside might render with different class names
|
|
// Check for Menu component which is in the sidebar
|
|
expect(container.querySelector('.t-menu')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders header with page title', () => {
|
|
const { container } = renderWithRouter(<AppLayout />)
|
|
|
|
// TDesign Layout header
|
|
expect(container.querySelector('.t-layout__header')).toBeInTheDocument()
|
|
})
|
|
})
|