test(counter): improve test coverage (#1999)

Author: aioya

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

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { expect, test, vi } from 'vite-plus/test'
 import { createApp } from 'vue'
-import { z } from 'zod'
 import Counter from '..'
 import { delay, trigger } from '../../utils/test'
 import VarCounter from '../Counter'
@@ -439,31 +438,359 @@ test('counter onIncrement & onDecrement', async () => {
 
   wrapper.unmount()
 })
-test('counter validation with zod', async () => {
+
+test('counter validate on increment trigger', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    template: `<var-counter ref="counter" :rules="[v => v < 1 || 'Too big']" v-model="value" />`,
+  })
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  await delay(16)
+
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('Too big')
+
+  wrapper.unmount()
+})
+
+test('counter validate on decrement trigger', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    template: `<var-counter ref="counter" :rules="[v => v >= 0 || 'Too small']" v-model="value" />`,
+  })
+
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  await delay(16)
+
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('Too small')
+
+  wrapper.unmount()
+})
+
+test('counter press increment release stops timers', async () => {
+  vi.useFakeTimers()
+  const wrapper = mount(Wrapper)
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+  vi.advanceTimersByTime(700)
+
+  const current = wrapper.vm.value
+  expect(current).toBeGreaterThan(0)
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
+  vi.advanceTimersByTime(300)
+
+  expect(wrapper.vm.value).toBe(current)
+
+  wrapper.unmount()
+  vi.useRealTimers()
+})
+
+test('counter validate on increment and decrement methods', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    template: `<var-counter :rules="[v => v === 0 || 'Invalid']" v-model="value" />`,
+  })
+
+  const counter = wrapper.findComponent(VarCounter)
+
+  counter.vm.increment()
+  await delay(16)
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('Invalid')
+
+  counter.vm.decrement()
+  await delay(16)
+  expect(wrapper.find('.var-form-details__error-message').exists()).toBe(false)
+
+  wrapper.unmount()
+})
+
+test('counter press increment and release methods', () => {
+  vi.useFakeTimers()
+  const wrapper = mount(Wrapper)
+  const counter = wrapper.findComponent(VarCounter)
+
+  counter.vm.pressIncrement()
+  vi.advanceTimersByTime(700)
+
+  const current = wrapper.vm.value
+  counter.vm.releaseIncrement()
+  vi.advanceTimersByTime(300)
+
+  expect(wrapper.vm.value).toBe(current)
+
+  wrapper.unmount()
+  vi.useRealTimers()
+})
+
+test('counter press decrement and release methods', () => {
+  vi.useFakeTimers()
+  const wrapper = mount(Wrapper)
+  const counter = wrapper.findComponent(VarCounter)
+
+  counter.vm.pressDecrement()
+  vi.advanceTimersByTime(700)
+
+  const current = wrapper.vm.value
+  counter.vm.releaseDecrement()
+  vi.advanceTimersByTime(300)
+
+  expect(wrapper.vm.value).toBe(current)
+
+  wrapper.unmount()
+  vi.useRealTimers()
+})
+
+test('counter touchcancel on increment', async () => {
+  const wrapper = mount(Wrapper)
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+  await delay(100)
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchcancel')
+  await delay(100)
+
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.unmount()
+})
+
+test('counter touchcancel on decrement', async () => {
+  const wrapper = mount(Wrapper)
+
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
+  await delay(100)
+
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchcancel')
+  await delay(100)
+
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.unmount()
+})
+
+test('counter lazy change with decrement validation', async () => {
+  const onBeforeChange = vi.fn((value, change) => change(value))
+
+  const wrapper = mount({
+    ...Wrapper,
+    methods: {
+      onBeforeChange,
+    },
+    template: `<var-counter lazy-change :rules="[v => v >= 0 || 'Invalid']" v-model="value" @before-change="onBeforeChange" />`,
+  })
+
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  await delay(16)
+
+  expect(onBeforeChange).toHaveBeenCalled()
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('Invalid')
+
+  wrapper.unmount()
+})
+
+test('counter lazy change with increment validation', async () => {
+  const onBeforeChange = vi.fn((value, change) => change(value))
+
+  const wrapper = mount({
+    ...Wrapper,
+    methods: {
+      onBeforeChange,
+    },
+    template: `<var-counter lazy-change :rules="[v => v <= 0 || 'Invalid']" v-model="value" @before-change="onBeforeChange" />`,
+  })
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  await delay(16)
+
+  expect(onBeforeChange).toHaveBeenCalled()
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('Invalid')
+
+  wrapper.unmount()
+})
+
+test('counter press increment long enough to set incrementTimer then release', async () => {
   const wrapper = mount({
     ...Wrapper,
     data: () => ({
       value: 0,
-      rules: z.number().min(1, 'The value must be more than zero'),
     }),
-    template: `<var-counter ref="counter" :rules="[v => v > 0 || 'The value must be more than zero']" v-model="value" />`,
+    template: `<var-counter press v-model="value" />`,
   })
 
-  const { counter } = wrapper.vm.$refs
+  // Press and hold long enough for continuedIncrement to be called
+  // DELAY is 600ms, SPEED is 100ms, so after 800ms incrementTimer should be set
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+  await delay(800)
 
-  counter.validate()
+  const current = wrapper.vm.value
+  expect(current).toBeGreaterThan(0)
+
+  // Release should clear both incrementTimer and incrementDelayTimer (line 319-320)
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
+  await delay(200)
+
+  // Value should not change after release
+  expect(wrapper.vm.value).toBe(current)
+
+  wrapper.unmount()
+})
+
+test('counter press decrement long enough to set decrementTimer then release', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter press v-model="value" />`,
+  })
+
+  // Press and hold long enough for continuedDecrement to be called
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
+  await delay(800)
+
+  const current = wrapper.vm.value
+  expect(current).toBeLessThan(0)
+
+  // Release should clear both decrementTimer and decrementDelayTimer (line 314-315)
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchend')
+  await delay(200)
+
+  // Value should not change after release
+  expect(wrapper.vm.value).toBe(current)
+
+  wrapper.unmount()
+})
+
+test('counter reset with min resets to min', async () => {
+  // reset() takes the `min != null ? toNumber(min) : 0` true branch at line 184
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 5,
+    }),
+    template: `<var-counter ref="counter" :min="2" v-model="value" />`,
+  })
+
+  const { counter } = wrapper.vm.$refs
+  counter.reset()
   await delay(16)
+  expect(wrapper.vm.value).toBe(2)
 
-  expect(wrapper.html()).toMatchSnapshot()
-  expect(wrapper.find('.var-form-details__error-message').text()).toBe('The value must be more than zero')
+  wrapper.unmount()
+})
+
+test('counter lazy change via input typing', async () => {
+  // handleChange takes the lazyChange branch of the ternary at line 214
+  const onBeforeChange = vi.fn((value, change) => change(value))
+
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    methods: {
+      onBeforeChange,
+    },
+    template: `<var-counter lazy-change v-model="value" @before-change="onBeforeChange" />`,
+  })
+
+  wrapper.find('.var-counter__input').setValue('5')
+  await wrapper.find('.var-counter__input').trigger('change')
+
+  expect(onBeforeChange).toHaveBeenCalledWith(5, expect.any(Function))
+  expect(wrapper.vm.value).toBe(5)
+
+  wrapper.unmount()
+})
+
+test('counter increment at max returns early', async () => {
+  // increment() hits the `if (isMax.value) return` guard at line 272
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 10,
+    }),
+    template: `<var-counter :max="10" v-model="value" />`,
+  })
 
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  expect(wrapper.vm.value).toBe(10)
+
+  wrapper.unmount()
+})
+
+test('counter decrement at min returns early', async () => {
+  // decrement() hits the `if (isMin.value) return` guard at line 237
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter :min="0" v-model="value" />`,
+  })
+
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.unmount()
+})
+
+test('counter press disabled does not increment or decrement', async () => {
+  // pressIncrement (line 305) and pressDecrement (line 293) return early when press is false
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter :press="false" v-model="value" />`,
+  })
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+  await delay(800)
+  expect(wrapper.vm.value).toBe(0)
+
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
+  await delay(800)
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.unmount()
+})
+
+test('counter increment without lazyChange triggers validation', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter :rules="[v => v === 0 || 'error']" :lazy-change="false" v-model="value" />`,
+  })
+
+  // Increment should trigger validateWithTrigger at line 285
   await wrapper.find('.var-counter__increment-button').trigger('click')
   await delay(16)
-  expect(wrapper.find('.var-form-details__error-message').exists()).toBeFalsy()
 
-  counter.reset()
+  // Validation should have been triggered
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('error')
+
+  wrapper.unmount()
+})
+
+test('counter decrement without lazyChange triggers validation', async () => {
+  const wrapper = mount({
+    ...Wrapper,
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter :rules="[v => v === 0 || 'error']" :lazy-change="false" v-model="value" />`,
+  })
+
+  // Decrement should trigger validateWithTrigger at line 250
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
   await delay(16)
-  expect(wrapper.vm.value).toBe(0)
+
+  // Validation should have been triggered
+  expect(wrapper.find('.var-form-details__error-message').text()).toBe('error')
 
   wrapper.unmount()
 })