Merge pull request #91 from chenjiahan/dev

CellSwipe: improve test coverage && code review

package.json

@@ -26,6 +26,7 @@
     "test": "karma start test/unit/karma.conf.js --single-run",
     "test:coverage": "open test/unit/coverage/lcov-report/index.html",
     "test:watch": "karma start test/unit/karma.conf.js",
+    "test:single": "node ./test/unit/selector.js",
     "release": "npm run bootstrap && sh build/release.sh"
   },
   "repository": {

packages/cell-swipe/index.vue

@@ -1,15 +1,19 @@
 <template>
-  <div v-clickoutside:touchstart="swipeMove" @click="swipeMove()" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" class="van-cell-swipe" ref="cell">
+  <div 
-    <div class="van-cell-wrapper">
+    v-clickoutside:touchstart="swipeMove"
-      <slot>单元格内容</slot>
+    class="van-cell-swipe"
-    </div>
+    @click="swipeMove()"
-    <div class="van-cell-left">
+    @touchstart="startDrag"
-      <div ref="left">
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    @touchcancel="endDrag"
+  >
+    <div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
+      <div class="van-cell-swipe__left" v-if="leftWidth">
         <slot name="left"></slot>
       </div>
-    </div>
+      <slot></slot>
-    <div class="van-cell-right">
+      <div class="van-cell-swipe__right" v-if="rightWidth">
-      <div ref="right">
         <slot name="right"></slot>
       </div>
     </div>
@@ -17,112 +21,101 @@
 </template>
 
 <script>
-import { once } from '../utils/dom';
 import Clickoutside from '../utils/clickoutside';
 
 export default {
   name: 'van-cell-swipe',
+
   props: {
-    'leftWidth': { type: Number, default: 0 },
+    leftWidth: {
-    'rightWidth': { type: Number, default: 0 }
+      type: Number,
+      default: 0
     },
-  directives: { Clickoutside },
+    rightWidth: {
-  data() {
+      type: Number,
-    return {
+      default: 0
-      start: { x: 0, y: 0 }
-    };
-  },
-  computed: {
-    leftDefaultTransform() {
-      return this.translate3d(-this.leftWidth - 1);
-    },
-    rightDefaultTransform() {
-      return this.translate3d(this.rightWidth);
     }
   },
-  mounted() {
-    this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
-    this.leftElm = this.$refs.left;
-    this.leftWrapElm = this.leftElm.parentNode;
-    this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
 
-    this.rightElm = this.$refs.right;
+  directives: {
-    this.rightWrapElm = this.rightElm.parentNode;
+    Clickoutside
-    this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
   },
+
+  data() {
+    return {
+      offset: 0
+    };
+  },
+
+  computed: {
+    wrapperStyle() {
+      return {
+        transform: `translate3d(${this.offset}px, 0, 0)`
+      }
+    }
+  },
+
   methods: {
     resetSwipeStatus() {
       this.swiping = false; // 是否正在拖动
       this.opened = true; // 记录是否滑动左右 或者 注册
-      this.offsetLeft = 0; // 记录单次拖动的拖动距离
-    },
-    translate3d(offset) {
-      return `translate3d(${offset}px, 0, 0)`;
     },
+
     swipeMove(offset = 0) {
-      this.wrap.style.webkitTransform = this.translate3d(offset);
+      this.offset = offset;
-      this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
-      this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
       offset && (this.swiping = true);
     },
+
     swipeLeaveTransition(direction) {
-      setTimeout(() => {
+      const { offset, leftWidth, rightWidth } = this;
-        this.swipeLeave = true;
-        // left
-        if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
-          this.swipeMove(-this.rightWidth);
-          this.resetSwipeStatus();
-          return;
       // right
-        } else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
+      if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
-          this.swipeMove(this.leftWidth);
+        this.swipeMove(-rightWidth);
         this.resetSwipeStatus();
-          return;
-        } else {
-          this.swipeMove(0);
-          once(this.wrap, 'webkitTransitionEnd', () => {
-            this.wrap.style.webkitTransform = '';
-            this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
-            this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
-            this.swipeLeave = false;
-            this.swiping = false;
-          });
       }
-      }, 0);
+      // left
+      else if (direction < 0 && offset >leftWidth * 0.4 && leftWidth > 0) {
+        this.swipeMove(leftWidth);
+        this.resetSwipeStatus();
+      } else {
+        this.swipeMove();
+      }
     },
-    startDrag(evt) {
+
-      evt = evt.changedTouches ? evt.changedTouches[0] : evt;
+    startDrag(event) {
-      this.dragging = true;
+      this.startX = event.changedTouches[0].pageX;
-      this.start.x = evt.pageX;
+      this.startY = event.changedTouches[0].pageY;
-      this.start.y = evt.pageY;
     },
-    onDrag(evt) {
+
+    onDrag(event) {
       if (this.opened) {
-        !this.swiping && this.swipeMove(0);
+        !this.swiping && this.swipeMove();
         this.opened = false;
         return;
       }
-      if (!this.dragging) return;
+
-      let swiping;
+      const offsetTop = event.changedTouches[0].pageY - this.startY;
-      const e = evt.changedTouches ? evt.changedTouches[0] : evt;
+      const offsetLeft = event.changedTouches[0].pageX - this.startX;
-      const offsetTop = e.pageY - this.start.y;
-      const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
       if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
         (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
         (offsetLeft > 0 && !this.leftWidth) ||
         (offsetLeft < 0 && !this.rightWidth)) {
         return;
       }
+
       const y = Math.abs(offsetTop);
       const x = Math.abs(offsetLeft);
-      swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
+      const swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
-      if (!swiping) return;
+      if (swiping) {
-      evt.preventDefault();
+        event.preventDefault();
         this.swipeMove(offsetLeft);
+      };
     },
+
     endDrag() {
-      if (!this.swiping) return;
+      if (this.swiping) {
-      this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
+        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);        
+      };
     }
   }
 };

packages/utils/dom.js

@@ -1,11 +0,0 @@
-import Vue from 'vue';
-
-export const once = function(el, event, fn) {
-  const listener = function() {
-    if (fn) {
-      fn.apply(this, arguments);
-    }
-    el.removeEventListener(event, listener);
-  };
-  el.addEventListener(event, listener);
-};

packages/vant-css/src/cell-swipe.css

@@ -1,29 +1,26 @@
-.van-cell {
+.van-cell-swipe {
-  &-swipe {
-    position: relative;
-    min-height: 48px;
   overflow: hidden;
+  position: relative;
 
-    .van-cell-wrapper,
+  &__wrapper,
-    .van-cell-left,
+  &__left,
-    .van-cell-right {
+  &__right {
-      transition: transform 150ms ease-in-out;
+    transition: transform .15s ease-in-out;
-    }
   }
 
-  &-left,
+  &__left,
-  &-right {
+  &__right {
-    position: absolute;
-    height: 100%;
     top: 0;
+    height: 100%;
+    position: absolute;
   }
 
-  &-left {
+  &__left {
     left: 0;
     transform: translate3d(-100%, 0, 0);
   }
 
-  &-right {
+  &__right {
     right: 0;
     transform: translate3d(100%, 0, 0);
   }

test/unit/get-webpack-conf.js

@@ -2,7 +2,8 @@ const path = require('path');
 const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
-const webpackConfig = {
+function getWebpackConfig(testFileName) {
+  return {
     output: {
       path: path.resolve(process.cwd(), 'dist'),
       publicPath: '/dist/',
@@ -24,14 +25,16 @@ const webpackConfig = {
             preserveWhitespace: false
           }
         }
+      }),
+      new webpack.DefinePlugin({
+        'process.env': {
+          TEST_FILE: `"${testFileName}"`
+        }
       })
     ],
     stats: 'errors-only',
     resolve: {
-    modules: [
+      modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
-      path.resolve(process.cwd(), 'node_modules'),
-      'node_modules'
-    ],
       extensions: ['.js', '.json', '.vue'],
       alias: {
         src: path.resolve(process.cwd(), 'src'),
@@ -55,15 +58,12 @@ const webpackConfig = {
         },
         {
           test: /\.(css|pcss)$/,
-        use: [
+          use: ['style-loader', 'css-loader', 'postcss-loader']
-          'style-loader',
-          'css-loader',
-          'postcss-loader'
-        ]
         },
         {
           test: /\.(gif|png|jpe?g)(\?\S*)?$/,
-        use: [{
+          use: [
+            {
               loader: 'url-loader',
               options: {
                 query: {
@@ -71,27 +71,27 @@ const webpackConfig = {
                   name: 'static/[name].[hash:7].[ext]'
                 }
               }
-        }]
+            }
+          ]
         },
         {
           test: /\.vue$/,
-        use: [{
+          use: [
+            {
               loader: 'vue-loader',
               options: {
                 loaders: {
-              css: [
+                  css: ['style-loader', 'css-loader', 'postcss-loader'],
-                'style-loader',
-                'css-loader',
-                'postcss-loader'
-              ],
                   js: ['isparta-loader']
                 }
               }
-        }]
+            }
+          ]
         }
       ]
     },
     devtool: '#inline-source-map'
-};
+  };
+}
 
-module.exports = webpackConfig;
+module.exports = getWebpackConfig;

test/unit/index.js

@@ -1,5 +1,13 @@
 require('packages/vant-css/src/index.css');
 
-// require all test files (files that ends with .spec.js)
+// 读取配置文件，判断运行单个测试文件还是所有测试文件
 const testsReq = require.context('./specs', true, /\.spec$/);
-testsReq.keys().forEach(testsReq);
+if (process.env.TEST_FILE) {
+  testsReq.keys().forEach((file) => {
+    if (file.indexOf(process.env.TEST_FILE) !== -1) {
+      testsReq(file);
+    }
+  });
+} else {
+  testsReq.keys().forEach(testsReq);
+}

test/unit/karma.conf.js

@@ -4,7 +4,7 @@ require('babel-core/register')({
   presets: [require('babel-preset-env')]
 });
 
-var webpackConfig = require('./get-webpack-conf');
+var getWebpackConfig = require('./get-webpack-conf');
 var travis = process.env.TRAVIS;
 
 module.exports = function(config) {
@@ -16,7 +16,7 @@ module.exports = function(config) {
     preprocessors: {
       './index.js': ['webpack', 'sourcemap']
     },
-    webpack: webpackConfig,
+    webpack: getWebpackConfig(getTestFileName()),
     webpackMiddleware: {
       noInfo: true
     },
@@ -30,3 +30,8 @@ module.exports = function(config) {
     singleRun: false
   });
 };
+
+function getTestFileName() {
+  const flagIndex = process.argv.indexOf('--file');
+  return flagIndex !== -1 ? process.argv[flagIndex + 1] : '';
+}

test/unit/selector.js

@@ -0,0 +1,19 @@
+/**
+ * 运行单个测试文件
+ */
+
+const fs = require('fs');
+const inquirer = require('inquirer');
+const path = require('path');
+const shell = require('shelljs');
+const files = fs.readdirSync(path.resolve(__dirname, './specs'));
+
+inquirer.prompt([{
+  type: 'list',
+  name: 'select',
+  message: '请选择要运行的测试文件：',
+  choices: files
+}], (result) => {
+  const file = result.select.replace('.spec.js', '');
+  shell.exec('karma start test/unit/karma.conf.js --color alway --file ' + file);
+});

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

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

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);
+}