import { createVue, triggerEvent, destroyVM, triggerKeyDown } from '../util';
describe('Dropdown', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('create', done => {
vm = createVue({
template: `
下拉菜单
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`
}, true);
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.children[0];
triggerEvent(triggerElm, 'mouseenter');
setTimeout(_ => {
expect(dropdown.visible).to.be.true;
triggerEvent(triggerElm, 'mouseleave');
setTimeout(_ => {
expect(dropdown.visible).to.not.true;
done();
}, 300);
}, 400);
});
it('menu click', done => {
const myCommandObject = { name: 'CommandC' };
vm = createVue({
template: `
下拉菜单
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`,
data() {
return {
myCommandObject
};
}
}, true);
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.children[0];
let callback = sinon.spy();
dropdown.$on('command', callback);
triggerEvent(triggerElm, 'mouseenter');
setTimeout(_ => {
vm.$refs.commandC.$el.click();
setTimeout(_ => {
expect(dropdown.visible).to.not.true;
expect(callback.calledWith(myCommandObject)).to.be.true;
done();
}, 300);
}, 300);
});
it('trigger', done => {
vm = createVue({
template: `
下拉菜单trigger click
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`
}, true);
let dropdownElm = vm.$el;
let dropdown = vm.$refs.dropdown;
let triggerElm = dropdownElm.children[0];
triggerEvent(triggerElm, 'mouseenter');
dropdown.$nextTick(_ => {
expect(dropdown.visible).to.not.true;
triggerElm.click();
setTimeout(_ => {
expect(dropdown.visible).to.be.true;
done();
}, 300);
});
});
it('split button', done => {
vm = createVue({
template: `
更多菜单
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`
}, true);
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.querySelector('.el-dropdown__caret-button');
var callback = sinon.spy();
dropdown.$on('click', callback);
dropdownElm.querySelector('.el-button').click();
setTimeout(_ => {
expect(callback.called).to.be.true;
}, 300);
triggerEvent(triggerElm, 'mouseenter');
setTimeout(_ => {
expect(dropdown.visible).to.be.true;
triggerEvent(triggerElm, 'mouseleave');
setTimeout(_ => {
expect(dropdown.visible).to.not.true;
done();
}, 300);
}, 300);
});
it('hide on click', done => {
vm = createVue({
template: `
下拉菜单
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`
}, true);
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.children[0];
let callback = sinon.spy();
dropdown.$on('command', callback);
triggerEvent(triggerElm, 'mouseenter');
setTimeout(_ => {
vm.$refs.commandC.$el.click();
setTimeout(_ => {
expect(dropdown.visible).to.true;
expect(callback.calledWith('c')).to.be.true;
done();
}, 300);
}, 300);
});
it('triggerElm keydown', done => {
vm = createVue({
template: `
下拉菜单
黄金糕
狮子头
螺蛳粉
双皮奶
蚵仔煎
`
}, true);
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.children[0];
triggerKeyDown(triggerElm, 13); // enter
setTimeout(() => {
expect(dropdown.visible).to.be.true;
triggerKeyDown(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;
triggerKeyDown(dropdownMenu, 40); // down
setTimeout(() => {
triggerKeyDown(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);
});
});