412 lines
17 KiB
JavaScript
412 lines
17 KiB
JavaScript
import { describe, it, expect, vi } from 'vitest'
|
||
import { nextTick } from 'vue'
|
||
import { mount } from '@vue/test-utils'
|
||
import Input from '@/components/ui/input/input.vue'
|
||
|
||
const inputEl = (wrapper) => wrapper.find('[data-slot="input"]')
|
||
const textareaEl = (wrapper) => wrapper.find('[data-slot="textarea"]')
|
||
const clearBtn = (wrapper) => wrapper.find('button[aria-label="清除"]')
|
||
const resizeHandle = (wrapper) => wrapper.find('[role="slider"]')
|
||
|
||
describe('Input 组件 · default 模式', () => {
|
||
it('渲染 input 并透传 value', () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'abc' } })
|
||
expect(inputEl(wrapper).element.value).toBe('abc')
|
||
})
|
||
|
||
it('Number 类型的 modelValue 正常渲染', () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 123 } })
|
||
expect(inputEl(wrapper).element.value).toBe('123')
|
||
})
|
||
|
||
it('输入触发 update:modelValue', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: '' } })
|
||
await inputEl(wrapper).setValue('hello')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['hello'])
|
||
})
|
||
|
||
it('change 事件转发', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: '' } })
|
||
await inputEl(wrapper).setValue('x')
|
||
await inputEl(wrapper).trigger('change')
|
||
expect(wrapper.emitted('change')[0]).toEqual(['x'])
|
||
})
|
||
|
||
it('focus/blur 触发事件并切换聚焦态', async () => {
|
||
const wrapper = mount(Input)
|
||
await inputEl(wrapper).trigger('focus')
|
||
expect(wrapper.emitted('focus')).toHaveLength(1)
|
||
expect(wrapper.classes()).toContain('input-focused')
|
||
await inputEl(wrapper).trigger('blur')
|
||
expect(wrapper.emitted('blur')).toHaveLength(1)
|
||
expect(wrapper.classes()).not.toContain('input-focused')
|
||
})
|
||
|
||
it('maxlength 透传原生属性', () => {
|
||
const wrapper = mount(Input, { props: { maxlength: 20 } })
|
||
expect(inputEl(wrapper).attributes('maxlength')).toBe('20')
|
||
})
|
||
|
||
it('disabled/readonly 反映到原生属性与 wrapper class', () => {
|
||
const d = mount(Input, { props: { disabled: true } })
|
||
expect(inputEl(d).attributes('disabled')).toBeDefined()
|
||
expect(d.classes()).toContain('input-disabled')
|
||
const r = mount(Input, { props: { readonly: true } })
|
||
expect(inputEl(r).attributes('readonly')).toBeDefined()
|
||
expect(r.classes()).toContain('input-readonly')
|
||
})
|
||
|
||
it('status=error 映射 aria-invalid 与 class', () => {
|
||
const wrapper = mount(Input, { props: { status: 'error' } })
|
||
expect(inputEl(wrapper).attributes('aria-invalid')).toBe('true')
|
||
expect(wrapper.classes()).toContain('input-error')
|
||
})
|
||
|
||
it('status=warning 映射 class 且不设置 aria-invalid', () => {
|
||
const wrapper = mount(Input, { props: { status: 'warning' } })
|
||
expect(wrapper.classes()).toContain('input-warning')
|
||
expect(inputEl(wrapper).attributes('aria-invalid')).toBeUndefined()
|
||
})
|
||
|
||
it('prefix/suffix 插槽渲染', () => {
|
||
const wrapper = mount(Input, {
|
||
slots: { prefix: '<span class="pfx">P</span>', suffix: '<span class="sfx">S</span>' },
|
||
})
|
||
expect(wrapper.find('.pfx').exists()).toBe(true)
|
||
expect(wrapper.find('.sfx').exists()).toBe(true)
|
||
})
|
||
|
||
it('allowClear：有值但未聚焦/未悬停时不显示清除按钮', () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'v', allowClear: true } })
|
||
expect(clearBtn(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('allowClear：悬停时显示清除按钮，点击清空', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'v', allowClear: true } })
|
||
await wrapper.trigger('mouseenter')
|
||
expect(clearBtn(wrapper).exists()).toBe(true)
|
||
await clearBtn(wrapper).trigger('click')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual([''])
|
||
expect(wrapper.emitted('clear')).toHaveLength(1)
|
||
})
|
||
|
||
it('allowClear：disabled 时即使悬停也不显示清除按钮', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'v', allowClear: true, disabled: true } })
|
||
await wrapper.trigger('mouseenter')
|
||
expect(clearBtn(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('allowClear：readonly 时即使悬停也不显示清除按钮', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'v', allowClear: true, readonly: true } })
|
||
await wrapper.trigger('mouseenter')
|
||
expect(clearBtn(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('allowClear：mouseleave 后清除按钮隐藏', async () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'v', allowClear: true } })
|
||
await wrapper.trigger('mouseenter')
|
||
expect(clearBtn(wrapper).exists()).toBe(true)
|
||
await wrapper.trigger('mouseleave')
|
||
expect(clearBtn(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('showCount 显示字数统计（无上限仅长度）', () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'abc', showCount: true } })
|
||
expect(wrapper.text()).toContain('3')
|
||
})
|
||
|
||
it('showCount 配合 maxlength 显示 当前 / 上限', () => {
|
||
const wrapper = mount(Input, { props: { modelValue: 'abc', showCount: true, maxlength: 10 } })
|
||
expect(wrapper.text()).toContain('3 / 10')
|
||
})
|
||
|
||
it('type 校验器拒绝非法模式', () => {
|
||
const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||
mount(Input, { props: { type: 'foo' } })
|
||
expect(spy).toHaveBeenCalled()
|
||
spy.mockRestore()
|
||
})
|
||
})
|
||
|
||
describe('Input 组件 · password 模式', () => {
|
||
it('默认 type=password，点击切换明文，再点击切回密文', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'password', modelValue: 'pw' } })
|
||
const input = inputEl(wrapper)
|
||
expect(input.attributes('type')).toBe('password')
|
||
|
||
await wrapper.find('button[aria-label="显示密码"]').trigger('click')
|
||
expect(input.attributes('type')).toBe('text')
|
||
expect(input.element.value).toBe('pw')
|
||
|
||
await wrapper.find('button[aria-label="隐藏密码"]').trigger('click')
|
||
expect(input.attributes('type')).toBe('password')
|
||
})
|
||
|
||
it('切换按钮 aria-label/aria-pressed 随状态变化', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'password' } })
|
||
const toggle = wrapper.find('button[aria-label="显示密码"]')
|
||
expect(toggle.attributes('aria-pressed')).toBe('false')
|
||
await toggle.trigger('click')
|
||
expect(wrapper.find('button[aria-label="隐藏密码"]').attributes('aria-pressed')).toBe('true')
|
||
})
|
||
|
||
it('disabled 时切换按钮禁用', () => {
|
||
const wrapper = mount(Input, { props: { type: 'password', disabled: true } })
|
||
expect(wrapper.find('button[aria-label="显示密码"]').attributes('disabled')).toBeDefined()
|
||
})
|
||
|
||
it('readonly 时切换按钮禁用', () => {
|
||
const wrapper = mount(Input, { props: { type: 'password', readonly: true } })
|
||
expect(wrapper.find('button[aria-label="显示密码"]').attributes('disabled')).toBeDefined()
|
||
})
|
||
|
||
it('password 模式仍支持字数统计', () => {
|
||
const wrapper = mount(Input, { props: { type: 'password', modelValue: 'abc', showCount: true } })
|
||
expect(wrapper.text()).toContain('3')
|
||
})
|
||
})
|
||
|
||
describe('Input 组件 · number 模式', () => {
|
||
it('过滤非法字符：字母被剔除，只保留数字与单个小数点', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('12a.b.c')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['12.'])
|
||
})
|
||
|
||
it('过滤多余小数点：12.3.4 归一化为 12.34', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('12.3.4')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['12.34'])
|
||
})
|
||
|
||
it('纯字母输入被清空', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('abc')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual([''])
|
||
})
|
||
|
||
it('保留小数中间态：输入 "12." 不被截断', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('12.')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['12.'])
|
||
})
|
||
|
||
it('输入 "." 保留中间态，失焦后提交为空串', async () => {
|
||
const real = mount({
|
||
components: { Input },
|
||
template: '<Input v-model="v" type="number" />',
|
||
data: () => ({ v: '' }),
|
||
})
|
||
const input = real.find('[data-slot="input"]')
|
||
await input.setValue('.')
|
||
expect(real.vm.v).toBe('.')
|
||
await input.trigger('blur')
|
||
expect(real.vm.v).toBe('')
|
||
})
|
||
|
||
it('失焦提交转为 Number：3.50 → 3.5', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('3.50')
|
||
await inputEl(wrapper).trigger('blur')
|
||
expect(wrapper.emitted('update:modelValue').at(-1)).toEqual([3.5])
|
||
})
|
||
|
||
it('失焦后原生输入框显示规范化值', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('3.50')
|
||
await inputEl(wrapper).trigger('blur')
|
||
expect(inputEl(wrapper).element.value).toBe('3.5')
|
||
})
|
||
|
||
it('change 事件提交 Number 值', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('3.50')
|
||
await inputEl(wrapper).trigger('change')
|
||
expect(wrapper.emitted('change')[0]).toEqual([3.5])
|
||
})
|
||
|
||
it('值未变化时失焦不重复触发 update:modelValue', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: 3.5 } })
|
||
await inputEl(wrapper).setValue('3.5')
|
||
expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
|
||
await inputEl(wrapper).trigger('blur')
|
||
expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
|
||
})
|
||
|
||
it('空值失焦不重复触发 update:modelValue', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: '' } })
|
||
await inputEl(wrapper).setValue('')
|
||
await inputEl(wrapper).trigger('blur')
|
||
expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
|
||
})
|
||
|
||
it('透传 inputmode=decimal 与 number 校验 pattern', () => {
|
||
const wrapper = mount(Input, { props: { type: 'number' } })
|
||
expect(inputEl(wrapper).attributes('inputmode')).toBe('decimal')
|
||
expect(inputEl(wrapper).attributes('pattern')).toBe('[0-9]*[.]?[0-9]*')
|
||
})
|
||
|
||
it('Number 类型 modelValue 渲染为字符串', () => {
|
||
const wrapper = mount(Input, { props: { type: 'number', modelValue: 1.28 } })
|
||
expect(inputEl(wrapper).element.value).toBe('1.28')
|
||
})
|
||
})
|
||
|
||
describe('Input 组件 · textarea 模式', () => {
|
||
it('渲染 textarea 并转发输入', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', modelValue: 'multi' } })
|
||
expect(textareaEl(wrapper).element.value).toBe('multi')
|
||
await textareaEl(wrapper).setValue('new')
|
||
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new'])
|
||
})
|
||
|
||
it('change 事件转发', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', modelValue: '' } })
|
||
await textareaEl(wrapper).setValue('x')
|
||
await textareaEl(wrapper).trigger('change')
|
||
expect(wrapper.emitted('change')[0]).toEqual(['x'])
|
||
})
|
||
|
||
it('focus/blur 触发事件', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
await textareaEl(wrapper).trigger('focus')
|
||
expect(wrapper.emitted('focus')).toHaveLength(1)
|
||
await textareaEl(wrapper).trigger('blur')
|
||
expect(wrapper.emitted('blur')).toHaveLength(1)
|
||
})
|
||
|
||
it('rows 透传（默认 3，可自定义）', () => {
|
||
const d = mount(Input, { props: { type: 'textarea' } })
|
||
expect(textareaEl(d).attributes('rows')).toBe('3')
|
||
const custom = mount(Input, { props: { type: 'textarea', rows: 6 } })
|
||
expect(textareaEl(custom).attributes('rows')).toBe('6')
|
||
})
|
||
|
||
it('maxlength 透传', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', maxlength: 100 } })
|
||
expect(textareaEl(wrapper).attributes('maxlength')).toBe('100')
|
||
})
|
||
|
||
it('disabled/readonly 反映到原生属性', () => {
|
||
const d = mount(Input, { props: { type: 'textarea', disabled: true } })
|
||
expect(textareaEl(d).attributes('disabled')).toBeDefined()
|
||
const r = mount(Input, { props: { type: 'textarea', readonly: true } })
|
||
expect(textareaEl(r).attributes('readonly')).toBeDefined()
|
||
})
|
||
|
||
it('status=error 映射 aria-invalid', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', status: 'error' } })
|
||
expect(textareaEl(wrapper).attributes('aria-invalid')).toBe('true')
|
||
})
|
||
|
||
it('textarea 无清除按钮', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', modelValue: 'x', allowClear: true } })
|
||
expect(clearBtn(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('showCount 配合 maxlength 显示 当前 / 上限', () => {
|
||
const wrapper = mount(Input, {
|
||
props: { type: 'textarea', modelValue: 'abc', showCount: true, maxlength: 100 },
|
||
})
|
||
expect(wrapper.text()).toContain('3 / 100')
|
||
})
|
||
|
||
it('可编辑时显示拖拽调整手柄', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
expect(resizeHandle(wrapper).exists()).toBe(true)
|
||
})
|
||
|
||
it('disabled 时不显示拖拽调整手柄', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', disabled: true } })
|
||
expect(resizeHandle(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('readonly 时不显示拖拽调整手柄', () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea', readonly: true } })
|
||
expect(resizeHandle(wrapper).exists()).toBe(false)
|
||
})
|
||
|
||
it('键盘调整高度：ArrowDown 增高 / ArrowUp 降低 / Home 还原', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
const handle = resizeHandle(wrapper)
|
||
const ta = textareaEl(wrapper)
|
||
|
||
await handle.trigger('keydown', { key: 'ArrowDown' })
|
||
await nextTick()
|
||
expect(ta.element.style.height).toBe('20px')
|
||
|
||
await handle.trigger('keydown', { key: 'ArrowDown' })
|
||
await nextTick()
|
||
expect(ta.element.style.height).toBe('40px')
|
||
|
||
await handle.trigger('keydown', { key: 'ArrowUp' })
|
||
await nextTick()
|
||
expect(ta.element.style.height).toBe('20px')
|
||
|
||
await handle.trigger('keydown', { key: 'Home' })
|
||
await nextTick()
|
||
expect(ta.element.style.height).toBe('0px')
|
||
})
|
||
|
||
it('键盘调整不会低于默认高度', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
await resizeHandle(wrapper).trigger('keydown', { key: 'ArrowUp' })
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('0px')
|
||
})
|
||
|
||
it('拖拽手柄忽略非调整键', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
await resizeHandle(wrapper).trigger('keydown', { key: 'Enter' })
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('')
|
||
})
|
||
|
||
it('textarea 模式切换后高度状态重置', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
await resizeHandle(wrapper).trigger('keydown', { key: 'ArrowDown' })
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('20px')
|
||
|
||
await wrapper.setProps({ type: 'default' })
|
||
await wrapper.setProps({ type: 'textarea' })
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('')
|
||
})
|
||
|
||
it('拖拽调整高度：pointermove 更新高度', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
const handleEl = resizeHandle(wrapper).element
|
||
handleEl.dispatchEvent(new MouseEvent('pointerdown', { clientY: 100, bubbles: true }))
|
||
document.dispatchEvent(new MouseEvent('pointermove', { clientY: 150, bubbles: true }))
|
||
await vi.waitFor(() => {
|
||
expect(textareaEl(wrapper).element.style.height).toBe('50px')
|
||
})
|
||
document.dispatchEvent(new MouseEvent('pointerup'))
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('拖拽未渲染帧即结束：立即应用待定高度', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
const handleEl = resizeHandle(wrapper).element
|
||
handleEl.dispatchEvent(new MouseEvent('pointerdown', { clientY: 100, bubbles: true }))
|
||
document.dispatchEvent(new MouseEvent('pointermove', { clientY: 130, bubbles: true }))
|
||
// 同步结束拖拽：rAF 帧尚未渲染，flushResizeFrame 应取消帧并应用待定高度
|
||
document.dispatchEvent(new MouseEvent('pointerup', { clientY: 130, bubbles: true }))
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('30px')
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('拖拽移动小于 2px 忽略', async () => {
|
||
const wrapper = mount(Input, { props: { type: 'textarea' } })
|
||
const handleEl = resizeHandle(wrapper).element
|
||
handleEl.dispatchEvent(new MouseEvent('pointerdown', { clientY: 100, bubbles: true }))
|
||
document.dispatchEvent(new MouseEvent('pointermove', { clientY: 101, bubbles: true }))
|
||
document.dispatchEvent(new MouseEvent('pointerup', { clientY: 101, bubbles: true }))
|
||
await nextTick()
|
||
expect(textareaEl(wrapper).element.style.height).toBe('')
|
||
wrapper.unmount()
|
||
})
|
||
})
|