From 01f01a66130437f116864f65188bf041b6089494 Mon Sep 17 00:00:00 2001 From: GouJ Date: Mon, 14 Sep 2026 14:01:10 +0800 Subject: [PATCH] fix: update sidebar checks for desktop hover labels --- tests/components/ui/layout.test.ts | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/tests/components/ui/layout.test.ts b/tests/components/ui/layout.test.ts index 637a342..316a439 100644 --- a/tests/components/ui/layout.test.ts +++ b/tests/components/ui/layout.test.ts @@ -159,7 +159,7 @@ describe('管理后台组件边界', () => { expect(wrapper.get('.admin-sider-footer [aria-label="后端连接"]').text()).toBe('后端连接') expect(wrapper.getComponent(NMenu).props()).toMatchObject({ collapsed: false, - collapsedWidth: 144, + collapsedWidth: 64, iconSize: 20, collapsedIconSize: 20, indent: 22, @@ -172,14 +172,20 @@ describe('管理后台组件边界', () => { return option!.icon() } expect(firstMenuIcon().type).not.toBe(NPopover) - expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(true) + expect(wrapper.get('.admin-sider-footer').findComponent(NPopover).exists()).toBe(false) await wrapper.get('[aria-label="折叠侧栏"]').trigger('click') await flushPromises() expect(wrapper.find('[aria-label="展开侧栏"]').exists()).toBe(true) expect(wrapper.getComponent(NMenu).props('collapsed')).toBe(false) expect(firstMenuIcon().type).not.toBe(NPopover) - expect(wrapper.get('.admin-sider').attributes('style')).toContain('width: 144px') - expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(true) + expect(wrapper.get('.admin-sider').attributes('style')).toContain('width: 64px') + expect(wrapper.get('.admin-sider-footer').findComponent(NPopover).exists()).toBe(false) + // 悬停只展示整列名称，不能重新创建菜单或改变正文占用宽度。 + const menuElement = wrapper.get('.n-menu').element + await wrapper.get('.admin-sider').trigger('mouseenter') + expect(wrapper.get('.admin-sider').attributes('style')).toContain('width: 64px') + expect(wrapper.get('.n-menu').element).toBe(menuElement) + await wrapper.get('.admin-sider').trigger('mouseleave') const labels = wrapper.findAll('.n-menu-item-content-header').map(item => item.text()) expect(labels).toEqual([ '我的剧本', @@ -205,11 +211,10 @@ describe('管理后台组件边界', () => { expect(css).toMatch( /\.admin-nav-scroll\.n-scrollbar\s*\{[^}]*flex:\s*1;[^}]*min-height:\s*0;[^}]*min-width:\s*var\(--admin-sider-expanded\)/ ) - expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content-header\s*\{[^}]*opacity:\s*1/) - expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content__icon\s*\{[^}]*z-index:\s*2/) - expect(css).toMatch(/\.n-popover\.admin-nav-popover\s*\{[^}]*margin-inline-start:\s*24px\s*!important/) + expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content-header\s*\{[^}]*opacity:\s*0/) + expect(css).toMatch(/\.admin-sider\.is-collapsed \.n-menu-item-content__icon\s*\{[^}]*pointer-events:\s*none/) expect(css).toMatch(/\.admin-sider-footer\s*\{[^}]*flex-shrink:\s*0/) - expect(css).toMatch(/\.admin-sider\.is-collapsed \.admin-settings-label\s*\{[^}]*opacity:\s*1/) + expect(css).toMatch(/\.admin-sider\.is-collapsed \.admin-settings-label\s*\{[^}]*opacity:\s*0/) expect(css).toMatch(/\.admin-sider\.is-collapsed \.admin-brand span\s*\{[^}]*opacity:\s*0/) expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.admin-brand\s*\{[^}]*height:\s*48px/) expect(css).toContain('@media (max-width: 800px)') @@ -225,6 +230,9 @@ describe('管理后台组件边界', () => { expect(css).toMatch(/\.admin-layout > \.admin-main\s*\{[^}]*width:\s*100%;[^}]*min-width:\s*0/) expect(css).toMatch(/\.mobile-sider-close\s*\{[^}]*display:\s*flex;[^}]*margin-right:\s*8px/) expect(css).toContain('@media (prefers-reduced-motion: reduce)') + expect(css).toContain('.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .n-menu-item-content-header') + expect(css).toContain('clip-path: inset(0);') + expect(css).toContain('transform: translateX(-6px);') expect(css).not.toContain('.admin-sider-mask') expect(css).not.toContain('.admin-sider.is-overlay') for (const path of ['storyboard/StoryboardPage.vue', 'production/ProductionPage.vue']) { @@ -272,7 +280,7 @@ describe('管理后台组件边界', () => { expect(wrapper.find('.admin-sider-mask').exists()).toBe(false) expect(wrapper.find('.admin-nav-drawer').exists()).toBe(false) expect(wrapper.getComponent(NMenu).props()).toMatchObject({ - collapsedWidth: 144, + collapsedWidth: 64, indent: 20, rootIndent: 20 }) @@ -280,7 +288,7 @@ describe('管理后台组件边界', () => { icon: () => ReturnType }> expect(mobileOption!.icon().type).not.toBe(NPopover) - expect(wrapper.get('.admin-sider-footer').getComponent(NPopover).props('disabled')).toBe(true) + expect(wrapper.get('.admin-sider-footer').findComponent(NPopover).exists()).toBe(false) const collapsedBrand = wrapper.get('.admin-brand') expect(collapsedBrand.classes()).toContain('is-collapsed') expect(collapsedBrand.text()).toContain('短剧工作台')