64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
||
import CertificateTestDatePicker from '@/components/upload/CertificateTestDatePicker'
|
||
|
||
describe('CertificateTestDatePicker', () => {
|
||
test('日历图标可反复展开和收起，Escape 也会关闭', () => {
|
||
render(<CertificateTestDatePicker id="tested-on" 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(<CertificateTestDatePicker id="tested-on" 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(<CertificateTestDatePicker id="tested-on" 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(<CertificateTestDatePicker id="tested-on" 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')
|
||
})
|
||
})
|