mirror of https://github.com/ElemeFE/element
Test: add some test cases (#11453)
hetech
杨奕
parent
40cf8ee0e6
commit
3e2e96313a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -191,4 +191,87 @@ describe('Dialog', () => {
|
|||
}, 50);
|
||||
}, 50);
|
||||
});
|
||||
it('click dialog to close', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<div>
|
||||
<el-dialog :title="title" :visible.sync="visible">
|
||||
<span>这是一段信息</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
|
||||
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: `
|
||||
<div>
|
||||
<el-dialog :title="title" :visible.sync="visible">
|
||||
<span>这是一段信息</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
|
||||
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: `
|
||||
<div>
|
||||
<el-dialog :title="title" :visible="visible" :before-close="beforeClose"></el-dialog>
|
||||
</div>
|
||||
`,
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<el-dropdown ref="dropdown">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
`
|
||||
}, 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: `
|
||||
<el-dropdown ref="dropdown">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
|
||||
<el-dropdown-item command="a">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item command="b">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item command="d">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
`
|
||||
}, 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: `
|
||||
<el-dropdown ref="dropdown">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
`
|
||||
}, 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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -98,4 +98,39 @@ describe('Tooltip', () => {
|
|||
done();
|
||||
});
|
||||
});
|
||||
it('hide after', done => {
|
||||
vm = createVue(`
|
||||
<el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
|
||||
<button>click</button>
|
||||
</el-tooltip>`);
|
||||
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(`
|
||||
<el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
|
||||
<button>click</button>
|
||||
</el-tooltip>`);
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue