u

code/g3soft-erp/web/tests/layouts/SidebarMenuItem.spec.ts

@@ -0,0 +1,64 @@
+/**
+ * 侧栏菜单项：折叠态只显示图标。
+ *
+ * 回归背景：分组分支在折叠态走的是 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('我的待办')
+  })
+})