fix(069-B2): green dashboard-usage-switcher unit tests (MCP-900) (#576)

The 069-B1 switcher tests broke when 069-B2 (#571) swapped the inline
usage panel for the real async Usage.vue. Two mount-side problems:

- The usage panel wrapper carried v-if="usageEverActive", so it was
  absent from the DOM on first paint and the exists() assertion failed.
  Move the lazy gate onto the inner <Suspense> instead: the wrapper div
  is now always present (hidden via v-show), while the chart bundle +
  usage fetch inside UsageView still mount only on first switch (SC-004),
  and the Overview subtree is preserved across switches (SC-006).

- shallowMount stubbed both <Suspense> and the async UsageView, so the
  real Usage.vue never rendered (no fetch, no window buttons). Un-stub
  Suspense and swap the async wrapper for an eagerly-imported Usage.vue
  so the fetch-on-activation and window-re-fetch logic actually runs; a
  dynamic import() never settles inside flushPromises + Suspense. Usage's
  chart grandchildren stay shallow-stubbed (no jsdom canvas).

Related #571

Author: Dumbris

frontend/src/views/Dashboard.vue

@@ -21,11 +21,13 @@
       >Usage</a>
     </div>
 
-    <!-- Usage view: lazy-mounted on first switch so the chart bundle and the
-         usage fetch don't block Dashboard first paint (SC-004). Kept alive with
-         v-show after mount so re-switching is instant. -->
-    <div v-if="usageEverActive" v-show="activeView === 'usage'" data-test="dashboard-usage-panel">
-      <Suspense>
+    <!-- Usage view: the panel wrapper is always in the DOM (kept hidden with
+         v-show so switching back is instant and the Overview subtree is never
+         torn down, SC-006). The heavy chart bundle + the usage fetch inside
+         UsageView are lazy-mounted only on first switch (v-if="usageEverActive")
+         so they never block Dashboard first paint (SC-004). -->
+    <div v-show="activeView === 'usage'" data-test="dashboard-usage-panel">
+      <Suspense v-if="usageEverActive">
         <UsageView />
         <template #fallback>
           <div class="flex justify-center py-16"><span class="loading loading-spinner loading-lg"></span></div>

frontend/tests/unit/dashboard-usage-switcher.spec.ts

@@ -58,6 +58,13 @@ vi.mock('@/composables/useSecurityScannerStatus', () => ({
 }))
 
 import Dashboard from '@/views/Dashboard.vue'
+// Dashboard imports Usage.vue lazily via defineAsyncComponent so the chart
+// bundle stays out of first paint (SC-004). A dynamic import() never settles
+// inside flushPromises (microtask-only) + Suspense, so the lazy panel would be
+// stuck on its fallback spinner under test. Import the real Usage.vue eagerly
+// here and swap it in as a synchronous stub for the async wrapper — this
+// exercises the genuine Usage.vue switcher/fetch logic without the async race.
+import UsageView from '@/views/Usage.vue'
 
 // jsdom has no EventSource; the system store opens one on mount.
 class FakeEventSource {
@@ -71,7 +78,17 @@ function mountDashboard() {
   return shallowMount(Dashboard, {
     global: {
       plugins: [createPinia()],
-      stubs: { RouterLink: { template: '<a><slot /></a>' } },
+      stubs: {
+        RouterLink: { template: '<a><slot /></a>' },
+        // Un-stub the <Suspense> wrapper that shallowMount would otherwise
+        // replace with a stub (which swallows its children), and swap the lazy
+        // async UsageView for the eagerly-imported real Usage.vue so the
+        // switcher's fetch-on-activation + window-re-fetch logic actually runs.
+        // Usage.vue's heavy chart grandchildren (CallHistogram/Bar etc.) stay
+        // shallow-stubbed and never reach jsdom's missing canvas.
+        Suspense: false,
+        UsageView,
+      },
     },
   })
 }