{{ getMonthAbbr(month.index) }}
@@ -217,10 +218,16 @@ export default defineComponent({
color: !computeText() ? color : '',
textColor: isCover ? '' : textColorOrCover(),
'var-date-picker-color-cover': isCover,
+ class: {
+ 'var-month-picker__button-disabled': disabled,
+ },
}
},
- chooseMonth(month) {
+ chooseMonth(month, event) {
+ const buttonEl = event.currentTarget
+ if (buttonEl.classList.contains('var-month-picker__button-disabled')) return
+
this.$emit('choose-month', month)
},
@@ -229,6 +236,10 @@ export default defineComponent({
this.panelKey += checkType === 'prev' ? -1 : 1
this.$emit('check-preview', 'year', checkType)
},
+
+ forwardRef(checkType) {
+ this.$refs.headerEl.checkDate(checkType)
+ },
},
})
diff --git a/packages/varlet-vue2-ui/src/date-picker/src/panel-header.vue b/packages/varlet-vue2-ui/src/date-picker/src/panel-header.vue
index 933ee6a..9285334 100644
--- a/packages/varlet-vue2-ui/src/date-picker/src/panel-header.vue
+++ b/packages/varlet-vue2-ui/src/date-picker/src/panel-header.vue
@@ -77,6 +77,8 @@ export default defineComponent({
methods: {
checkDate(checkType) {
+ if ((checkType === 'prev' && this.disabled.left) || (checkType === 'next' && this.disabled.right)) return
+
this.$emit('check-date', checkType)
this.reverse = checkType === 'prev'
this.forwardOrBackNum += checkType === 'prev' ? -1 : 1
diff --git a/packages/varlet-vue2-ui/src/select/select.less b/packages/varlet-vue2-ui/src/select/select.less
index 6121463..bff9b0f 100644
--- a/packages/varlet-vue2-ui/src/select/select.less
+++ b/packages/varlet-vue2-ui/src/select/select.less
@@ -35,7 +35,7 @@
}
.var {
- &-select-footer-margin-enter-from,
+ &-select-footer-margin-enter,
&-select-footer-margin-leave-to {
opacity: 0;
margin-top: 2px !important;
diff --git a/packages/varlet-vue2-ui/types/datePicker.d.ts b/packages/varlet-vue2-ui/types/datePicker.d.ts
index 631b1b4..32cd566 100644
--- a/packages/varlet-vue2-ui/types/datePicker.d.ts
+++ b/packages/varlet-vue2-ui/types/datePicker.d.ts
@@ -14,6 +14,9 @@ export interface DatePickerProps {
readonly?: boolean
multiple?: boolean
range?: boolean
+ touchable?: boolean
+ onChange?: (value: string | string[]) => void
+ onInput?: (value: string | string[]) => void
}
export class DatePicker extends VarComponent {
From 2429a64d1ef9f94e123ec042d3897bb7af52f514 Mon Sep 17 00:00:00 2001
From: ayang <473033518@qq.com>
Date: Thu, 17 Mar 2022 17:44:34 +0800
Subject: [PATCH 15/18] test(ui/date-picker): update snap
---
.../__snapshots__/index.spec.js.snap | 114 ------------------
1 file changed, 114 deletions(-)
diff --git a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
index b15d82f..593d81e 100644
--- a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -52,120 +52,6 @@ exports[`test allowedDates prop 1`] = `
"
`;
-exports[`test datePicker style and month 1`] = `
-"
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
"
-`;
-
exports[`test datePicker style and type 1`] = `
"
From 1468f595c4518eba8f6c5986a92d147bbd09b5d3 Mon Sep 17 00:00:00 2001
From: ayang <473033518@qq.com>
Date: Thu, 17 Mar 2022 20:47:54 +0800
Subject: [PATCH 16/18] fix(ui/counter): fix the bug that the long-press event
of the counter component does not take effect
---
packages/varlet-vue2-ui/src/counter/Counter.vue | 12 ++++++------
packages/varlet-vue2-ui/src/icon/Icon.vue | 3 +++
2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/packages/varlet-vue2-ui/src/counter/Counter.vue b/packages/varlet-vue2-ui/src/counter/Counter.vue
index 2899e21..8f1c772 100644
--- a/packages/varlet-vue2-ui/src/counter/Counter.vue
+++ b/packages/varlet-vue2-ui/src/counter/Counter.vue
@@ -19,9 +19,9 @@
disabled: !ripple || disabled || readonly || disableDecrement || !decrementButton || isMin,
}"
@click="decrement"
- @touchstart="pressDecrement"
- @touchend="releaseDecrement"
- @touchcancel="releaseDecrement"
+ @touchstart.native="pressDecrement"
+ @touchend.native="releaseDecrement"
+ @touchcancel.native="releaseDecrement"
/>
diff --git a/packages/varlet-vue2-ui/src/icon/Icon.vue b/packages/varlet-vue2-ui/src/icon/Icon.vue
index c5bff72..ed77d73 100644
--- a/packages/varlet-vue2-ui/src/icon/Icon.vue
+++ b/packages/varlet-vue2-ui/src/icon/Icon.vue
@@ -56,8 +56,11 @@ export default defineComponent({
methods: {
toSizeUnit,
+
isURL,
+
toNumber,
+
onClickIcon() {
this.getListeners().onClick?.()
},
From af6f5fa6dc517aee5e233eefda41b41031d07cd9 Mon Sep 17 00:00:00 2001
From: running snail <13641039885@163.com>
Date: Thu, 17 Mar 2022 22:30:41 +0800
Subject: [PATCH 17/18] 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
---
.../__snapshots__/index.spec.js.snap | 12 +
.../src/counter/__tests__/index.spec.js | 329 ++++++++++--------
2 files changed, 195 insertions(+), 146 deletions(-)
diff --git a/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap
index 7b5bd48..7861902 100644
--- a/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap
@@ -68,3 +68,15 @@ exports[`test counter example 1`] = `
"
`;
+
+exports[`test counter validation 1`] = `
+"
"
+`;
diff --git a/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js
index 7acd0b3..cb7782a 100644
--- a/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js
+++ b/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js
@@ -16,158 +16,195 @@ test('test counter plugin', () => {
expect(Vue.component(Counter.name)).toBeTruthy()
})
-// const Wrapper = {
-// components: {
-// [VarCounter.name]: VarCounter,
-// },
-// data: () => ({
-// value: 0,
-// }),
-// template: `
`,
-// }
-
-// test('test counter increment & decrement', async () => {
-// const wrapper = mount(Wrapper)
-
-// await wrapper.find('.var-counter__increment-button').trigger('click')
-// expect(wrapper.vm.value).toBe(1)
-// await wrapper.find('.var-counter__decrement-button').trigger('click')
-// expect(wrapper.vm.value).toBe(0)
-
-// wrapper.destroy()
-// })
-
-// test('test counter initial value over max', async () => {
-// const wrapper = mount({
-// ...Wrapper,
-// data: () => ({
-// value: 11,
-// }),
-// template: `
`,
-// })
-
-// expect(wrapper.vm.value).toBe(10)
-
-// wrapper.destroy()
-// })
-
-// test('test counter initial value less min', async () => {
-// const wrapper = mount({
-// ...Wrapper,
-// data: () => ({
-// value: -1,
-// }),
-// template: `
`,
-// })
-
-// expect(wrapper.vm.value).toBe(0)
-
-// wrapper.destroy()
-// })
-
-// test('test counter onChange', async () => {
-// const onChange = jest.fn()
-
-// const wrapper = mount({
-// ...Wrapper,
-// methods: {
-// onChange,
-// },
-// template: `
`,
-// })
-
-// wrapper.find('.var-counter__input').setValue('1')
-// await wrapper.find('.var-counter__input').trigger('change')
-// expect(onChange).lastCalledWith(1)
-
-// wrapper.destroy()
-// })
-
-// test('test counter press increment', async () => {
-// const wrapper = mount(Wrapper)
-
-// await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
-// await delay(800)
-
-// const current = wrapper.vm.value
-// expect(current).toBeGreaterThan(0)
-
-// await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
-// await delay(100)
-// expect(wrapper.vm.value).toBe(current)
-
-// wrapper.destroy()
-// })
-
-// test('test counter press decrement', async () => {
-// const wrapper = mount(Wrapper)
-
-// await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
-// await delay(750)
-
-// const current = wrapper.vm.value
-// expect(current).toBeLessThan(0)
-
-// await trigger(wrapper.find('.var-counter__decrement-button'), 'touchend')
-// await delay(750)
-// expect(wrapper.vm.value).toBe(current)
-
-// wrapper.destroy()
-// })
-
-// test('test counter lazy change', async () => {
-// const wrapper = mount({
-// ...Wrapper,
-// methods: {
-// onBeforeChange(value, change) {
-// const isInc = value > wrapper.vm.value
-// change(isInc ? value + 1 : value - 1)
-// },
-// },
-// template: `
`,
-// })
-
-// await wrapper.find('.var-counter__increment-button').trigger('click')
-// expect(wrapper.vm.value).toBe(2)
-
-// await wrapper.find('.var-counter__decrement-button').trigger('click')
-// expect(wrapper.vm.value).toBe(0)
+test('test counter increment & decrement', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ template: `
`,
+ })
+
+ await wrapper.find('.var-counter__increment-button').trigger('click')
+ expect(wrapper.vm.value).toBe(1)
+ await wrapper.find('.var-counter__decrement-button').trigger('click')
+ expect(wrapper.vm.value).toBe(0)
-// wrapper.destroy()
-// })
-
-// test('test counter disabled', async () => {
-// const wrapper = mount({
-// ...Wrapper,
-// template: `
`,
-// })
+ wrapper.destroy()
+})
+
+test('test counter initial value over max', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 11,
+ }),
+ template: `
`,
+ })
+ expect(wrapper.vm.value).toBe(10)
+
+ wrapper.destroy()
+})
+
+test('test counter initial value less min', async () => {
+ const Wrapper = {
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: -1,
+ }),
+ template: `
`,
+ }
+ const wrapper = mount(Wrapper)
+ expect(wrapper.vm.value).toBe(0)
+
+ wrapper.destroy()
+})
+
+test('test counter onChange', async () => {
+ const onChange = jest.fn()
+ const Wrapper = {
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ methods: {
+ onChange,
+ },
+ template: `
`,
+ }
+ const wrapper = mount(Wrapper)
+
+ wrapper.find('.var-counter__input').setValue('1')
+ await wrapper.find('.var-counter__input').trigger('change')
+ expect(onChange).lastCalledWith(1)
+
+ wrapper.destroy()
+})
+
+test('test counter press increment', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ template: `
`,
+ })
+
+ await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+ await delay(800)
+
+ const current = wrapper.vm.value
+ expect(current).toBeGreaterThan(0)
-// await wrapper.find('.var-counter__increment-button').trigger('click')
-// expect(wrapper.vm.value).toBe(0)
+ await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
+ await delay(100)
+ expect(wrapper.vm.value).toBe(current)
-// await wrapper.find('.var-counter__decrement-button').trigger('click')
-// expect(wrapper.vm.value).toBe(0)
-// })
+ wrapper.destroy()
+})
+
+test('test counter press decrement', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ template: `
`,
+ })
-// test('test counter validation', async () => {
-// const wrapper = mount({
-// ...Wrapper,
-// template: `
`,
-// })
+ await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
+ await delay(750)
-// const { counter } = wrapper.vm.$refs
+ const current = wrapper.vm.value
+ expect(current).toBeLessThan(0)
-// counter.validate()
-// await delay(16)
+ await trigger(wrapper.find('.var-counter__decrement-button'), 'touchend')
+ await delay(750)
+ expect(wrapper.vm.value).toBe(current)
-// expect(wrapper.html()).toMatchSnapshot()
-// expect(wrapper.find('.var-form-details__message').text()).toBe('必须大于0')
+ wrapper.destroy()
+})
-// await wrapper.find('.var-counter__increment-button').trigger('click')
-// await delay(16)
-// expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
+test('test counter lazy change', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ methods: {
+ onBeforeChange(value, change) {
+ const isInc = value > wrapper.vm.value
+ change(isInc ? value + 1 : value - 1)
+ },
+ },
+ template: `
`,
+ })
+
+ await wrapper.find('.var-counter__increment-button').trigger('click')
+ expect(wrapper.vm.value).toBe(2)
+
+ await wrapper.find('.var-counter__decrement-button').trigger('click')
+ expect(wrapper.vm.value).toBe(0)
-// counter.reset()
-// await delay(16)
-// expect(wrapper.vm.value).toBe(0)
-// })
+ wrapper.destroy()
+})
+
+test('test counter disabled', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ template: `
`,
+ })
+
+ await wrapper.find('.var-counter__increment-button').trigger('click')
+ expect(wrapper.vm.value).toBe(0)
+
+ await wrapper.find('.var-counter__decrement-button').trigger('click')
+ expect(wrapper.vm.value).toBe(0)
+})
+
+test('test counter validation', async () => {
+ const wrapper = mount({
+ components: {
+ [VarCounter.name]: VarCounter,
+ },
+ data: () => ({
+ value: 0,
+ }),
+ template: `
`,
+ })
+
+ const { counter } = wrapper.vm.$refs
+
+ counter.validate()
+ await delay(16)
+
+ expect(wrapper.html()).toMatchSnapshot()
+ expect(wrapper.find('.var-form-details__message').text()).toBe('必须大于0')
+
+ await wrapper.find('.var-counter__increment-button').trigger('click')
+ await delay(16)
+ expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
+
+ counter.reset()
+ await delay(16)
+ expect(wrapper.vm.value).toBe(0)
+})
From f228373861fec3192f463610918230c419bce41c Mon Sep 17 00:00:00 2001
From: qytayh <13255238145@163.com>
Date: Thu, 17 Mar 2022 22:54:11 +0800
Subject: [PATCH 18/18] fix(ui/input): delete extra space & add lost param in
handleInput
---
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`] = `
"
"
`;
+
+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`] = `
+"
"
+`;
+
+exports[`test input validation 1`] = `
+"
"
+`;
+
+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()
+})