File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import Sidebar from './Sidebar'
describe('Sidebar', () => {
it('메뉴를 순서대로 보여준다', () => {
render(<Sidebar />)
const labels = [
'Dashboard',
'채널관리',
'기관관리',
'담당자관리',
'사업관리',
'권리확인',
'권리처리',
'자료실',
'Mattermost',
'시스템관리',
]
const items = screen.getAllByRole('listitem').map((li) => li.textContent)
expect(items).toEqual(labels)
})
it('activeKey에 해당하는 메뉴가 현재 페이지로 표시된다', () => {
render(<Sidebar activeKey="channels" />)
expect(screen.getByRole('link', { name: '채널관리' }))
.toHaveAttribute('aria-current', 'page')
expect(screen.getByRole('link', { name: '기관관리' }))
.not.toHaveAttribute('aria-current')
})
it('활성 메뉴를 누르면 onSelect가 호출된다', () => {
const onSelect = vi.fn()
render(<Sidebar activeKey="orgs" onSelect={onSelect} />)
fireEvent.click(screen.getByRole('link', { name: '채널관리' }))
expect(onSelect).toHaveBeenCalledWith('channels')
})
// 권리확인·권리처리는 통합 현황 화면으로 열렸다. 아직 준비 중인 메뉴는 Mattermost다.
it('미구현 메뉴는 비활성으로 표시되고 링크가 아니다', () => {
render(<Sidebar />)
const mattermost = screen.getByText('Mattermost')
expect(mattermost).toHaveAttribute('aria-disabled', 'true')
expect(mattermost).toHaveAttribute('title', '준비 중')
expect(screen.queryByRole('link', { name: 'Mattermost' })).toBeNull()
})
it('권리관리 메뉴는 구현되어 링크로 열린다', () => {
const onSelect = vi.fn()
render(<Sidebar onSelect={onSelect} />)
fireEvent.click(screen.getByRole('link', { name: '권리확인' }))
fireEvent.click(screen.getByRole('link', { name: '권리처리' }))
expect(onSelect).toHaveBeenNthCalledWith(1, 'rights-check')
expect(onSelect).toHaveBeenNthCalledWith(2, 'rights-process')
})
it('자료실은 구현되어 링크로 열린다', () => {
const onSelect = vi.fn()
render(<Sidebar onSelect={onSelect} />)
fireEvent.click(screen.getByRole('link', { name: '자료실' }))
expect(onSelect).toHaveBeenCalledWith('files')
})
it('Dashboard는 구현되어 링크로 열린다', () => {
const onSelect = vi.fn()
render(<Sidebar onSelect={onSelect} />)
fireEvent.click(screen.getByRole('link', { name: 'Dashboard' }))
expect(onSelect).toHaveBeenCalledWith('dashboard')
})
it('브랜드 영역을 보여준다', () => {
render(<Sidebar />)
expect(screen.getByText('ITN-HUB')).toBeTruthy()
expect(screen.getByText('사업관리시스템')).toBeTruthy()
})
it('접힌 상태에서는 라벨이 사라지고 툴팁으로 남는다', () => {
render(<Sidebar collapsed onToggle={() => {}} />)
expect(screen.queryByText('기관관리')).toBeNull()
expect(screen.queryByText('ITN-HUB')).toBeNull()
expect(screen.getByText('IH')).toBeTruthy()
expect(screen.getByRole('link', { name: '기관관리' })).toHaveAttribute('title', '기관관리')
expect(screen.getByTitle('Mattermost (준비 중)')).toBeTruthy()
})
it('접기 버튼을 누르면 onToggle이 호출된다', () => {
const onToggle = vi.fn()
render(<Sidebar onToggle={onToggle} />)
fireEvent.click(screen.getByRole('button', { name: '메뉴 접기' }))
expect(onToggle).toHaveBeenCalled()
})
})