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:
@@ -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,
|
||||
}),
|
||||
}))
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user