Skip to content

E
Element
Commit 3317f1f7 authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li
Browse files
Options

add menu test

parent 9f77e088
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 0 deletions
test/unit/specs/menu.spec.js 0 → 100644
View file @ 3317f1f7
import { createVue, triggerEvent } from '../util';
describe('Menu', () => {
it('create', done => {
const vm = createVue({
template: `
<el-menu>
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-menu-item index="2" ref="item2">订单管理</el-menu-item>
</el-menu>
`
}, true);
var item1 = vm.$refs.item1;
var item2 = vm.$refs.item2;
item1.$el.click();
vm.$nextTick(_ => {
expect(item1.$el.classList.contains('is-active')).to.be.true;
item2.$el.click();
vm.$nextTick(_ => {
expect(item2.$el.classList.contains('is-active')).to.be.true;
done();
});
});
});
it('default active', done => {
const vm = createVue({
template: `
<el-menu default-active="2">
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-menu-item index="2" ref="item2">订单管理</el-menu-item>
</el-menu>
`
}, true);
expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;
vm.$refs.item1.$el.click();
vm.$nextTick(_ => {
expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
done();
});
});
it('active watch', done => {
const vm = createVue({
template: `
<el-menu :default-active="active">
<el-menu-item index="1" ref="item1">active watch处理中心</el-menu-item>
<el-menu-item index="2" ref="item2">active watch订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
active: '2'
};
}
}, true);
setTimeout(_ => {
vm.active = '1';
vm.$nextTick(_ => {
expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
done();
});
}, 100);
});
it('default active in submenu', done => {
const vm = createVue({
template: `
<el-menu default-active="2-2">
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`
}, true);
expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;
// vm.$refs.item1.$el.click();
vm.$nextTick(_ => {
expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;
done();
});
});
it('submenu', done => {
const vm = createVue({
template: `
<el-menu>
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
};
}
}, true);
var submenuItem2 = vm.$refs.submenuItem2;
var submenu = vm.$refs.submenu;
submenu.$el.querySelector('.el-submenu__title').click();
vm.$nextTick(_ => {
expect(submenu.$el.classList.contains('is-opened')).to.be.true;
submenuItem2.$el.click();
vm.$nextTick(_ => {
expect(submenuItem2.$el.classList.contains('is-active')).to.be.true;
submenu.$el.querySelector('.el-submenu__title').click();
vm.$nextTick(_ => {
expect(submenu.$el.classList.contains('is-opened')).to.not.true;
done();
});
});
});
});
it('submenu default opened', done => {
const vm = createVue({
template: `
<el-menu theme="dark" :default-openeds="defaultOpeneds">
<el-menu-item index="1">default opened处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1">
<template slot="title">default opened我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenu1Item2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="3" ref="submenu2">
<template slot="title">default opened订单管理</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2" ref="submenu2Item2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
`,
data() {
return {
defaultOpeneds: ['2', '3']
};
}
}, true);
expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.be.true;
vm.defaultOpeneds = ['2'];
vm.$nextTick(_ => {
expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.not.true;
done();
});
});
it('theme', () => {
const vm = createVue({
template: `
<el-menu theme="dark">
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
};
}
}, true);
expect(vm.$el.classList.contains('el-menu--dark')).to.be.true;
});
it('unique-opened', done => {
const vm = createVue({
template: `
<el-menu theme="dark" unique-opened default-active="2-2">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenu1Item2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="3" ref="submenu2">
<template slot="title">订单管理</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2" ref="submenu2Item2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
`,
data() {
return {
};
}
}, true);
vm.$refs.submenu2Item2.$el.click();
vm.$nextTick(_ => {
expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.not.true;
expect(vm.$refs.submenu2Item2.$el.classList.contains('is-active')).to.be.true;
done();
});
});
it('horizontal mode', done => {
const vm = createVue({
template: `
<el-menu mode="horizontal">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
};
}
}, true);
expect(vm.$el.classList.contains('el-menu--horizontal')).to.be.true;
var submenu = vm.$refs.submenu;
triggerEvent(submenu.$el, 'mouseenter');
setTimeout(_ => {
expect(submenu.$el.querySelector('.el-menu').style.display).to.not.ok;
triggerEvent(submenu.$el, 'mouseleave');
setTimeout(_ => {
expect(submenu.$el.querySelector('.el-menu').style.display).to.be.equal('none');
done();
}, 1000);
}, 500);
});
it('horizontal submenu active', done => {
const vm = createVue({
template: `
<el-menu mode="horizontal">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`
}, true);
let submenuItem2 = vm.$refs.submenuItem2;
submenuItem2.$el.click();
vm.$nextTick(_ => {
expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;
done();
});
});
it('menu group', done => {
const vm = createVue({
template: `
<el-menu mode="vertical" default-active="1">
<el-menu-item-group title="分组一" ref="group1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
</el-menu-item-group>
<el-submenu index="5">
<template slot="title">导航五</template>
<el-menu-item-group title="分组二">
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
`
}, true);
expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
done();
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment