From 9a0239d3172aad03da33b080a6e3ab9863da9f7a Mon Sep 17 00:00:00 2001 From: Joker <39668309+qytayh@users.noreply.github.com> Date: Fri, 18 Mar 2022 09:34:52 +0800 Subject: [PATCH] fix(ui/input): delete extra space & add lost param in handleInput (#37) * test(ui/popup): add test cases & snaps * test(ui/popup): fix snaps * test(ui/back-top): add test cases & snaps * test(ui/picker): add test cases & snaps * test(ui/time-picker): update snap * test(ui/time-picker): update snap * test(ui/style-provider): update snap * test(ui/rate): update snap * test(ui/checkbox): update snap * test(ui/date-picker): add test case and snaps * fix tabs parameter error (#35) * test(ui/loading): add test case and snapshots * test(ui/collapse): add test case and snapshots * test(ui/collapse): add test case and snapshots * feat: handle pnpm-lock * chore: handle pnpm-lock * test(ui/index-bar): add test case and snapshots * fix: undo merge Code changes * test: Merge branch 'dev' from upstream * test(ui/lazy): add test case and snapshots * fix: remove test code * test(ui/action-sheet): add test case and snapshots * test(ui/date-picker): add test case and snaps * test(ui/date-picker): fix .at error * test(ui/date-picker): fix .at error * fix(ui/index-bar): change scrollable target to fix cant scroll in Android web * docs(ui/collapse): fix typo * docs(ui/collapse): fix typo * feat(ui/date-picker): suport touchable * test(ui/date-picker): update snap * fix(ui/counter): fix the bug that the long-press event of the counter component does not take effect * test(ui/counter): add test case and snapshots (#36) * test(ui/loading): add test case and snapshots * test(ui/collapse): add test case and snapshots * test(ui/collapse): add test case and snapshots * feat: handle pnpm-lock * chore: handle pnpm-lock * test(ui/index-bar): add test case and snapshots * fix: undo merge Code changes * test: Merge branch 'dev' from upstream * test(ui/lazy): add test case and snapshots * fix: remove test code * test(ui/action-sheet): add test case and snapshots * test(ui/date-picker): add test case and snaps * test(ui/date-picker): fix .at error * test(ui/date-picker): fix .at error * test(ui/counter): add test case * fix(ui/input): delete extra space & add lost param in handleInput Co-authored-by: ayang <473033518@qq.com> Co-authored-by: running snail <13641039885@163.com> --- packages/varlet-vue2-ui/src/input/Input.vue | 4 +- .../__snapshots__/index.spec.js.snap | 172 ++++++++ .../src/input/__tests__/index.spec.js | 404 +++++++++--------- 3 files changed, 377 insertions(+), 203 deletions(-) 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() +})