diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index 0f52e755f..30ab862fa 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/packages/dropdown/src/dropdown.vue @@ -169,7 +169,7 @@ } else if (keyCode === 13) { // enter选中 this.triggerElm.focus(); target.click(); - if (!this.hideOnClick) { // click关闭 + if (this.hideOnClick) { // click关闭 this.visible = false; } } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js index 148c9071b..bf12c29d1 100644 --- a/test/unit/specs/dialog.spec.js +++ b/test/unit/specs/dialog.spec.js @@ -191,4 +191,87 @@ describe('Dialog', () => { }, 50); }, 50); }); + it('click dialog to close', done => { + vm = createVue({ + template: ` +
+ + 这是一段信息 + +
+ `, + + data() { + return { + title: 'dialog test', + visible: true + }; + } + }, true); + const dialog = vm.$children[0]; + setTimeout(() => { + dialog.$el.click(); + setTimeout(() => { + expect(vm.visible).to.be.false; + done(); + }, 400); + }, 50); + }); + it('click header btn', done => { + vm = createVue({ + template: ` +
+ + 这是一段信息 + +
+ `, + + data() { + return { + title: 'dialog test', + visible: true + }; + } + }, true); + const dialog = vm.$children[0]; + setTimeout(() => { + dialog.$el.querySelector('.el-dialog__headerbtn').click(); + setTimeout(() => { + expect(vm.visible).to.be.false; + done(); + }, 500); + }, 50); + }); + it('before close', done => { + const spy = sinon.spy(); + vm = createVue({ + template: ` +
+ +
+ `, + + data() { + return { + title: 'dialog test', + visible: true + }; + }, + methods: { + beforeClose(done) { + spy(); + done(); + } + } + }, true); + const dialog = vm.$children[0]; + setTimeout(() => { + dialog.$el.click(); + setTimeout(() => { + expect(spy.called).to.be.true; + done(); + }, 500); + }, 10); + }); }); diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js index 37f7383dd..ab6569c71 100644 --- a/test/unit/specs/dropdown.spec.js +++ b/test/unit/specs/dropdown.spec.js @@ -1,5 +1,12 @@ import { createVue, triggerEvent, destroyVM } from '../util'; +const keyDown = (el, keyCode) => { + const evt = document.createEvent('Events'); + evt.initEvent('keydown', true, true); + evt.keyCode = keyCode; + el.dispatchEvent(evt); +}; + describe('Dropdown', () => { let vm; afterEach(() => { @@ -182,4 +189,102 @@ describe('Dropdown', () => { }, 300); }, 300); }); + it('triggerElm keydown', done => { + vm = createVue({ + template: ` + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + ` + }, true); + let dropdown = vm.$refs.dropdown; + let dropdownElm = dropdown.$el; + let triggerElm = dropdownElm.children[0]; + keyDown(triggerElm, 13); // enter + setTimeout(() => { + expect(dropdown.visible).to.be.true; + keyDown(triggerElm, 27); // esc + setTimeout(() => { + expect(dropdown.visible).to.be.false; + done(); + }, 300); + }, 400); + }); + it('dropdown menu keydown', done => { + vm = createVue({ + template: ` + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + ` + }, true); + let dropdown = vm.$refs.dropdown; + let dropdownElm = dropdown.$el; + let triggerElm = dropdownElm.children[0]; + let dropdownMenu = dropdown.dropdownElm; + + triggerEvent(triggerElm, 'mouseenter'); + + setTimeout(() => { + expect(dropdown.visible).to.be.true; + keyDown(dropdownMenu, 40); // down + setTimeout(() => { + keyDown(dropdownMenu, 13); // enter + setTimeout(() => { + expect(dropdown.visible).to.be.false; + done(); + }, 100); + }, 100); + }, 300); + }); + it('updatePopper', done => { + vm = createVue({ + template: ` + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + ` + }, true); + let dropdown = vm.$refs.dropdown; + let dropdownElm = dropdown.$el; + let triggerElm = dropdownElm.children[0]; + + triggerEvent(triggerElm, 'mouseenter'); + setTimeout(() => { + const zIndex1 = document.querySelector('.el-dropdown-menu').style.zIndex; + dropdown.broadcast('ElDropdownMenu', 'updatePopper'); + setTimeout(() => { + const zIndex2 = document.querySelector('.el-dropdown-menu').style.zIndex; + expect(zIndex2 > zIndex1).to.be.true; + done(); + }, 100); + }, 300); + }); }); diff --git a/test/unit/specs/tooltip.spec.js b/test/unit/specs/tooltip.spec.js index ee4e549be..4b5c38ac2 100644 --- a/test/unit/specs/tooltip.spec.js +++ b/test/unit/specs/tooltip.spec.js @@ -98,4 +98,39 @@ describe('Tooltip', () => { done(); }); }); + it('hide after', done => { + vm = createVue(` + + + `); + const tooltip = vm.$refs.tooltip; + vm.$nextTick(_ => { + triggerEvent(tooltip.$el, 'mouseenter'); + setTimeout(() => { + expect(tooltip.showPopper).to.be.true; + setTimeout(() => { + expect(tooltip.showPopper).to.be.false; + done(); + }, 300); + }, 100); + }); + }); + it('remove focus', done => { + vm = createVue(` + + + `); + const tooltip = vm.$refs.tooltip; + vm.$nextTick(_ => { + triggerEvent(tooltip.$el, 'mouseenter'); + setTimeout(() => { + tooltip.focusing = true; + tooltip.$el.click(); + setTimeout(() => { + expect(tooltip.showPopper).to.be.false; + done(); + }, 300); + }, 100); + }); + }); });