350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
import { describe, it, expect, vi, afterEach } from 'vitest'
|
||
import { mount } from '@vue/test-utils'
|
||
import { nextTick, ref } from 'vue'
|
||
import DatePicker from '@/components/ui/date/date-picker.vue'
|
||
|
||
/** 用真 v-model 宿主，才能验证 emit 出的是字符串并回流到输入框 */
|
||
function mountPicker(props = {}) {
|
||
return mount(
|
||
{
|
||
components: { DatePicker },
|
||
setup() {
|
||
const value = ref(props.modelValue ?? '')
|
||
return {
|
||
value,
|
||
format: props.format,
|
||
valueFormat: props.valueFormat,
|
||
disabled: Boolean(props.disabled),
|
||
}
|
||
},
|
||
template: `
|
||
<DatePicker
|
||
v-model="value"
|
||
:format="format"
|
||
:value-format="valueFormat"
|
||
:disabled="disabled"
|
||
/>
|
||
`,
|
||
},
|
||
{ attachTo: document.body },
|
||
)
|
||
}
|
||
|
||
function inputOf(wrapper) {
|
||
return wrapper.find('.fms-date-input')
|
||
}
|
||
|
||
/** emit 来自子组件，宿主只负责 v-model 回流 */
|
||
function pickerOf(wrapper) {
|
||
return wrapper.findComponent(DatePicker)
|
||
}
|
||
|
||
function lastEmitted(wrapper) {
|
||
return pickerOf(wrapper).emitted('update:modelValue')?.at(-1)?.[0]
|
||
}
|
||
|
||
/** 把光标停到指定位置后按下方向键，模拟「微调当前段」 */
|
||
async function stepAt(input, pos, key) {
|
||
input.element.setSelectionRange(pos, pos)
|
||
await input.trigger('keydown', { key })
|
||
await nextTick()
|
||
}
|
||
|
||
afterEach(() => {
|
||
document.body.innerHTML = ''
|
||
})
|
||
|
||
describe('DatePicker 手动输入', () => {
|
||
it('输入框不再 readonly，type 仍为 text', () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD' })
|
||
const input = inputOf(wrapper)
|
||
expect(input.attributes('readonly')).toBeUndefined()
|
||
expect(input.attributes('type')).toBe('text')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('键入合法整串后失焦提交为该格式的字符串', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('2026-09-26')
|
||
await input.trigger('blur')
|
||
|
||
expect(lastEmitted(wrapper)).toBe('2026-09-26')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('斜杠、点号与中文年月日都能提交', async () => {
|
||
for (const text of ['2026/09/26', '2026.09.26', '2026年09月26日']) {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue(text)
|
||
await input.trigger('blur')
|
||
expect(lastEmitted(wrapper), text).toBe('2026-09-26')
|
||
wrapper.unmount()
|
||
}
|
||
})
|
||
|
||
it('Enter 提交当前文本并关闭面板', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('click')
|
||
await nextTick()
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-open')
|
||
|
||
await input.setValue('2026-09-26')
|
||
await input.trigger('keydown', { key: 'Enter' })
|
||
await nextTick()
|
||
|
||
expect(lastEmitted(wrapper)).toBe('2026-09-26')
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-open')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('datetime：format 决定展示，valueFormat 决定提交格式（秒会被补齐）', async () => {
|
||
const wrapper = mountPicker({
|
||
format: 'YYYY-MM-DD HH:mm',
|
||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||
})
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('2026-09-26 14:30')
|
||
await input.trigger('blur')
|
||
|
||
expect(lastEmitted(wrapper)).toBe('2026-09-26 14:30:00')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('非法输入失焦：不 emit，文本回退到已提交值，并标记错误态', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-01-01' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('2026-13-45')
|
||
await input.trigger('blur')
|
||
|
||
expect(pickerOf(wrapper).emitted('update:modelValue')).toBeFalsy()
|
||
expect(input.element.value).toBe('2026-01-01')
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-invalid')
|
||
expect(input.attributes('aria-invalid')).toBe('true')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('错误态 1500ms 后自动清除', async () => {
|
||
vi.useFakeTimers()
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-01-01' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('abc')
|
||
await input.trigger('blur')
|
||
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-invalid')
|
||
vi.advanceTimersByTime(1500)
|
||
await nextTick()
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-invalid')
|
||
wrapper.unmount()
|
||
vi.useRealTimers()
|
||
})
|
||
|
||
it('文本与已提交值相同时失焦不重复 emit', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('2026-09-26')
|
||
await input.trigger('blur')
|
||
|
||
expect(pickerOf(wrapper).emitted('update:modelValue')).toBeFalsy()
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('清空文本失焦等同清除值', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('')
|
||
await input.trigger('blur')
|
||
|
||
expect(lastEmitted(wrapper)).toBe('')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('Esc 还原为已提交文本并关闭面板', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('click')
|
||
await nextTick()
|
||
await input.setValue('2027-01-01')
|
||
await input.trigger('keydown', { key: 'Escape' })
|
||
await nextTick()
|
||
|
||
expect(pickerOf(wrapper).emitted('update:modelValue')).toBeFalsy()
|
||
expect(input.element.value).toBe('2026-09-26')
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-open')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('Space 作为普通字符输入，不打开面板', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD HH:mm', modelValue: '2026-09-26 14:30' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('2026-09-26 14:30')
|
||
await input.trigger('keydown', { key: ' ', code: 'Space' })
|
||
await nextTick()
|
||
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-open')
|
||
wrapper.unmount()
|
||
})
|
||
})
|
||
|
||
describe('DatePicker 方向键微调当前段', () => {
|
||
it('年份段 ArrowUp +1', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await stepAt(input, 2, 'ArrowUp')
|
||
|
||
expect(input.element.value).toBe('2027-09-26')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('月份段 ArrowDown -1', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await stepAt(input, 6, 'ArrowDown')
|
||
|
||
expect(input.element.value).toBe('2026-08-26')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('日段 ArrowUp 跨月进位', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-30' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await stepAt(input, 9, 'ArrowUp')
|
||
|
||
expect(input.element.value).toBe('2026-10-01')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('时分秒微调只改当前段且日期不变', async () => {
|
||
const wrapper = mountPicker({
|
||
format: 'YYYY-MM-DD HH:mm:ss',
|
||
modelValue: '2026-09-26 23:10:00',
|
||
})
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await stepAt(input, 12, 'ArrowUp') // 小时段回绕
|
||
expect(input.element.value).toBe('2026-09-26 00:10:00')
|
||
|
||
await stepAt(input, 15, 'ArrowDown') // 分钟段
|
||
expect(input.element.value).toBe('2026-09-26 00:09:00')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('光标不在任何段上时不拦截方向键、不改文本', async () => {
|
||
// ddd 是不可步进的 token（编译为跳读片段），文本尾部的星期不产生任何段
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD ddd', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
const before = input.element.value
|
||
expect(before).toMatch(/^2026-09-26 \S+$/)
|
||
|
||
await stepAt(input, before.length, 'ArrowUp')
|
||
expect(input.element.value).toBe(before)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('微调结果失焦后提交为新值', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await stepAt(input, 2, 'ArrowUp')
|
||
await input.trigger('blur')
|
||
|
||
expect(lastEmitted(wrapper)).toBe('2027-09-26')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('Alt+ArrowDown 打开面板并把焦点交给日历网格', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
const input = inputOf(wrapper)
|
||
await input.trigger('focus')
|
||
await input.trigger('keydown', { key: 'ArrowDown', altKey: true })
|
||
await nextTick()
|
||
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-open')
|
||
expect(document.body.querySelector('.fms-cal-cell:focus')).not.toBeNull()
|
||
wrapper.unmount()
|
||
})
|
||
})
|
||
|
||
describe('DatePicker 与面板 / 清除按钮的协作', () => {
|
||
it('点输入框打开面板且焦点留在输入框，可以继续打字', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD' })
|
||
const input = inputOf(wrapper)
|
||
input.element.focus()
|
||
await input.trigger('click')
|
||
await nextTick()
|
||
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-open')
|
||
expect(document.activeElement).toBe(input.element)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('面板点选日期后输入框显示新值并清空错误态', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-01-01' })
|
||
const input = inputOf(wrapper)
|
||
await input.setValue('abc')
|
||
await input.trigger('blur')
|
||
expect(wrapper.find('.fms-date-picker').classes()).toContain('is-invalid')
|
||
|
||
await input.trigger('click')
|
||
await nextTick()
|
||
const cell = document.body.querySelector('.fms-cal-cell:not(.is-disabled)')
|
||
cell.click()
|
||
await nextTick()
|
||
await nextTick()
|
||
|
||
const committed = lastEmitted(wrapper)
|
||
expect(committed).toMatch(/^\d{4}-\d{2}-\d{2}$/)
|
||
expect(input.element.value).toBe(committed)
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-invalid')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('清除按钮清空值且不触发重复提交', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26' })
|
||
await inputOf(wrapper).trigger('click')
|
||
await nextTick()
|
||
const clear = wrapper.find('.fms-date-clear')
|
||
await clear.trigger('click')
|
||
await nextTick()
|
||
|
||
expect(lastEmitted(wrapper)).toBe('')
|
||
expect(document.body.querySelector('.popover-content')).toBeNull()
|
||
wrapper.unmount()
|
||
})
|
||
})
|
||
|
||
describe('DatePicker 禁用态与多格式', () => {
|
||
it('禁用态下输入与方向键均不生效，也不进入错误态', async () => {
|
||
const wrapper = mountPicker({ format: 'YYYY-MM-DD', modelValue: '2026-09-26', disabled: true })
|
||
const input = inputOf(wrapper)
|
||
expect(input.attributes('disabled')).toBeDefined()
|
||
|
||
await input.trigger('keydown', { key: 'ArrowUp' })
|
||
await nextTick()
|
||
expect(pickerOf(wrapper).emitted('update:modelValue')).toBeFalsy()
|
||
expect(wrapper.find('.fms-date-picker').classes()).not.toContain('is-invalid')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('format 数组时任一写法都能提交', async () => {
|
||
for (const text of ['2026-09-26', '2026年09月26日']) {
|
||
const wrapper = mountPicker({
|
||
format: ['YYYY年MM月DD日', 'YYYY-MM-DD'],
|
||
valueFormat: 'YYYY-MM-DD',
|
||
})
|
||
const input = inputOf(wrapper)
|
||
await input.setValue(text)
|
||
await input.trigger('blur')
|
||
|
||
expect(lastEmitted(wrapper), text).toBe('2026-09-26')
|
||
wrapper.unmount()
|
||
}
|
||
})
|
||
})
|