From 034c66a77f2adf6a9ac29d69830648b4f37ce14c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= Date: Mon, 24 Apr 2017 17:33:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A1=A8=E5=8D=95=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8D=95=E5=85=83=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 2 + packages/dialog/src/dialog.js | 8 +-- packages/dialog/src/dialog.vue | 2 + packages/image-preview/src/image-preview.vue | 3 +- packages/vant-css/scripts/fount-config.js | 6 +- packages/vant-css/src/checkbox.css | 2 + packages/vant-css/src/icon.css | 10 ++-- packages/vant-css/src/panel.css | 19 ++++-- packages/vant-css/src/radio.css | 2 + packages/vant-css/src/search.css | 3 +- test/unit/specs/dialog.spec.js | 63 ++++++++++++++------ test/unit/specs/image-preview.spec.js | 31 ++++++++++ test/unit/specs/toast.spec.js | 59 +++++++++--------- 13 files changed, 146 insertions(+), 64 deletions(-) create mode 100644 test/unit/specs/image-preview.spec.js diff --git a/.gitignore b/.gitignore index 770a2b480..558e2ddb9 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,5 @@ node_modules example/dist /docs/dist test/unit/coverage +packages/vant-css/build +packages/vant-css/icons diff --git a/packages/dialog/src/dialog.js b/packages/dialog/src/dialog.js index 7f1e1abbf..e3a92c7d8 100644 --- a/packages/dialog/src/dialog.js +++ b/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]; } diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue index de3992ae0..235a1c054 100644 --- a/packages/dialog/src/dialog.vue +++ b/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') { diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue index 0e944d59d..c66593197 100644 --- a/packages/image-preview/src/image-preview.vue +++ b/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; diff --git a/packages/vant-css/scripts/fount-config.js b/packages/vant-css/scripts/fount-config.js index 4046e5f22..723a1dfe0 100644 --- a/packages/vant-css/scripts/fount-config.js +++ b/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'], diff --git a/packages/vant-css/src/checkbox.css b/packages/vant-css/src/checkbox.css index 9e7c9d7a2..9883c397b 100644 --- a/packages/vant-css/src/checkbox.css +++ b/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 { diff --git a/packages/vant-css/src/icon.css b/packages/vant-css/src/icon.css index 58e1e9497..364f14a8e 100644 --- a/packages/vant-css/src/icon.css +++ b/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 { diff --git a/packages/vant-css/src/panel.css b/packages/vant-css/src/panel.css index 2a08bda61..03ef9feef 100644 --- a/packages/vant-css/src/panel.css +++ b/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); + } } } } diff --git a/packages/vant-css/src/radio.css b/packages/vant-css/src/radio.css index c45ade591..abb71495d 100644 --- a/packages/vant-css/src/radio.css +++ b/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 { diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css index 5a0c9e5b2..2d3a8ed1b 100644 --- a/packages/vant-css/src/search.css +++ b/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; diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js index 40a09f63d..2fad23a13 100644 --- a/test/unit/specs/dialog.spec.js +++ b/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); }); }); diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js new file mode 100644 index 000000000..19d8cfeee --- /dev/null +++ b/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); + }); +}); diff --git a/test/unit/specs/toast.spec.js b/test/unit/specs/toast.spec.js index c4c906f78..ace7130cd 100644 --- a/test/unit/specs/toast.spec.js +++ b/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; + }); +});