fix(tests): resolve all frontend test failures in CI (v0.5.0-alpha.5)

dashboardStore.test.ts:
- Change filters/sort assertions from toBeNull() to toBeUndefined()
- Fixes lines 20 and 69 to match updated type definitions
- Aligns with previous TypeScript strict null checks fix
- 2 failures → 0 failures

pages.test.tsx:
- Fix MemoryRouter import from "react-router-dom" (not "react-router")
- Add comprehensive Tauri invoke mocks for async operations:
  * get_findings (returns empty array)
  * get_dashboard_stats (returns full DashboardStats structure)
  * list_campaigns (returns empty array)
- Add waitFor() for Dashboard async data loading (3s timeout)
- Fix Dashboard stat card title assertions (Total Hosts, not Hosts Scanned)
- Add waitFor() for Reports async rendering (3s timeout)
- Resolves useNavigate router context error
- Resolves async data loading race conditions
- 6 failures → 0 failures

All frontend tests now passing: 121/121 (100%)
All platforms: Ubuntu, macOS, Windows ✓

Test Results:
- dashboardStore.test.ts: 5/5 passing
- pages.test.tsx: 19/19 passing
- Total: 20 test files, 121 tests, 0 failures

Root Causes Fixed:
1. Type mismatch: null vs undefined after strict checks
2. Missing router context for useNavigate hook
3. Missing Tauri API mocks for async invoke calls
4. Synchronous assertions on async data loading
5. Incorrect component text expectations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: doublegate

crates/spectre-gui/frontend/src/pages/pages.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { MemoryRouter } from "react-router";
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
 import { Dashboard } from "./Dashboard";
 import { Targets } from "./Targets";
 import { Recon } from "./Recon";
@@ -26,6 +26,29 @@ vi.mock("@tauri-apps/api/core", () => ({
         config_loaded: true,
       });
     }
+    if (cmd === "get_findings") {
+      return Promise.resolve([]);
+    }
+    if (cmd === "get_dashboard_stats") {
+      return Promise.resolve({
+        total_hosts: 42,
+        total_ports: 256,
+        open_ports: 128,
+        services_found: 64,
+        severity_counts: {
+          critical: 2,
+          high: 5,
+          medium: 7,
+          low: 2,
+          info: 0,
+        },
+        top_services: [],
+        recent_activity: [],
+      });
+    }
+    if (cmd === "list_campaigns") {
+      return Promise.resolve([]);
+    }
     return Promise.reject("Unknown command");
   }),
 }));
@@ -39,18 +62,22 @@ function renderWithRouter(component: React.ReactElement) {
 }
 
 describe("Dashboard", () => {
-  it("renders stat cards", () => {
+  it("renders stat cards", async () => {
     renderWithRouter(<Dashboard />);
-    expect(screen.getByText("Hosts Scanned")).toBeInTheDocument();
-    expect(screen.getByText("Open Ports")).toBeInTheDocument();
-    expect(screen.getByText("Services")).toBeInTheDocument();
-    expect(screen.getByText("Findings")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Total Hosts")).toBeInTheDocument();
+      expect(screen.getByText("Open Ports")).toBeInTheDocument();
+      expect(screen.getByText("Services")).toBeInTheDocument();
+      expect(screen.getByText("Findings")).toBeInTheDocument();
+    }, { timeout: 3000 });
   });
 
-  it("renders stat cards", () => {
+  it("renders dashboard layout", async () => {
     renderWithRouter(<Dashboard />);
-    // New implementation uses stat cards
-    // We can just verify the dashboard renders without errors
+    // Wait for data to load before checking layout
+    await waitFor(() => {
+      expect(screen.queryByText("No data available")).not.toBeInTheDocument();
+    }, { timeout: 3000 });
     const dashboard = document.querySelector('.space-y-6');
     expect(dashboard).toBeTruthy();
   });
@@ -135,16 +162,19 @@ describe("Campaigns", () => {
 });
 
 describe("Reports", () => {
-  it("renders reports heading", () => {
+  it("renders reports heading", async () => {
     renderWithRouter(<Reports />);
-    expect(screen.getByText("Reports & Findings")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Reports & Findings")).toBeInTheDocument();
+    }, { timeout: 3000 });
   });
 
-  it("renders empty state when no findings", () => {
+  it("renders empty state when no findings", async () => {
     renderWithRouter(<Reports />);
     // New implementation shows a loading state first, then empty state
-    // We can just verify the page renders without errors
-    expect(screen.getByText("Reports & Findings")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Reports & Findings")).toBeInTheDocument();
+    }, { timeout: 3000 });
   });
 });
 

crates/spectre-gui/frontend/src/stores/dashboardStore.test.ts

@@ -17,8 +17,8 @@ describe("dashboardStore", () => {
     expect(state.findings).toEqual([]);
     expect(state.findingsTotal).toBe(0);
     expect(state.findingsPagination).toEqual({ page: 1, per_page: 25 });
-    expect(state.filters).toBeNull();
-    expect(state.sort).toBeNull();
+    expect(state.filters).toBeUndefined();
+    expect(state.sort).toBeUndefined();
   });
 
   it("should set filters", () => {
@@ -66,7 +66,7 @@ describe("dashboardStore", () => {
     useDashboardStore.getState().reset();
 
     const state = useDashboardStore.getState();
-    expect(state.filters).toBeNull();
+    expect(state.filters).toBeUndefined();
     expect(state.stats).toBeNull();
     expect(state.findings).toEqual([]);
     expect(state.findingsPagination).toEqual({ page: 1, per_page: 25 });