修复表单组件样式和单元测试用例 (#7)

* fix: loading small style, search style and dialog style

* fix: scroll to top

* fix mobile scroll

* fix scroll to top

* 文档细节优化

* unit test

* dialog and image-preview unit test

* fix form component style

* fix radio and checkbox style

* fix search component style

.gitignore

@@ -11,3 +11,5 @@ node_modules
 example/dist
 /docs/dist
 test/unit/coverage
+packages/vant-css/build
+packages/vant-css/icons

packages/dialog/src/dialog.js

@@ -9,13 +9,8 @@ let instance;
 let dialogQueue = [];
 
 const defaultCallback = action => {
+  /* istanbul ignore else */
   if (currentDialog) {
-    const callback = currentDialog.callback;
-
-    if (typeof callback === 'function') {
-      callback(action);
-    }
-
     if (currentDialog.resolve && action === 'confirm') {
       currentDialog.resolve(action);
     } else if (currentDialog.reject && action === 'cancel') {
@@ -43,6 +38,7 @@ const showNextDialog = () => {
     const options = currentDialog.options;
 
     for (const prop in options) {
+      /* istanbul ignore else */
       if (options.hasOwnProperty(prop)) {
         instance[prop] = options[prop];
       }

packages/dialog/src/dialog.vue

@@ -60,12 +60,14 @@ export default {
     },
 
     close() {
+      /* istanbul ignore if */
       if (this.closing) return;
 
       this.closing = true;
 
       this.value = false;
 
+      /* istanbul ignore else */
       if (this.lockOnScroll) {
         setTimeout(() => {
           if (this.overlay && this.bodyOverflow !== 'hidden') {

packages/image-preview/src/image-preview.vue

@@ -74,9 +74,10 @@ export default {
 
       this.value = false;
 
+      /* istanbul ignore else */
       if (this.lockOnScroll) {
         setTimeout(() => {
-          if (this.modal && this.bodyOverflow !== 'hidden') {
+          if (this.overlay && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
           }
           this.bodyOverflow = null;

packages/vant-css/scripts/fount-config.js

@@ -36,7 +36,8 @@ module.exports = {
     {
       keywords: ['location'],
       src: '其他分店.svg',
-      css: 'location'
+      css: 'location',
+      'correct_contour_direction': true
     },
     {
       keywords: ['upgrade'],
@@ -97,7 +98,8 @@ module.exports = {
     {
       keywords: ['logistics'],
       src: '物流.svg',
-      css: 'logistics'
+      css: 'logistics',
+      'correct_contour_direction': true
     },
     {
       keywords: ['edit'],

packages/vant-css/src/checkbox.css

@@ -15,6 +15,7 @@
       height: 22px;
       margin-right: 15px;
       float: left;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
     @e control {
@@ -31,6 +32,7 @@
       line-height: 22px;
       margin-left: 37px;
       display: block;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);      
     }
 
     .van-icon {

packages/vant-css/src/icon.css

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: 'vant-icon';
-  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-587aa52c96.eot');
-  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-587aa52c96.eot?#iefix') format('embedded-opentype'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-587aa52c96.woff2') format('woff2'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-587aa52c96.woff') format('woff'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-587aa52c96.ttf') format('truetype')
+  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-9e3e482229.eot');
+  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-9e3e482229.eot?#iefix') format('embedded-opentype'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-9e3e482229.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-9e3e482229.woff') format('woff'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-9e3e482229.ttf') format('truetype')
 }
 
 .van-icon {

packages/vant-css/src/panel.css

@@ -1,13 +1,20 @@
+@import './mixins/border_retina.css';
+
 @component-namespace van {
   @b panel {
     background: #fff;
-    border-top: 1px solid #E5E5E5;
-    border-bottom: 1px solid #E5E5E5;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
+    }
 
     @e header {
       padding: 10px 15px;
       position: relative;
-      border-bottom: 1px solid #E5E5E5;
+      &::after {
+        @mixin border-retina (bottom);
+      }
     }
 
     @e title {
@@ -29,8 +36,12 @@
     }
 
     @e footer {
-      border-top: 1px solid #E5E5E5;
       padding: 10px 15px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (top);
+      }
     }
   }
 }

packages/vant-css/src/radio.css

@@ -14,6 +14,7 @@
       position: relative;
       height: 22px;
       float: left;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
     @e control {
@@ -30,6 +31,7 @@
       line-height: 22px;
       display: block;
       margin-left: 37px;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
     .van-icon {

packages/vant-css/src/search.css

@@ -44,7 +44,8 @@
     .van-icon-search {
       color: $c-gray-darker;
       position: absolute;
-      top: 8px;
+      top: 50%;
+      transform: translateY(-50%);
       left: 10px;
       font-size: 16px;
       line-height: 1;

test/unit/specs/dialog.spec.js

@@ -1,27 +1,56 @@
-// import Dialog from 'packages/dialog';
-import DialogComponent from 'packages/dialog/src/dialog.vue';
-import { mount } from 'avoriaz';
+import Dialog from 'packages/dialog';
 
 describe('Dialog', () => {
-  let wrapper;
   afterEach(() => {
-    wrapper && wrapper.destroy();
+    const el = document.querySelector('.van-dialog-wrapper');
+    if (!el) return;
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+    Dialog.close();
   });
 
-  it('create a dialog component', () => {
-    let called = false;
-    wrapper = mount(DialogComponent);
-    wrapper.vm.callback = () => {
-      called = true;
-    };
+  it('create a alert dialog', (done) => {
+    Dialog.alert({
+      title: 'title',
+      message: 'message'
+    }).then((action) => {
+      expect(action).to.equal('confirm');
+      done();
+    });
 
-    expect(wrapper.hasClass('van-dialog-wrapper')).to.be.true;
-    expect(wrapper.data().confirmButtonText).to.equal('确认');
+    expect(document.querySelector('.van-dialog-wrapper')).to.exist;
+    expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
 
-    const confirmBtn = wrapper.find('.van-dialog__confirm')[0];
-    confirmBtn.simulate('click');
+    setTimeout(() => {
+      document.querySelector('.van-dialog__confirm').click();
+    }, 500);
+  });
 
-    expect(wrapper.vm.value).to.be.false;
-    expect(called).to.be.true;
+  it('create a confirm dialog', () => {
+    Dialog.confirm({
+      title: 'title',
+      message: 'message'
+    });
+
+    expect(document.querySelector('.van-dialog-wrapper')).to.exist;
+  });
+
+  it('create a confirm dialog with callback', (done) => {
+    let dialogAction;
+    Dialog.confirm({
+      title: 'title',
+      message: 'message',
+      callback: (action) => {
+        dialogAction = action;
+      }
+    });
+
+    expect(document.querySelector('.van-dialog-wrapper')).to.exist;
+    setTimeout(() => {
+      document.querySelector('.van-dialog__cancel').click();
+      expect(dialogAction).to.equal('cancel');
+      done();
+    }, 50);
   });
 });

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

@@ -0,0 +1,31 @@
+import ImagePreview from 'packages/image-preview';
+
+describe('ImagePreview', () => {
+  afterEach(() => {
+    const el = document.querySelector('.van-image-preview');
+    if (!el) return;
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+    if (el.__vue__) {
+      el.__vue__.$destroy();
+    }
+  });
+
+  it('create a image preview', (done) => {
+    ImagePreview([
+      'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+      'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+    ]);
+
+    expect(document.querySelector('.van-image-preview')).to.exist;
+
+    setTimeout(() => {
+      document.querySelector('.van-swipe-item').click();
+      setTimeout(() => {
+        expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
+        done();
+      }, 500);
+    }, 500);
+  });
+});

test/unit/specs/toast.spec.js

@@ -1,36 +1,39 @@
-// import Toast from 'packages/toast';
-// import { mount } from 'avoriaz';
+import Toast from 'packages/toast';
 
-// describe('Toast', () => {
-//   // it('create simple toast', () => {
-//   //   Toast('a message');
-//   //   var toast = document.querySelector('.van-toast');
+describe('Toast', () => {
+  afterEach(() => {
+    const el = document.querySelector('.van-toast-wrapper');
+    if (!el) return;
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+    Toast.clear();
+    if (el.__vue__) {
+      el.__vue__.$destroy();
+    }
+  });
 
-//   //   expect(toast).not.to.be.underfined;
+  it('create a toast', () => {
+    Toast('我是提示文案，建议不超过十五字~');
 
-//   //   setTimeout(() => {
-//   //     expect(toast.hidden).to.be.true;
-//   //   }, 301);
-//   // });
+    expect(document.querySelector('.van-toast-wrapper')).to.exist;
+  });
 
-//   // it('create loading toast', () => {
-//   //   Toast.loading('');
-//   //   var toast = document.querySelector('.van-toast');
+  it('create a loading toast', () => {
+    Toast.loading();
 
-//   //   expect(toast).not.to.be.underfined;
+    expect(document.querySelector('.van-toast-wrapper')).to.exist;
+  });
 
-//   //   setTimeout(() => {
-//   //     expect(toast.hidden).to.be.true;
-//   //   }, 301);
-//   // });
-//   // it('create loading toast', () => {
-//   //   Toast.success('');
-//   //   var toast = document.querySelector('.van-toast');
+  it('create a success toast', () => {
+    Toast.success('success');
 
-//   //   expect(toast).not.to.be.underfined;
+    expect(document.querySelector('.van-toast-wrapper')).to.exist;
+  });
 
-//   //   setTimeout(() => {
-//   //     expect(toast.hidden).to.be.true;
-//   //   }, 301);
-//   // });
-// });
+  it('create a fali toast', () => {
+    Toast.fail('fail');
+
+    expect(document.querySelector('.van-toast-wrapper')).to.exist;
+  });
+});