From 067541e8d94a297a6c99dcaa109e6778230111b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Fri, 24 Feb 2017 17:37:06 +0800 Subject: [PATCH] improve tests (#3033) --- examples/docs/en-US/cascader.md | 3 +- examples/docs/zh-CN/cascader.md | 3 +- .../color-picker/src/components/sv-panel.vue | 14 ++-- packages/theme-default/src/color-picker.css | 4 +- test/unit/specs/carousel.spec.js | 4 +- test/unit/specs/color-picker.spec.js | 84 ++++++++++++++++++- test/unit/specs/menu.spec.js | 3 +- 7 files changed, 102 insertions(+), 13 deletions(-) diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md index 101bd80d5..3d7b6f524 100644 --- a/examples/docs/en-US/cascader.md +++ b/examples/docs/en-US/cascader.md @@ -474,7 +474,8 @@ There are two ways to expand child option items. label: 'Design Documentation' }] }], - selectedOptions: [] + selectedOptions: [], + selectedOptions2: [] }; }, methods: { diff --git a/examples/docs/zh-CN/cascader.md b/examples/docs/zh-CN/cascader.md index 39365e7c2..e91560894 100644 --- a/examples/docs/zh-CN/cascader.md +++ b/examples/docs/zh-CN/cascader.md @@ -505,7 +505,8 @@ label: '组件交互文档' }] }], - selectedOptions: [] + selectedOptions: [], + selectedOptions2: [] }; }, methods: { diff --git a/packages/color-picker/src/components/sv-panel.vue b/packages/color-picker/src/components/sv-panel.vue index e9de140a7..137e9f432 100644 --- a/packages/color-picker/src/components/sv-panel.vue +++ b/packages/color-picker/src/components/sv-panel.vue @@ -47,11 +47,9 @@ this.cursorTop = (100 - value) * height / 100; this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)'; - } - }, + }, - mounted() { - const handleDrag = (event) => { + handleDrag(event) { const el = this.$el; const rect = el.getBoundingClientRect(); @@ -69,14 +67,16 @@ saturation: left / rect.width * 100, value: 100 - top / rect.height * 100 }); - }; + } + }, + mounted() { draggable(this.$el, { drag: (event) => { - handleDrag(event); + this.handleDrag(event); }, end: (event) => { - handleDrag(event); + this.handleDrag(event); } }); diff --git a/packages/theme-default/src/color-picker.css b/packages/theme-default/src/color-picker.css index 1a8cbe9fc..8e37ab892 100644 --- a/packages/theme-default/src/color-picker.css +++ b/packages/theme-default/src/color-picker.css @@ -209,6 +209,7 @@ padding: 6px; border: 1px solid #bfcbd9; border-radius: 4px; + font-size: 0; } @descendent color { @@ -237,7 +238,7 @@ @descendent empty { font-size: 12px; vertical-align: middle; - margin-top: -2px; + margin-top: 4px; color: #666; } @@ -248,6 +249,7 @@ margin-left: 8px; width: 12px; color: #888; + font-size: 12px; } @descendent panel { diff --git a/test/unit/specs/carousel.spec.js b/test/unit/specs/carousel.spec.js index 717032230..be5e5bd5e 100644 --- a/test/unit/specs/carousel.spec.js +++ b/test/unit/specs/carousel.spec.js @@ -138,7 +138,7 @@ describe('Carousel', () => { vm = createVue({ template: `
- +
@@ -147,9 +147,11 @@ describe('Carousel', () => { setTimeout(() => { const items = vm.$el.querySelectorAll('.el-carousel__item'); + const carousel = vm.$refs.carousel; vm.$el.querySelectorAll('.el-carousel__indicator')[2].click(); setTimeout(() => { expect(items[2].classList.contains('is-active')).to.true; + carousel.handleButtonEnter('right'); vm.$el.querySelector('.el-carousel__arrow--right').click(); setTimeout(() => { expect(items[0].classList.contains('is-active')).to.true; diff --git a/test/unit/specs/color-picker.spec.js b/test/unit/specs/color-picker.spec.js index ee8fa2e45..0e1946b90 100644 --- a/test/unit/specs/color-picker.spec.js +++ b/test/unit/specs/color-picker.spec.js @@ -11,7 +11,7 @@ describe('ColorPicker', () => { if (dropdown && dropdown.parentNode) dropdown.parentNode.removeChild(dropdown); }); - it('should works', () => { + it('should work', () => { vm = createTest(ColorPicker, true); expect(vm.$el).to.exist; }); @@ -133,5 +133,87 @@ describe('ColorPicker', () => { }, 30); }, ANIMATION_TIME); }); + + it('should change hue when clicking the hue bar', (done) => { + const vm = createVue({ + template: ` + + `, + + data() { + return { + color: '#f00' + }; + } + }, true); + + const trigger = vm.$el.querySelector('.el-color-picker__trigger'); + trigger.click(); + + setTimeout(() => { + const hueBar = document.querySelector('.el-color-hue-slider'); + hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 }); + vm.$nextTick(() => { + const picker = vm.$children[0]; + expect(picker.color._hue > 0).to.true; + done(); + }); + }, ANIMATION_TIME); + }); + + it('should change alpha when clicking the alpha bar', (done) => { + const vm = createVue({ + template: ` + + `, + + data() { + return { + color: '#f00' + }; + } + }, true); + + const trigger = vm.$el.querySelector('.el-color-picker__trigger'); + trigger.click(); + + setTimeout(() => { + const alphaBar = document.querySelector('.el-color-alpha-slider'); + alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 }); + vm.$nextTick(() => { + const picker = vm.$children[0]; + expect(picker.color._alpha < 1).to.true; + done(); + }); + }, ANIMATION_TIME); + }); + + it('should change saturation and value when clicking the sv-panel', (done) => { + const vm = createVue({ + template: ` + + `, + + data() { + return { + color: 'hsv(0, 50%, 50%)' + }; + } + }, true); + + const trigger = vm.$el.querySelector('.el-color-picker__trigger'); + trigger.click(); + + setTimeout(() => { + const svPanel = document.querySelector('.el-color-svpanel'); + svPanel.__vue__.handleDrag({ clientX: 0, clientY: 0 }); + vm.$nextTick(() => { + const picker = vm.$children[0]; + expect(picker.color._saturation !== 50).to.true; + expect(picker.color._value !== 50).to.true; + done(); + }); + }, ANIMATION_TIME); + }); }); diff --git a/test/unit/specs/menu.spec.js b/test/unit/specs/menu.spec.js index f6d928cb2..f3174ffc7 100644 --- a/test/unit/specs/menu.spec.js +++ b/test/unit/specs/menu.spec.js @@ -146,7 +146,8 @@ describe('Menu', () => { }); }); }); - describe('submenu', () => { + describe('submenu', function() { + this.timeout(3000); it('toggle', done => { vm = createVue({ template: `