[Improvement] CellSwipe: optimzie animation fluency (#685)

test/specs/cell-swipe.spec.js

@@ -1,6 +1,6 @@
 import CellSwipe from 'packages/cell-swipe';
 import { mount } from 'avoriaz';
-import { triggerTouch } from '../utils';
+import { triggerTouch, dragHelper } from '../utils';
 
 const defaultProps = {
   propsData: {
@@ -60,48 +60,40 @@ describe('CellSwipe', () => {
     });
   });
 
-  it('drag and reset left part', () => {
+  it('drag and show left part', () => {
     wrapper = mount(CellSwipe, defaultProps);
-
-    triggerTouch(wrapper, 'touchstart', 0, 0);
-    triggerTouch(wrapper, 'touchmove', 10, 0);
-    triggerTouch(wrapper, 'touchmove', 30, 0);
-    triggerTouch(wrapper, 'touchend', 30, 0);
-    expect(wrapper.vm.offset).to.equal(0);
+    dragHelper(wrapper, 50);
+    expect(wrapper.vm.offset).to.equal(100);
   });
 
-  it('drag and reset right part', () => {
+  it('drag and show right part', () => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
-    triggerTouch(wrapper, 'touchmove', -10, 0);
-    triggerTouch(wrapper, 'touchmove', -30, 0);
-    triggerTouch(wrapper, 'touchend', -30, 0);
-    expect(wrapper.vm.offset).to.equal(0);
+    dragHelper(wrapper, -50);
+    expect(wrapper.vm.offset).to.equal(-100);
   });
 
-  it('drag distance out of ranges', () => {
+  it('drag distance out of ranges', done => {
     wrapper = mount(CellSwipe, defaultProps);
 
     triggerTouch(wrapper, 'touchstart', 0, 0);
     triggerTouch(wrapper, 'touchmove', 1000, 0);
-    expect(wrapper.vm.offset).to.equal(0);
+    
+    setTimeout(() => {
+      expect(wrapper.vm.offset).to.equal(0);
+      done();
+    });
   });
 
   it('drag and hide left part', (done) => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
-    triggerTouch(wrapper, 'touchmove', 20, 0);
-    triggerTouch(wrapper, 'touchmove', 50, 0);
-    triggerTouch(wrapper, 'touchend', 50, 0);
+    dragHelper(wrapper, 50);
     expect(wrapper.vm.offset).to.equal(100);
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.opened).to.be.true;
 
-      triggerTouch(wrapper, 'touchstart', 0, 0);
-      triggerTouch(wrapper, 'touchmove', 1, 0);
-
+      dragHelper(wrapper, -50);
       wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.offset).to.equal(0);
         expect(wrapper.vm.opened).to.be.false;
@@ -113,9 +105,7 @@ describe('CellSwipe', () => {
   it('drag vertical', () => {
     wrapper = mount(CellSwipe, defaultProps);
 
-    triggerTouch(wrapper, 'touchstart', 0, 0);
-    triggerTouch(wrapper, 'touchmove', 0, 100);
-    triggerTouch(wrapper, 'touchend', 0, 100);
+    dragHelper(wrapper, 0, 100);
     expect(wrapper.vm.offset).to.equal(0);
   });
 

test/specs/datetime-picker.spec.js

@@ -56,8 +56,8 @@ describe('DatetimePicker', () => {
     });
 
     const [hour, minute] = wrapper.find('.van-picker-column ul');
-    dragHelper(hour, -50);
-    dragHelper(minute, -50);
+    dragHelper(hour, 0, -50);
+    dragHelper(minute, 0, -50);
 
     setTimeout(() => {
       expect(wrapper.vm.innerValue).to.equal('1:01');
@@ -78,9 +78,9 @@ describe('DatetimePicker', () => {
 
     setTimeout(() => {
       const [year, month, day] = wrapper.find('.van-picker-column ul');
-      dragHelper(year, -50);
-      dragHelper(month, -50);
-      dragHelper(day, -50);
+      dragHelper(year, 0, -50);
+      dragHelper(month, 0, -50);
+      dragHelper(day, 0, -50);
       setTimeout(() => {
         const newYear = wrapper.vm.innerValue.getFullYear();
         const newMonth = wrapper.vm.innerValue.getMonth() + 1;
@@ -106,11 +106,11 @@ describe('DatetimePicker', () => {
 
     setTimeout(() => {
       const [year, month, day, hour, minute] = wrapper.find('.van-picker-column ul');
-      dragHelper(year, -50);
-      dragHelper(month, -50);
-      dragHelper(day, -50);
-      dragHelper(hour, -50);
-      dragHelper(minute, -50);
+      dragHelper(year, 0, -50);
+      dragHelper(month, 0, -50);
+      dragHelper(day, 0, -50);
+      dragHelper(hour, 0, -50);
+      dragHelper(minute, 0, -50);
       setTimeout(() => {
         const newYear = wrapper.vm.innerValue.getFullYear();
         const newMonth = wrapper.vm.innerValue.getMonth() + 1;

test/specs/picker.spec.js

@@ -274,10 +274,10 @@ describe('PickerColumn', () => {
     expect(wrapper.vm.currentIndex).to.equal(0);
 
     const column = wrapper.find('.van-picker-column')[0];
-    dragHelper(column, 0);
+    dragHelper(column, 0, 0);
     expect(wrapper.vm.currentIndex).to.equal(0);
 
-    dragHelper(column, -100);
+    dragHelper(column, 0, -100);
     expect(wrapper.vm.currentIndex).to.equal(2);
   });
 });

test/utils.js

@@ -74,11 +74,11 @@ export function triggerTouch(wrapper, eventName, x, y) {
   el.dispatchEvent(event);
 }
 
-export function dragHelper(el, position) {
+export function dragHelper(el, x = 0, y = 0) {
   triggerTouch(el, 'touchstart', 0, 0);
-  triggerTouch(el, 'touchmove', 0, position / 4);
-  triggerTouch(el, 'touchmove', 0, position / 3);
-  triggerTouch(el, 'touchmove', 0, position / 2);
-  triggerTouch(el, 'touchmove', 0, position);
-  triggerTouch(el, 'touchend', 0, position);
+  triggerTouch(el, 'touchmove', x / 4, y / 4);
+  triggerTouch(el, 'touchmove', x / 3, y / 3);
+  triggerTouch(el, 'touchmove', x / 2, y / 2);
+  triggerTouch(el, 'touchmove', x, y);
+  triggerTouch(el, 'touchend', x, y);
 }