tabs组件支持滑动 (#52)

test/unit/components/more-tabs.vue

@@ -0,0 +1,28 @@
+<template>
+  <van-tabs :active="active">
+    <van-tab title="选项一">内容一</van-tab>
+    <van-tab title="选项二">内容二</van-tab>
+    <van-tab title="选项三">内容三</van-tab>
+    <van-tab title="选项四">内容四</van-tab>
+    <van-tab title="选项五">内容五</van-tab>
+    <van-tab title="选项六">内容六</van-tab>
+    <van-tab title="选项七">内容七</van-tab>
+    <van-tab title="选项八">内容八</van-tab>
+  </van-tabs>
+</template>
+
+<script>
+import Tab from 'packages/tab';
+import Tabs from 'packages/tabs';
+
+export default {
+  components: {
+    'van-tab': Tab,
+    'van-tabs': Tabs
+  },
+
+  props: {
+    active: [String, Number]
+  }
+};
+</script>

test/unit/components/tabs.vue

@@ -4,7 +4,6 @@
     <van-tab title="选项二">内容二</van-tab>
     <van-tab title="选项三" disabled>内容三</van-tab>
     <van-tab title="选项四">内容四</van-tab>
-    <van-tab title="选项五">内容五</van-tab>
   </van-tabs>
 </template>
 

test/unit/specs/dialog.spec.js

@@ -1,4 +1,5 @@
 import Dialog from 'packages/dialog';
+import Vue from 'vue';
 
 describe('Dialog', () => {
   afterEach(() => {
@@ -51,6 +52,6 @@ describe('Dialog', () => {
       document.querySelector('.van-dialog__cancel').click();
       expect(dialogAction).to.equal('cancel');
       done();
-    }, 50);
+    }, 500);
   });
 });

test/unit/specs/image-preview.spec.js

@@ -16,6 +16,7 @@ describe('ImagePreview', () => {
 
   it('create a image preview', (done) => {
     ImagePreview([
+      'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
       'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
       'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
     ]);
@@ -40,6 +41,7 @@ describe('ImagePreview', () => {
     document.body.style.overflow = 'hidden';
 
     ImagePreview([
+      'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
       'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
       'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
     ]);

test/unit/specs/tabs.spec.js

@@ -1,6 +1,7 @@
 import Tabs from 'packages/tabs';
 import { mount } from 'avoriaz';
 import TabsTestComponent from '../components/tabs';
+import MoreTabsTestComponent from '../components/more-tabs';
 
 describe('Tabs', () => {
   let wrapper;
@@ -74,4 +75,75 @@ describe('Tabs', () => {
 
     expect(wrapper.style.transitionDuration != '').to.be.true;
   });
+
+  it('create a tabs greater then 4', (done) => {
+    wrapper = mount(MoreTabsTestComponent, {
+      attachToDocument: true
+    });
+ 
+    wrapper.vm.$nextTick(() => {
+      const nTab = wrapper.find('.van-tab')[4];
+      nTab.trigger('click');
+      done();
+    });
+  });
+
+  it('create a tabs greater then 4 then click last tab', (done) => {
+    wrapper = mount(MoreTabsTestComponent, {
+      attachToDocument: true,
+      propsData: {
+        active: 7
+      }
+    });
+ 
+    wrapper.vm.$nextTick(() => {
+      const nTab = wrapper.find('.van-tab')[6];
+      nTab.trigger('click');
+      done();
+    });
+  });
+
+  it('test swipe', (done) => {
+    wrapper = mount(MoreTabsTestComponent, {
+      attachToDocument: true
+    });
+
+    setTimeout(() => {
+      const nSwipe = wrapper.find('.van-tabs__swipe')[0];
+
+      const eventMouseObject = new window.Event('mousedown');
+      eventMouseObject.pageX = 200;
+      nSwipe.element.dispatchEvent(eventMouseObject);
+
+      const eventTouchObject = new window.Event('touchstart');
+      eventTouchObject.changedTouches = [{ pageX: 200 }];
+      nSwipe.element.dispatchEvent(eventTouchObject);
+    }, 500);
+
+    setTimeout(() => {
+      const nSwipe = wrapper.find('.van-tabs__swipe')[0];
+
+      const eventMouseMoveObject = new window.Event('mousemove');
+      eventMouseMoveObject.pageX = 0;
+      document.dispatchEvent(eventMouseMoveObject);
+
+      const eventObject = new window.Event('touchmove');
+      eventObject.changedTouches = [{ pageX: 0 }];
+      nSwipe.element.dispatchEvent(eventObject);
+
+      // 结束滑动
+      const eventMouseUpObject = new window.Event('mouseup');
+      document.dispatchEvent(eventMouseUpObject);
+      const eventEndObject = new window.Event('touchend');
+      eventEndObject.changedTouches = [{}];
+      nSwipe.element.dispatchEvent(eventEndObject);
+    }, 1000);
+
+    setTimeout(() => {
+      const nItem = wrapper.find('.van-tab')[0];
+      expect(nItem.hasClass('van-tab--active')).to.be.true;
+
+      done();
+    }, 1200);
+  });
 });

test/unit/specs/tag.spec.js

@@ -18,12 +18,4 @@ describe('Tag', () => {
       }
     })
   });
-
-  it('create with wrong typeProps', () => {
-    wrapper = mount(Tag, {
-      propsData: {
-        type: 'wrong'
-      }
-    })
-  });
 });