fix(ui/counter): fix bug of counter no validation function exposed

affects: @varlet/ui

packages/varlet-ui/src/counter/Counter.vue

@@ -314,6 +314,9 @@ export default defineComponent({
       formReadonly,
       isMax,
       isMin,
+      validate,
+      reset,
+      resetValidation,
       handleChange,
       decrement,
       increment,

packages/varlet-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test counter example 1`] = `
+"<div class=\\"app-type\\">基本使用</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">设置取值范围</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">设置步长</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">保留小数</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"decimal\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">设置尺寸</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms; width: 36px; height: 36px;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" style=\\"width: 50px; font-size: 18px;\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms; width: 36px; height: 36px;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">禁用</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2 var-counter--disabled\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">只读</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\" readonly=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">异步变更</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"app-type\\">字段校验</div>
+<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>
+<div class=\\"space\\"></div>"
+`;
+
+exports[`test counter validation 1`] = `
+"<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2 var-counter--error\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: all 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub>
+    <div class=\\"var-form-details\\">
+      <div class=\\"var-form-details__message\\">必须大于0</div>
+      <div class=\\"var-form-details__length\\"></div>
+    </div>
+  </transition-stub>
+</div>"
+`;

packages/varlet-ui/src/counter/__tests__/index.spec.js

@@ -0,0 +1,173 @@
+import example from '../example'
+import Counter from '..'
+import VarCounter from '../Counter'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import { delay, trigger } from '../../utils/jest'
+
+test('test counter example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
+
+test('test counter plugin', () => {
+  const app = createApp({}).use(Counter)
+  expect(app.component(Counter.name)).toBeTruthy()
+})
+
+const Wrapper = {
+  components: {
+    [VarCounter.name]: VarCounter,
+  },
+  data: () => ({
+    value: 0,
+  }),
+  template: `<var-counter v-model="value" />`,
+}
+
+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.unmount()
+})
+
+test('test counter initial value over max', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 11,
+    }),
+    template: `<var-counter :max="10" v-model="value" />`,
+  })
+
+  expect(wrapper.vm.value).toBe(10)
+
+  wrapper.unmount()
+})
+
+test('test counter initial value less min', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: -1,
+    }),
+    template: `<var-counter :min="0" v-model="value" />`,
+  })
+
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.unmount()
+})
+
+test('test counter onChange', async () => {
+  const onChange = jest.fn()
+
+  const wrapper = mount({
+    ...Wrapper,
+    methods: {
+      onChange,
+    },
+    template: `<var-counter v-model="value" @change="onChange" />`,
+  })
+
+  wrapper.find('.var-counter__input').setValue('1')
+  await wrapper.find('.var-counter__input').trigger('change')
+  expect(onChange).lastCalledWith(1)
+
+  wrapper.unmount()
+})
+
+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.unmount()
+})
+
+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.unmount()
+})
+
+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: `<var-counter lazy-change v-model="value" @before-change="onBeforeChange" />`,
+  })
+
+  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)
+
+  wrapper.unmount()
+})
+
+test('test counter disabled', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    template: `<var-counter disabled v-model="value" />`,
+  })
+
+  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({
+    ...Wrapper,
+    template: `<var-counter ref="counter" :rules="[v => v > 0 || '必须大于0']" v-model="value" />`,
+  })
+
+  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)
+})