65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
/**
|
|
* 侧栏菜单项：折叠态只显示图标。
|
|
*
|
|
* 回归背景：分组分支在折叠态走的是 G3Dropdown（触发器里只有图标），
|
|
* 而叶子分支的名称没跟着折叠态隐藏 —— 折叠后行里仍是「图标 + 名称」，
|
|
* 侧栏只剩 collapseWidth 那么宽（图标+间距就占掉二十几像素），
|
|
* 名称被裁成一两个字加省略号，比不显示更糟。
|
|
*/
|
|
|
|
import { describe, expect, it } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import { ref } from 'vue'
|
|
import { createMemoryHistory, createRouter } from 'vue-router'
|
|
import SidebarMenuItem from '@/layouts/SidebarMenuItem.vue'
|
|
import type { SidebarMenuNode } from '@/types/menu'
|
|
|
|
const LEAF: SidebarMenuNode = {
|
|
key: 'approval_todo',
|
|
title: '我的待办',
|
|
path: '/approval/todo',
|
|
icon: { template: '<i class="stub-icon" />' },
|
|
}
|
|
|
|
function mountLeaf(collapsed: boolean) {
|
|
return mount(SidebarMenuItem, {
|
|
props: { item: LEAF, level: 0 },
|
|
global: {
|
|
plugins: [
|
|
createRouter({
|
|
history: createMemoryHistory(),
|
|
routes: [{ path: '/approval/todo', component: { template: '<div />' } }],
|
|
}),
|
|
],
|
|
provide: {
|
|
'sidebar-menu': {
|
|
collapsed: ref(collapsed),
|
|
isLeafActive: () => false,
|
|
isGroupActive: () => false,
|
|
isGroupOpen: () => false,
|
|
toggleGroup: () => {},
|
|
selectPath: () => {},
|
|
},
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
describe('SidebarMenuItem 叶子项', () => {
|
|
it('展开态：图标与名称都在，不需要 title 提示', () => {
|
|
const wrapper = mountLeaf(false)
|
|
|
|
expect(wrapper.find('.stub-icon').exists()).toBe(true)
|
|
expect(wrapper.find('.layout-sidebar__label').text()).toBe('我的待办')
|
|
expect(wrapper.find('a').attributes('title')).toBeUndefined()
|
|
})
|
|
|
|
it('折叠态：只渲染图标，名称不进 DOM，改为 title 提示', () => {
|
|
const wrapper = mountLeaf(true)
|
|
|
|
expect(wrapper.find('.stub-icon').exists()).toBe(true)
|
|
expect(wrapper.find('.layout-sidebar__label').exists()).toBe(false)
|
|
expect(wrapper.find('a').attributes('title')).toBe('我的待办')
|
|
})
|
|
})
|