diff --git a/packages/varlet-vue2-ui/src/input/Input.vue b/packages/varlet-vue2-ui/src/input/Input.vue index 9d9965a..bb901ad 100644 --- a/packages/varlet-vue2-ui/src/input/Input.vue +++ b/packages/varlet-vue2-ui/src/input/Input.vue @@ -158,7 +158,7 @@ export default defineComponent({ if (this.isEmpty(value)) return `0 / ${maxlength}` - return `${String(value).length} / ${maxlength}` + return `${String(value).length}/${maxlength}` }, formReadonly() { @@ -229,7 +229,7 @@ export default defineComponent({ handleInput(e) { const { value } = e.target - this.getListeners().onInput?.(value) + this.getListeners().onInput?.(value, e) this.validateWithTrigger('onInput') }, diff --git a/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap index c45f5dd..dffc6e9 100644 --- a/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap @@ -1,5 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`test input clear 1`] = ` +"
+
+
+
+
+
+
+
+
+
+ + + +
" +`; + exports[`test input example 1`] = ` "
基本使用
@@ -173,3 +192,156 @@ exports[`test input example 1`] = `
" `; + +exports[`test input focus & blur 1`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ + + +
" +`; + +exports[`test input focus & blur 2`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ + + +
" +`; + +exports[`test input hint to be false 1`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ + + +
" +`; + +exports[`test input maxlength 1`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
4/100
+
+ +
" +`; + +exports[`test input validation 1`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ +
+
长度必须大于3
+
+
+ +
" +`; + +exports[`test input validation 2`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ + + +
" +`; + +exports[`test input validation 3`] = ` +"
+
+
+
+
+
+ +
+
+
+
+
+ + + +
" +`; diff --git a/packages/varlet-vue2-ui/src/input/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/input/__tests__/index.spec.js index 459e328..0c76469 100644 --- a/packages/varlet-vue2-ui/src/input/__tests__/index.spec.js +++ b/packages/varlet-vue2-ui/src/input/__tests__/index.spec.js @@ -16,204 +16,206 @@ test('test input plugin', () => { expect(Vue.component(Input.name)).toBeTruthy() }) -// test('test input focus & blur', async () => { -// const onFocus = jest.fn() -// const onBlur = jest.fn() - -// const wrapper = mount(VarInput, { -// listeners: { -// focus: onFocus, -// blur: onBlur, -// }, -// }) - -// wrapper.vm.focus() -// await wrapper.find('.var-input__input').trigger('focus') -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.vm.blur() -// await wrapper.find('.var-input__input').trigger('blur') -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.destroy() -// }) - -// test('test input onInput & onChange & onClick', async () => { -// const onInput = jest.fn((value) => wrapper.setProps({ value })) -// const onChange = jest.fn() -// const onClick = jest.fn() - -// const wrapper = mount(VarInput, { -// propsData: { -// value: '', -// }, -// listeners: { -// input: onInput, -// change: onChange, -// click: onClick, -// }, -// }) - -// await wrapper.trigger('click') -// expect(onClick).toHaveBeenCalledTimes(1) - -// wrapper.find('.var-input__input').setValue('t') - -// await wrapper.find('.var-input__input').trigger('input') -// expect(onInput).lastCalledWith('t', new Event('input')) -// expect(wrapper.props('value')).toBe('t') - -// await wrapper.find('.var-input__input').trigger('change') -// expect(onChange).lastCalledWith('t', new Event('input')) - -// wrapper.destroy() -// }) - -// test('test input maxlength', () => { -// const wrapper = mount(VarInput, { -// propsData: { -// value: 'text', -// maxlength: 100, -// }, -// }) - -// expect(wrapper.find('.var-form-details__length').text()).toBe('4/100') -// expect(wrapper.html()).toMatchSnapshot() -// }) - -// test('test input hint to be false', () => { -// const wrapper = mount(VarInput, { -// propsData: { -// value: 'text', -// hint: false, -// }, -// }) - -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.destroy() -// }) - -// test('test input clear', async () => { -// const onInput = jest.fn((value) => wrapper.setProps({ value })) -// const onClear = jest.fn() - -// const wrapper = mount(VarInput, { -// propsData: { -// value: 'text', -// clearable: true, -// }, -// listeners: { -// clear: onClear, -// input: onInput, -// }, -// }) - -// expect(wrapper.html()).toMatchSnapshot() - -// await wrapper.find('.var-input__clear-icon').trigger('click') -// expect(onClear).lastCalledWith('') -// expect(wrapper.props('value')).toBe('') - -// wrapper.destroy() -// }) - -// const triggerEvents = async (wrapper) => { -// await wrapper.find('.var-input__input').trigger('input') -// await wrapper.find('.var-input__input').trigger('change') -// await wrapper.find('.var-input__clear-icon').trigger('click') -// await wrapper.trigger('click') -// } - -// test('test input disabled', async () => { -// const onClear = jest.fn() -// const onClick = jest.fn() -// const onInput = jest.fn() -// const onChange = jest.fn() - -// const wrapper = mount(VarInput, { -// propsData: { -// value: 'hello', -// clearable: true, -// disabled: true, -// }, -// listeners: { -// input: onInput, -// clear: onClear, -// click: onClick, -// change: onChange, -// }, -// }) - -// await triggerEvents(wrapper) - -// expect(onInput).toHaveBeenCalledTimes(0) -// expect(onClear).toHaveBeenCalledTimes(0) -// expect(onClick).toHaveBeenCalledTimes(0) -// expect(onChange).toHaveBeenCalledTimes(0) - -// wrapper.destroy() -// }) - -// test('test input readonly', async () => { -// const onClear = jest.fn() -// const onClick = jest.fn() -// const onInput = jest.fn() -// const onChange = jest.fn() - -// const wrapper = mount(VarInput, { -// propsData: { -// value: 'hello', -// clearable: true, -// readonly: true, -// }, -// listeners: { -// input: onInput, -// clear: onClear, -// click: onClick, -// chnage: onChange, -// }, -// }) - -// await triggerEvents(wrapper) - -// expect(onInput).toHaveBeenCalledTimes(0) -// expect(onClear).toHaveBeenCalledTimes(0) -// expect(onClick).toHaveBeenCalledTimes(2) -// expect(onChange).toHaveBeenCalledTimes(0) - -// wrapper.destroy() -// }) - -// test('test input validation', async () => { -// const onInput = jest.fn((value) => wrapper.setProps({ value })) - -// const wrapper = mount(VarInput, { -// propsData: { -// value: '', -// rules: [(v) => v.length > 3 || '长度必须大于3'], -// }, -// listeners: { -// input: onInput, -// }, -// }) - -// wrapper.find('.var-input__input').setValue('1') -// await wrapper.find('.var-input__input').trigger('input') -// await delay(16) -// expect(wrapper.find('.var-form-details__message').text()).toBe('长度必须大于3') -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.vm.reset() -// await delay(16) -// expect(wrapper.props('value')).toBe('') -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.find('.var-input__input').setValue('1234') -// await wrapper.find('.var-input__input').trigger('input') -// await delay(16) -// expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy() -// expect(wrapper.html()).toMatchSnapshot() - -// wrapper.destroy() -// }) +test('test input focus & blur', async () => { + const onFocus = jest.fn() + const onBlur = jest.fn() + + const wrapper = mount(VarInput, { + listeners: { + focus: onFocus, + blur: onBlur, + }, + }) + + wrapper.vm.focus() + await wrapper.find('.var-input__input').trigger('focus') + expect(wrapper.html()).toMatchSnapshot() + + wrapper.vm.blur() + await wrapper.find('.var-input__input').trigger('blur') + expect(wrapper.html()).toMatchSnapshot() + + wrapper.destroy() +}) + +test('test input onInput & onChange & onClick', async () => { + const onInput = jest.fn((value) => wrapper.setProps({ value })) + const onChange = jest.fn() + const onClick = jest.fn() + + const wrapper = mount(VarInput, { + propsData: { + value: '', + }, + listeners: { + input: onInput, + change: onChange, + click: onClick, + }, + }) + + await wrapper.trigger('click') + expect(onClick).toHaveBeenCalledTimes(1) + + wrapper.find('.var-input__input').setValue('t') + + await wrapper.find('.var-input__input').trigger('input') + expect(onInput).lastCalledWith('t', new Event('input')) + expect(wrapper.props('value')).toBe('t') + + await wrapper.find('.var-input__input').trigger('change') + expect(onChange).lastCalledWith('t', new Event('input')) + + wrapper.destroy() +}) + +test('test input maxlength', () => { + const wrapper = mount(VarInput, { + propsData: { + value: 'text', + maxlength: 100, + }, + }) + + expect(wrapper.find('.var-form-details__length').text()).toBe('4/100') + expect(wrapper.html()).toMatchSnapshot() + + wrapper.destroy() +}) + +test('test input hint to be false', () => { + const wrapper = mount(VarInput, { + propsData: { + value: 'text', + hint: false, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.destroy() +}) + +test('test input clear', async () => { + const onInput = jest.fn((value) => wrapper.setProps({ value })) + const onClear = jest.fn() + + const wrapper = mount(VarInput, { + propsData: { + value: 'text', + clearable: true, + }, + listeners: { + clear: onClear, + input: onInput, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.find('.var-input__clear-icon').trigger('click') + expect(onClear).lastCalledWith('') + expect(wrapper.props('value')).toBe('') + + wrapper.destroy() +}) + +const triggerEvents = async (wrapper) => { + await wrapper.find('.var-input__input').trigger('input') + await wrapper.find('.var-input__input').trigger('change') + await wrapper.find('.var-input__clear-icon').trigger('click') + await wrapper.trigger('click') +} + +test('test input disabled', async () => { + const onClear = jest.fn() + const onClick = jest.fn() + const onInput = jest.fn() + const onChange = jest.fn() + + const wrapper = mount(VarInput, { + propsData: { + value: 'hello', + clearable: true, + disabled: true, + }, + listeners: { + input: onInput, + clear: onClear, + click: onClick, + change: onChange, + }, + }) + + await triggerEvents(wrapper) + + expect(onInput).toHaveBeenCalledTimes(0) + expect(onClear).toHaveBeenCalledTimes(0) + expect(onClick).toHaveBeenCalledTimes(0) + expect(onChange).toHaveBeenCalledTimes(0) + + wrapper.destroy() +}) + +test('test input readonly', async () => { + const onClear = jest.fn() + const onClick = jest.fn() + const onInput = jest.fn() + const onChange = jest.fn() + + const wrapper = mount(VarInput, { + propsData: { + value: 'hello', + clearable: true, + readonly: true, + }, + listeners: { + input: onInput, + clear: onClear, + click: onClick, + chnage: onChange, + }, + }) + + await triggerEvents(wrapper) + + expect(onInput).toHaveBeenCalledTimes(0) + expect(onClear).toHaveBeenCalledTimes(0) + expect(onClick).toHaveBeenCalledTimes(2) + expect(onChange).toHaveBeenCalledTimes(0) + + wrapper.destroy() +}) + +test('test input validation', async () => { + const onInput = jest.fn((value) => wrapper.setProps({ value })) + + const wrapper = mount(VarInput, { + propsData: { + value: '', + rules: [(v) => v.length > 3 || '长度必须大于3'], + }, + listeners: { + input: onInput, + }, + }) + + wrapper.find('.var-input__input').setValue('1') + await wrapper.find('.var-input__input').trigger('input') + await delay(16) + expect(wrapper.find('.var-form-details__message').text()).toBe('长度必须大于3') + expect(wrapper.html()).toMatchSnapshot() + + wrapper.vm.reset() + await delay(16) + expect(wrapper.props('value')).toBe('') + expect(wrapper.html()).toMatchSnapshot() + + wrapper.find('.var-input__input').setValue('1234') + await wrapper.find('.var-input__input').trigger('input') + await delay(16) + expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy() + expect(wrapper.html()).toMatchSnapshot() + + wrapper.destroy() +})