diff --git a/packages/menu/__tests__/menu.spec.ts b/packages/menu/__tests__/menu.spec.ts index ab9816b142..1846c47a44 100644 --- a/packages/menu/__tests__/menu.spec.ts +++ b/packages/menu/__tests__/menu.spec.ts @@ -1,15 +1,109 @@ import { mount } from '@vue/test-utils' -import ElMenu from '../src/menu.vue' -import ElSubmenu from '../src/submenu.vue' -import ElMenuItem from '../src/menuItem.vue' -import ElMenuItemGroup from '../src/menuItemGroup.vue' import { nextTick } from 'vue' +import { rAF } from '@element-plus/test-utils/tick' +import { sleep } from '@element-plus/test-utils' -describe('Menu.vue', () => { +import Menu from '../src/menu.vue' +import MenuGroup from '../src/menuGroup.vue' +import MenuItem from '../src/menuItem.vue' +import SubMenu from '../src/submenu.vue' + +const _mount = (template: string, options = {}) => + mount({ + components: { + 'el-menu': Menu, + 'el-menu-item-group': MenuGroup, + 'el-menu-item': MenuItem, + 'el-submenu': SubMenu, + }, + template, + ...options, + }) + +describe('menu', () => { + test('create', async () => { + const wrapper = _mount( + ` + 处理中心 + 订单管理 + `, + ) + const item1 = await wrapper.findComponent({ ref: 'item1' }) + const item2 = await wrapper.findComponent({ ref: 'item2' }) + await item1.trigger('click') + await nextTick() + expect(item1.classes()).toContain('is-active') + await item2.trigger('click') + await nextTick() + expect(item2.classes()).toContain('is-active') + }) + test('background-color', async () => { + const wrapper = _mount( + ` + 处理中心 + 订单管理 + `, + ) + const instance = wrapper.vm.$el + const item1 = await wrapper.findComponent({ ref: 'item1' }) + const item2 = await wrapper.findComponent({ ref: 'item2' }) + + expect(instance.style.backgroundColor).toEqual('rgb(255, 0, 0)') + expect(item1.vm.$el.style.backgroundColor).toEqual('rgb(255, 0, 0)') + expect(item1.vm.$el.style.color).toEqual('rgb(0, 0, 0)') + expect(item2.vm.$el.style.color).toEqual('rgb(0, 255, 0)') + await item1.trigger('mouseenter') + await nextTick() + expect(item1.vm.$el.style.backgroundColor).toEqual('rgb(204, 0, 0)') + }) + test('menu-item click', async () => { + const wrapper = _mount( + ` + 处理中心 + 订单管理 + `, + { + data() { + return { + clicksCount: 0, + } + }, + methods: { + onMenuItemClick(item) { + expect(item).toMatchObject({ + index: '1', + indexPath: ['1'], + }) + this.clicksCount = this.clicksCount + 1 + }, + }, + }, + ) + const item1 = await wrapper.findComponent({ ref: 'item1' }) + await item1.trigger('click') + await nextTick() + expect((wrapper.vm as any).clicksCount).toEqual(1) + }) + test('menu-item disabled', async () => { + const wrapper = _mount( + ` + 处理中心 + 订单管理 + `, + ) + const item1 = await wrapper.findComponent({ ref: 'item1' }) + const item2 = await wrapper.findComponent({ ref: 'item2' }) + expect(item2.classes()).toContain('is-active') + await item1.trigger('click') + await nextTick() + expect(item1.classes().includes('is-active')).toBeFalsy() + }) test('open method', async () => { - const wrapper = mount({ - template: ` -
+ const wrapper = _mount( + `
{
`, - components: { ElMenu, ElSubmenu, ElMenuItem, ElMenuItemGroup }, - methods: { - open(){ - this.$refs.menu.open('1') + { + methods: { + open() { + this.$refs.menu.open('1') + }, }, }, - }) + ) const elSubmenu = wrapper.findComponent({ name: 'ElSubmenu' }) const button = wrapper.find('button') button.trigger('click') await nextTick() - expect(elSubmenu.vm.opened).toBeTruthy() + const instance = elSubmenu.vm as any + expect(instance.opened).toBeTruthy() + }) +}) + +describe('default active', () => { + test('normal active', async () => { + const wrapper = _mount( + ` + 处理中心 + 订单管理 + `, + ) + const item1 = await wrapper.findComponent({ ref: 'item1' }) + const item2 = await wrapper.findComponent({ ref: 'item2' }) + + expect(item2.classes()).toContain('is-active') + await item1.trigger('click') + await nextTick() + expect(item1.classes()).toContain('is-active') + }) + test('dynamic active', async () => { + const wrapper = _mount( + ` + active watch处理中心 + active watch订单管理 + `, + { + data() { + return { + active: '2', + } + }, + }, + ) + const instance = wrapper.vm as any + instance.active = '1' + await nextTick() + const item1 = await wrapper.findComponent({ ref: 'item1' }) + expect(item1.classes()).toContain('is-active') + }) + test('vertical submenu item active', async () => { + const wrapper = _mount( + `
+ + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + +
`, + ) + const submenu = await wrapper.findComponent({ ref: 'submenu' }) + const submenuItem2 = await wrapper.findComponent({ ref: 'submenuItem2' }) + expect(submenuItem2.classes()).toContain('is-active') + await nextTick() + expect(submenu.classes()).toContain('is-opened') + expect(submenu.classes()).toContain('is-active') + }) + test('horizontal submenu item active', async () => { + const wrapper = _mount( + `
+ + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + +
`, + ) + const submenu = await wrapper.findComponent({ ref: 'submenu' }) + const submenuItem2 = await wrapper.findComponent({ ref: 'submenuItem2' }) + expect(submenuItem2.classes()).toContain('is-active') + await nextTick() + expect(submenu.classes()).toContain('is-opened') + expect(submenu.classes()).toContain('is-active') + }) +}) + +describe('submenu', () => { + test('toggle', async () => { + const wrapper = _mount( + ` + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + `, + ) + const submenu = await wrapper.findComponent({ ref: 'submenu' }) + const submenuItem2 = await wrapper.findComponent({ ref: 'submenuItem2' }) + submenu.vm.$el.querySelector('.el-submenu__title').click() + await nextTick() + expect(submenu.classes()).toContain('is-opened') + submenuItem2.trigger('click') + await nextTick() + expect(submenuItem2.classes()).toContain('is-active') + submenu.trigger('click') + await nextTick() + expect(submenu.classes()).toContain('is-opened') + }) + test('default opened', async () => { + const wrapper = _mount( + ` + default opened处理中心 + + + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3 + + `, + { + data() { + return { + defaultOpeneds: ['2', '3'], + } + }, + }, + ) + const submenu1 = await wrapper.findComponent({ ref: 'submenu1' }) + const submenu2 = await wrapper.findComponent({ ref: 'submenu2' }) + await nextTick() + expect(submenu1.classes()).toContain('is-opened') + expect(submenu2.classes()).toContain('is-opened') + const instance = wrapper.vm as any + instance.defaultOpeneds = ['2'] + await nextTick() + expect(submenu1.classes()).toContain('is-opened') + expect(submenu2.classes()).toContain('is-opened') + }) + test('disabled', async () => { + const wrapper = _mount( + ` + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + `, + { + data() { + return { + defaultOpeneds: ['2', '3'], + } + }, + }, + ) + const submenu = await wrapper.findComponent({ ref: 'submenu' }) + await submenu.trigger('click') + await nextTick() + expect(submenu.classes().includes('is-opened')).toBeFalsy() + }) +}) + +describe('other', () => { + test('disabled', async () => { + const wrapper = _mount( + ` + 处理中心 + + + 选项1 + 选项2 + 选项3 + + + + 选项1 + 选项2 + 选项3 + + `, + ) + const submenu2 = await wrapper.findComponent({ ref: 'submenu2' }) + submenu2.vm.$el.querySelector('.el-submenu__title').click() + await nextTick() + const submenu1 = await wrapper.findComponent({ ref: 'submenu1' }) + expect(submenu1.classes().includes('is-opened')).toBeFalsy() + }) + test('horizontal mode', async () => { + const wrapper = _mount( + ` + 处理中心 + + + 选项1 + 选项2 + 选项3 + + 订单管理 + `, + ) + expect(wrapper.classes()).toContain('el-menu--horizontal') + const submenu = await wrapper.findComponent({ ref: 'submenu' }) + + submenu.trigger('mouseenter') + await sleep(500) + expect( + document.body + .querySelector('body [role="tooltip"]') + .getAttribute('style'), + ).not.toContain('display: none') + }) + test('menu group', async () => { + const wrapper = _mount( + ` + + 导航一 + 导航二 + + + + + 选项1 + 选项2 + + + `, + ) + const group1 = await wrapper.findComponent({ ref: 'group1' }) + expect( + group1.vm.$el.querySelector('.el-menu-item-group__title').innerHTML, + ).toEqual('分组一') + }) + test('dynamic menus, issue 9092', async () => { + const wrapper = _mount( + ` + + {{menu.description}} + + `, + { + data() { + return { + active: '', + menus: [], + } + }, + }, + ) + const instance = wrapper.vm as any + instance.active = '2' + instance.menus = [ + { name: '1', description: 'happy' }, + { name: '2', description: 'new' }, + { name: '3', description: 'year' }, + ] + await nextTick() + expect( + instance.$el.querySelector('.el-menu-item.is-active').innerHTML, + ).toEqual('new') }) })