fix(gui-v2): mount Drawer only on mobile (v-if) + shared Tailwind breakpoint

CRITICAL: replace `lg:hidden` on PrimeVue Drawer with `v-if="isMobile"` so the
teleported portal/overlay is never created on desktop viewports regardless of
mobileOpen state. Replace useMediaQuery raw string in SidebarHeader with
useBreakpoints(breakpointsTailwind).smaller('lg') shared by both components.
Add desktop/mobile comments; adapt tests to useBreakpoints mock; add
Drawer-absent-on-desktop and aside w-16/w-64 width-class assertions (21 tests).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-16 20:41:50 +02:00
parent f0f9cb7e36
commit 23e1262f9c
4 changed files with 141 additions and 19 deletions

View File

@@ -2,7 +2,7 @@
* SidebarHeader.spec.ts — unit tests for the non-trivial logic in SidebarHeader.
*
* Strategy: mount with @vue/test-utils + createPinia. Child components (Icon)
* and @vueuse/core's useMediaQuery are stubbed so we test only:
* and @vueuse/core's useBreakpoints are stubbed so we test only:
* 1. Collapse-button desktop path → shell.toggleSidebar() called.
* 2. Collapse-button mobile path → shell.setMobileOpen(false) called.
* 3. Collapsed state hides wordmark + pill; keep collapse button.
@@ -18,14 +18,18 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useShellUiStore } from '@/stores/useShellUiStore'
// ---------------------------------------------------------------------------
// Mock @vueuse/core so we can control `isMobile` per test
// Mock @vueuse/core so we can control `isMobile` per test.
// The component uses useBreakpoints(breakpointsTailwind).smaller('lg').
// We return an object whose .smaller() method returns a controllable ref.
// ---------------------------------------------------------------------------
// We expose a reactive ref that individual tests can flip.
const mockIsMobileRef = ref(false)
vi.mock('@vueuse/core', () => ({
useMediaQuery: () => mockIsMobileRef,
breakpointsTailwind: {},
useBreakpoints: () => ({
smaller: (_bp: string) => mockIsMobileRef,
}),
}))
// ---------------------------------------------------------------------------