diff --git a/test/unit/specs/menu.spec.js b/test/unit/specs/menu.spec.js new file mode 100644 index 000000000..fcca4d24d --- /dev/null +++ b/test/unit/specs/menu.spec.js @@ -0,0 +1,274 @@ +import { createVue, triggerEvent } from '../util'; + +describe('Menu', () => { + it('create', done => { + const vm = createVue({ + template: ` + + 处理中心 + 订单管理 + + ` + }, 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: ` + + 处理中心 + 订单管理 + + ` + }, 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: ` + + active watch处理中心 + active watch订单管理 + + `, + 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: ` + + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + + ` + }, 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: ` + + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + + `, + 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: ` + + default opened处理中心 + + + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3 + + + `, + 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: ` + + 处理中心 + 订单管理 + + `, + data() { + return { + }; + } + }, true); + expect(vm.$el.classList.contains('el-menu--dark')).to.be.true; + }); + it('unique-opened', done => { + const vm = createVue({ + template: ` + + 处理中心 + + + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3 + + + `, + 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: ` + + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + + `, + 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: ` + + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + + ` + }, 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: ` + + + 导航一 + 导航二 + + + + + 选项1 + 选项2 + + + + ` + }, true); + expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一'); + done(); + }); +});