CellSwipe: improve test coverage

test/unit/specs/cell-swipe.spec.js

@@ -1,141 +1,117 @@
 import CellSwipe from 'packages/cell-swipe';
 import { mount } from 'avoriaz';
+import { triggerTouch } from '../utils';
+
+const defaultProps = {
+  propsData: {
+    leftWidth: 100,
+    rightWidth: 100
+  }
+}
 
 describe('CellSwipe', () => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
+  
+  it('render left or right part when has width', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+    expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1);
+    expect(wrapper.find('.van-cell-swipe__right').length).to.equal(1);
+  });
 
-  it('create a CellSwipe', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 2,
-        rightWidth: 2
-      }
+  it('not render left or right part when width is 0', () => {
+    wrapper = mount(CellSwipe);
+    expect(wrapper.find('.van-cell-swipe__left').length).to.equal(0);
+    expect(wrapper.find('.van-cell-swipe__right').length).to.equal(0);
+  });
+
+  it('drag and show left part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    expect(wrapper.vm.startX).to.equal(0);
+    expect(wrapper.vm.startY).to.equal(0);
+
+    triggerTouch(wrapper, 'touchmove', 50, 0);
+    expect(wrapper.vm.offset).to.equal(50);
+
+    triggerTouch(wrapper, 'touchend', 50, 0);
+    expect(wrapper.vm.offset).to.equal(100);
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.opened).to.be.true;
     });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
+  });
+
+  it('drag and show right part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', -50, 0);
+    triggerTouch(wrapper, 'touchend', -50, 0);
+    expect(wrapper.vm.offset).to.equal(-100);
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.opened).to.be.true;
     });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: 50
+  });
+
+  it('drag and reset 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);
+  });
+
+  it('drag and reset 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);
+  });
+
+  it('drag distance out of ranges', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 1000, 0);
+    expect(wrapper.vm.offset).to.equal(0);
+  });
+
+  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);
+    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);
+      
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.offset).to.equal(0);
+        expect(wrapper.vm.opened).to.be.false;
+        done();
+      });
     });
-    wrapper.vm.offsetLeft = -20;
-    wrapper.vm.rightWidth = 10;
-    wrapper.vm.swipeLeaveTransition(1);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
-  });
-});
-
-
-describe('CellSwipe-left', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe left', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 2,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      changedTouches: [{
-        pageX: 0,
-        pageY: 0
-      }
-      ]
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      changedTouches: [{
-        pageX: 0,
-        pageY: -50
-      }
-      ]
-    });
-    wrapper.vm.offsetLeft = 20;
-    wrapper.vm.rightWidth = 10;
-    wrapper.vm.swipeLeaveTransition(-1);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
-  });
-});
-
-describe('CellSwipe-0', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe 0', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 0,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: -2
-    });
-    wrapper.vm.opened = true;
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: -2
-    });
-    wrapper.vm.opened = false;
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: 40
-    });
-    wrapper.vm.swipeLeaveTransition(0);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
-  });
-});
-
-
-describe('CellSwipe-0', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe 0', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 0,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 1000,
-      pageX: 40
-    });
-    wrapper.vm.swipeMove();
-    wrapper.vm.swiping = false;
-    wrapper.vm.endDrag();
-    wrapper.vm.swiping = true;
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+  });
+
+  it('drag vertical', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 0, 100);
+    triggerTouch(wrapper, 'touchend', 0, 100);
+    expect(wrapper.vm.offset).to.equal(0);
   });
 });

test/unit/utils.js

@@ -31,7 +31,9 @@ export function DOMChecker(wrapper, rules) {
   if (style) {
     Object.keys(style).forEach(key => {
       Object.keys(style[key]).forEach(prop => {
-        expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(true);
+        expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(
+          true
+        );
       });
     });
   }
@@ -39,8 +41,35 @@ export function DOMChecker(wrapper, rules) {
   if (noStyle) {
     Object.keys(noStyle).forEach(key => {
       Object.keys(noStyle[key]).forEach(prop => {
-        expect(wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])).to.equal(false);
+        expect(
+          wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])
+        ).to.equal(false);
       });
     });
   }
 }
+
+// 触发一个 touch 事件
+export function triggerTouch(wrapper, eventName, x, y) {
+  const el = wrapper.element ? wrapper.element : wrapper;
+  const touch = {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5,
+  };
+
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, true, true, {});
+  event.touches = [touch];
+  event.targetTouches = [touch];
+  event.changedTouches = [touch];
+
+  el.dispatchEvent(event);
+}