修复表单组件样式和单元测试用例 (#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

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