[CHAIN] test(ui): add Vitest Browser test coverage for Attack Paths

[pfe-nazaries]

🔗 Part of Chained PRs

Field	Value
Feature Branch	PROWLER-1273/react-flow-migration
Main PR	#10686
Sub-task	PROWLER-1405
Chain Position	5 of 5
Depends on	#10800 (PR3 — Export + Minimap) — 🟢 Merged

Chain Overview

         ┌──────────────────────────┐
         │ PR0: Normalize data      │ ← #10701 🟢
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR1: React Flow core     │ ← #10705 🟢
         │   rendering              │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR2: Interactions        │ ← #10756 🟢
         │   🎯 MVP                 │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR3: Export + Minimap    │ ← #10800 🟢
         │   ✅ Phase 1 complete    │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ 📍 PR4: Test coverage    │ ← THIS PR
         │   🛡️ Hardening complete  │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ #10686 Main PR           │
         │   → master               │
         └──────────────────────────┘

---

Context

Part of chained PRs for the React Flow migration. This is the Hardening complete milestone — it adds the Vitest Browser-mode test infrastructure and a page-level suite for <AttackPathsPage /> so the migrated graph is covered end-to-end with real DOM, real React Flow, and real Dagre layout.

jsdom cannot drive React Flow (no measurable DOM, no Canvas API for export). Vitest Browser with the Playwright provider runs the page in a real Chromium tab while keeping the unit-test ergonomics: vitest run, --related, watch mode, project filters, and CI integration.

---

Description

Changes:

Test infrastructure

• New pnpm test:browser script and a browser Vitest project running in Playwright/Chromium via @vitest/browser-playwright
• vitest.browser.setup.ts configures MSW + ResizeObserver/matchMedia polyfills used by React Flow inside the browser bundle
• __tests__/msw/{worker,handlers} provides the MSW service worker for in-browser network mocking; mockServiceWorker.js is published to public/
• __tests__/render-browser.tsx wraps vitest-browser-react with a TestProviders shell so future global providers slot in without touching call sites

Attack Paths coverage

• attack-paths-page.browser.test.tsx — 23 tests grouped by user-perceived flow (loading the page, running a query, exploring the graph, exporting the graph, running a different query)
• attack-paths-page.harness.ts — single-file harness exposing the page through semantic queries (graph.findingNodes, graph.executeQuery(), graph.clickFirstFindingNode(), …); tests never reach into the DOM directly
• attack-paths-page.fixtures.ts — typed fixtures for typical, single-node, empty-graph, large (200-node), disconnected, findings-only, resources-only, edge-cases and empty-scans scenarios; each fixture wires its own MSW handlers

Source changes pulled in to make tests deterministic

• Tier 1 expansion state lifted from local component state into the Zustand graph store, so it survives the data swap that happens when entering/exiting filtered view (and is reset on fresh data loads)
• useGraphStore exported and reset in beforeEach, replacing the original fixture's manual unmount tracking — the regression that used to remount mid-test now exercises setGraphData's reset path by re-running the query, which is what production actually does

CI

• .github/workflows/ui-tests.yml runs pnpm test:browser on PRs touching ui/, with Playwright's Chromium cached via the standard action

---

Steps to review

1. cd ui && pnpm install && pnpm test:browser — 24 tests should pass in roughly under a minute
2. Read attack-paths-page.harness.ts first — every test is intentionally a thin call-site over the harness, so the harness defines the contract
3. Skim attack-paths-page.fixtures.ts to see the data shapes covered (typical, single-node, large, disconnected, edge-cases, …)
4. Open attack-paths-page.browser.test.tsx — verify each describe block matches a spec section in the migration RFC
5. Confirm useGraphStore reset in beforeEach cleanly isolates tests (no need to remount inside a test)
6. Check vitest.config.ts and vitest.browser.setup.ts for the project split (unit vs browser) and that the unit project still excludes browser tests

---

Checklist

Community Checklist

• This feature/issue is listed in here or roadmap.prowler.com
• Is it assigned to me, if not, request it via the issue/feature in here or Prowler Community Slack

• Review if the code is being covered by tests.
• Review if code is being documented following this specification https://github.com/google/styleguide/blob/gh-pages/pyguide.md#38-comments-and-docstrings
• Review if backport is needed.
• Review if is needed to change the Readme.md
• Ensure new entries are added to CHANGELOG.md, if applicable.

UI

• All issue/task requirements work as expected on the UI
• Screenshots/Video of the functionality flow (if applicable) - Mobile (X < 640px)
• Screenshots/Video of the functionality flow (if applicable) - Table (640px > X < 1024px)
• Screenshots/Video of the functionality flow (if applicable) - Desktop (X > 1024px)
• Ensure new entries are added to CHANGELOG.md, if applicable.

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[Alan-TheGentleman]

The export happy-path test deferred from #10800 was not added. The harness exposes exportAsPNG() (attack-paths-page.harness.ts:352) and graph-controls.test.tsx covers the button callback at the component level, but no test invokes the harness method or mocks domToPng(). The only case under describe("graph-export", ...) is "export button is enabled and clickable when a graph is rendered" (L253-263), which just asserts the button is present and not disabled.

Please add a browser-mode test that drives harness.exportAsPNG() against a mocked domToPng() and verifies the bounds passed to getViewportForBounds() match the rendered graph, so the helper does not silently regress.

[Alan-TheGentleman]

Confirmed in 8710412a. The new "clicking export downloads a PNG sized to the configured export canvas" test (L324-371) drives harness.exportAsPNG() end-to-end, intercepts the download anchor, and decodes the PNG IHDR chunk to assert width=1920 height=1080. Stronger than the mocked path I asked for: it covers the viewport element passed to domToPng, the configured export size, and the bounds-driven viewport transform in one shot. Approving.