82 lines
3.9 KiB
TypeScript
82 lines
3.9 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
||
import CertificateDatePicker from '@/components/upload/CertificateDatePicker'
|
||
|
||
describe('CertificateDatePicker', () => {
|
||
test('检测日期和到期时间分别选择，日历使用独立的名称和状态', () => {
|
||
const onTested = jest.fn()
|
||
const onExpires = jest.fn()
|
||
render(<>
|
||
<CertificateDatePicker id="tested-on" label="证书检测日期" value="2026-09-23" onChange={onTested} />
|
||
<CertificateDatePicker id="expires-on" label="证书到期时间" value="2027-09-23" onChange={onExpires} />
|
||
</>)
|
||
const expires = screen.getByRole('button', { name: /证书到期时间/ })
|
||
fireEvent.click(expires)
|
||
expect(screen.getByRole('dialog', { name: '选择证书到期时间' })).toBeInTheDocument()
|
||
fireEvent.click(expires)
|
||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
|
||
fireEvent.click(expires)
|
||
fireEvent.click(screen.getByRole('button', { name: '2027年9月24日' }))
|
||
expect(onExpires).toHaveBeenCalledWith('2027-09-24')
|
||
expect(onTested).not.toHaveBeenCalled()
|
||
})
|
||
|
||
test('日历图标可反复展开和收起，Escape 也会关闭', () => {
|
||
render(<CertificateDatePicker id="tested-on" label="证书检测日期" value="2026-09-23" onChange={jest.fn()} />)
|
||
|
||
const trigger = screen.getByRole('button', { name: /证书检测日期/ })
|
||
const icon = trigger.querySelector('svg')
|
||
expect(icon).not.toBeNull()
|
||
|
||
fireEvent.click(icon!)
|
||
expect(screen.getByRole('dialog', { name: '选择证书检测日期' })).toBeInTheDocument()
|
||
expect(trigger).toHaveAttribute('aria-expanded', 'true')
|
||
|
||
fireEvent.click(icon!)
|
||
expect(screen.queryByRole('dialog', { name: '选择证书检测日期' })).not.toBeInTheDocument()
|
||
expect(trigger).toHaveAttribute('aria-expanded', 'false')
|
||
|
||
fireEvent.click(icon!)
|
||
fireEvent.keyDown(document, { key: 'Escape' })
|
||
expect(screen.queryByRole('dialog', { name: '选择证书检测日期' })).not.toBeInTheDocument()
|
||
expect(trigger).toHaveFocus()
|
||
})
|
||
|
||
test('按日历选择日期时返回统一格式，并关闭日历', () => {
|
||
const onChange = jest.fn()
|
||
render(<CertificateDatePicker id="tested-on" label="证书检测日期" value="2026-09-23" onChange={onChange} />)
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /证书检测日期/ }))
|
||
expect(screen.getByText('2026年9月')).toBeInTheDocument()
|
||
fireEvent.click(screen.getByRole('button', { name: '下个月' }))
|
||
expect(screen.getByText('2026年10月')).toBeInTheDocument()
|
||
fireEvent.click(screen.getByRole('button', { name: '2026年10月5日' }))
|
||
|
||
expect(onChange).toHaveBeenCalledWith('2026-10-05')
|
||
expect(screen.queryByRole('dialog', { name: '选择证书检测日期' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
test('点击日历外部会关闭，不改动已选择的日期', () => {
|
||
const onChange = jest.fn()
|
||
render(<CertificateDatePicker id="tested-on" label="证书检测日期" value="2026-09-23" onChange={onChange} />)
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /证书检测日期/ }))
|
||
fireEvent.pointerDown(document.body)
|
||
|
||
expect(screen.queryByRole('dialog', { name: '选择证书检测日期' })).not.toBeInTheDocument()
|
||
expect(onChange).not.toHaveBeenCalled()
|
||
})
|
||
|
||
test('可以直接切换年份和月份选择较远的检测日期', () => {
|
||
const onChange = jest.fn()
|
||
render(<CertificateDatePicker id="tested-on" label="证书检测日期" value="2026-09-23" onChange={onChange} />)
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /证书检测日期/ }))
|
||
fireEvent.click(screen.getByRole('button', { name: '选择年份和月份' }))
|
||
fireEvent.click(screen.getByRole('button', { name: '下一年' }))
|
||
fireEvent.click(screen.getByRole('button', { name: '12月' }))
|
||
fireEvent.click(screen.getByRole('button', { name: '2027年12月1日' }))
|
||
|
||
expect(onChange).toHaveBeenCalledWith('2027-12-01')
|
||
})
|
||
})
|