Fix: touch events

* Added touch events handlers for controls button * Added unit tests for touch events

Author: smwbtech

src/components/VueNumberInput.vue

@@ -20,6 +20,8 @@
 @mouseup="buttonUpHandler"
 @keydown.enter="buttonDownHandler('dec')"
 @keyup.enter="buttonUpHandler"
+@touchstart.prevent="buttonDownHandler('dec')"
+@touchend="buttonUpHandler"
 >
 <slot name="button-decrease">
 <VueNumberInputButton :type="'dec'" />
@@ -63,6 +65,8 @@
 @mouseup="buttonUpHandler"
 @keydown.enter="buttonDownHandler('inc')"
 @keyup.enter="buttonUpHandler"
+@touchstart.prevent="buttonDownHandler('inc')"
+@touchend="buttonUpHandler"
 >
 <slot name="button-increase">
 <VueNumberInputButton :type="'inc'" />
@@ -254,6 +258,7 @@ export default {
 : this.value - this.step
 );
 // After 500 ms will start value increasing process
+/* istanbul ignore next */
 this.timeoutId = setTimeout(
 (this.intervalId = setInterval(
 () =>

tests/unit/vuenumberinput.spec.js

@@ -193,6 +193,33 @@ describe('Tests for VueNumberInput.vue component', () => {
 setTimeout.mockClear();
 });
 
+it('buttonDownHandler method should invoke setTimeout function', () => {
+wrapper.setMethods({
+makeStep: jest.fn()
+});
+wrapper.vm.buttonDownHandler('inc');
+expect(setTimeout).toHaveBeenCalledWith(
+expect.any(Number),
+expect.any(Number)
+);
+setInterval.mockClear();
+setTimeout.mockClear();
+});
+
+it('buttonDownHandler method should invoke setInterval function', () => {
+wrapper.setMethods({
+makeStep: jest.fn()
+});
+wrapper.vm.buttonDownHandler('inc');
+expect(setInterval).toHaveBeenCalledWith(
+expect.any(Function),
+expect.any(Number)
+);
+expect(wrapper.vm.makeStep).toHaveBeenCalledWith(3);
+setInterval.mockClear();
+setTimeout.mockClear();
+});
+
 it('Component should have buttonUpHandler method and it should invoke clearTimeout and clearInterval', () => {
 wrapper.setData({ intervalId: 1, timeoutId: 2 });
 expect(typeof wrapper.vm.buttonUpHandler).toBe('function');
@@ -605,6 +632,22 @@ describe('Tests for VueNumberInput.vue component', () => {
 expect(wrapper.vm.buttonDownHandler).lastCalledWith('inc');
 });
 
+it('Touchstart event on .vue-number-input__btn-inc should invoke methods.buttonDownHandler', () => {
+wrapper.setMethods({ buttonDownHandler: jest.fn() });
+wrapper
+.find('.vue-number-input__btn-inc')
+.trigger('touchstart');
+expect(wrapper.vm.buttonDownHandler).toHaveBeenCalledWith(
+'inc'
+);
+});
+
+it('Touchend event on .vue-number-input__btn-inc should invoke methods.buttonUpHandler', () => {
+wrapper.setMethods({ buttonUpHandler: jest.fn() });
+wrapper.find('.vue-number-input__btn-inc').trigger('touchend');
+expect(wrapper.vm.buttonUpHandler).toHaveBeenCalled();
+});
+
 it('Click on .vue-number-input__btn-dec should invoke methods.buttonDownHandler "dec" argument', () => {
 wrapper.setMethods({ buttonDownHandler: jest.fn() });
 wrapper
@@ -630,6 +673,22 @@ describe('Tests for VueNumberInput.vue component', () => {
 'dec'
 );
 });
+
+it('Touchstart event on .vue-number-input__btn-dec should invoke methods.buttonDownHandler', () => {
+wrapper.setMethods({ buttonDownHandler: jest.fn() });
+wrapper
+.find('.vue-number-input__btn-dec')
+.trigger('touchstart');
+expect(wrapper.vm.buttonDownHandler).toHaveBeenCalledWith(
+'dec'
+);
+});
+
+it('Touchend event on .vue-number-input__btn-dec should invoke methods.buttonUpHandler', () => {
+wrapper.setMethods({ buttonUpHandler: jest.fn() });
+wrapper.find('.vue-number-input__btn-dec').trigger('touchend');
+expect(wrapper.vm.buttonUpHandler).toHaveBeenCalled();
+});
 });
 });
 });