fix(e2e): navigate the router, not the URL fragment (#596)

The path-routing migration (e225828) left the workflow suite navigating by
`location.hash`. Under `createWebHistory` that still changes the URL and still
fires `hashchange`, but the router does not listen to it, so the route never
changed and nothing threw. Every caller failed much later on a missing
`.secret-list-item`, which read as a broken vault rather than a navigation that
did nothing at all.

`gotoVaultRoute` now pushes through the router instance, with a pushState +
popstate fallback that drives `createWebHistory`'s own listener. Both keep the
navigation in place, which the vault requires: the CryptoKey lives only in
memory, so any reload drops it and the guard bounces to the lock gate.

`openVault` delegates to the same helper instead of carrying a second, also
hash-shaped copy of the logic, and the two specs that set `location.hash`
inline now call the helper.

Author: rubenvdlinde

tests/e2e/workflows/_workflow-helpers.ts

@@ -165,32 +165,14 @@ export async function unlockVault(
 }
 
 /**
- * Open the vault list WITHIN the unlocked SPA by clicking the "Vault" nav link
- * (a vue-router-link). A full `page.goto` reload would wipe the in-memory
- * CryptoKey and bounce to the lock screen; a router-link click navigates the
- * SPA in place and keeps the session unlocked. The click is dispatched natively
- * because the themed nav entry can swallow Playwright's synthetic click.
+ * Open the vault list WITHIN the unlocked SPA. A full `page.goto` reload would
+ * wipe the in-memory CryptoKey and bounce to the lock screen, so this navigates
+ * the router in place and the session stays unlocked.
  *
  * @param page The Playwright page (must already be unlocked).
  */
 export async function openVault(page: Page): Promise<void> {
-	// The router runs in hash mode (createWebHashHistory / mode:'hash'), so the
-	// in-app Vault route is `#/secrets`. Click the manifest nav entry whose href
-	// is the hash route; fall back to an in-place `location.hash` navigation
-	// (which does NOT reload the page, so the in-memory CryptoKey survives and
-	// the vault stays unlocked, unlike a full `page.goto`).
-	await page.evaluate(() => {
-		const a = Array.from(document.querySelectorAll('a')).find((x) =>
-			/(#\/secrets$)|(\/apps\/keepiq\/?#\/secrets$)/.test(
-				x.getAttribute('href') || '',
-			),
-		)
-		if (a) {
-			;(a as HTMLElement).click()
-		} else if (!/#\/secrets$/.test(window.location.hash)) {
-			window.location.hash = '#/secrets'
-		}
-	})
+	await gotoVaultRoute(page, 'secrets')
 	await expect(page.locator('.secret-list-view')).toBeVisible({ timeout: 20_000 })
 }
 
@@ -240,22 +222,55 @@ export async function clickOverflowAction(
 /**
  * Navigate to an in-app route WITHIN the already-unlocked SPA, in place.
  *
- * The router runs in hash mode, so routes are `#/<route>`. A full `page.goto`
- * to a path-form URL (e.g. `/apps/keepiq/secrets`) reloads the page, which
- * wipes the in-memory CryptoKey and bounces back to the lock gate. Setting
- * `location.hash` navigates the SPA in place and keeps the vault unlocked.
+ * ⚠️ This MUST NOT reload the page. The vault's CryptoKey lives only in memory,
+ * so a `page.goto` to any in-app route drops it and the router guard bounces
+ * straight back to the lock gate.
+ *
+ * The router moved from hash mode to `createWebHistory` (clean path URLs), and
+ * that is why this helper is written against the router instance rather than
+ * the URL. Under hash mode, `location.hash = '#/secrets'` both changed the URL
+ * and drove the route. Under path mode the same line still "works" — it appends
+ * a fragment and fires `hashchange` — but `createWebHistory` does not listen to
+ * `hashchange`, so the route never changes and NOTHING throws. Every caller
+ * then failed much later, on a missing `.secret-list-item`, which reads as a
+ * broken vault rather than a navigation that silently did nothing.
+ *
+ * `$router.push` is an in-place SPA navigation, so the key survives. The
+ * pushState fallback exists only for the case where the app handle is not
+ * exposed; it drives `createWebHistory`'s own `popstate` listener.
  *
  * @param page  The Playwright page (must already be unlocked).
- * @param route The in-app route WITHOUT the leading hash, e.g. 'secrets',
+ * @param route The in-app route WITHOUT a leading slash, e.g. 'secrets',
  *              'password-health', or '' for the dashboard root.
  */
 export async function gotoVaultRoute(page: Page, route: string): Promise<void> {
-	const hash = `#/${route}`.replace(/\/$/, route === '' ? '/' : '')
-	await page.evaluate((h) => {
-		window.location.hash = h
-	}, hash)
-	// Let the hashchange-driven router transition settle. Polling surfaces never
-	// reach networkidle, so wait on the DOM instead.
+	const path = `/${route}`.replace(/\/+$/, '') || '/'
+	await page.evaluate((p) => {
+		const host = document.querySelector('#keepiq-app') as
+			| (HTMLElement & {
+					__vue_app__?: {
+						config?: {
+							globalProperties?: {
+								$router?: { push: (to: string) => unknown }
+							}
+						}
+					}
+			  })
+			| null
+		const router = host?.__vue_app__?.config?.globalProperties?.$router
+		if (router) {
+			router.push(p)
+			return
+		}
+		// No app handle: drive createWebHistory's popstate listener directly.
+		// The base is derived exactly as `routerBase()` in src/main.js does, so
+		// both the `/apps/` and `/index.php/apps/` URL forms resolve.
+		const base =
+			window.location.pathname.match(/^(.*\/apps\/keepiq)(?:\/|$)/)?.[1] ?? ''
+		window.history.pushState({}, '', `${base}${p}`)
+		window.dispatchEvent(new PopStateEvent('popstate', { state: {} }))
+	}, path)
+	// Polling surfaces never reach networkidle, so wait on the DOM instead.
 	await page.waitForLoadState('domcontentloaded')
 	await page.waitForTimeout(500)
 }

tests/e2e/workflows/compromise-recovery.spec.ts

@@ -46,7 +46,7 @@ import type { Page } from '@playwright/test'
  * @e2e openspec/specs/encryption-suites/spec.md#requirement-suite-migration
  */
 import { expect, test } from '@playwright/test'
-import { APP_BASE } from './_workflow-helpers.ts'
+import { APP_BASE, gotoVaultRoute } from './_workflow-helpers.ts'
 
 /** A fixture account that owns no EncryptionSuite, so setup mode is reachable. */
 const VAULT_USER = process.env.KEEPIQ_VAULT_USER ?? 'alice'
@@ -396,9 +396,7 @@ test.describe('Workflow: compromise recovery — encryption-suites/spec.md', ()
 			timeout: 15_000,
 		})
 
-		await page.evaluate(() => {
-			window.location.hash = '#/secrets'
-		})
+		await gotoVaultRoute(page, 'secrets')
 		await page.waitForTimeout(2500)
 
 		const warned = page.locator('[data-testid="secret-possibly-compromised"]')

tests/e2e/workflows/folder-sharing.spec.ts

@@ -43,6 +43,7 @@ import { expect, test } from '@playwright/test'
 import {
 	clickOverflowAction,
 	gotoLockSettled,
+	gotoVaultRoute,
 	openVault,
 	unlockVault,
 } from './_workflow-helpers.ts'
@@ -334,10 +335,7 @@ test.describe('Workflow: folders + sharing — folders/spec.md', () => {
 		// write; this is the read, and they are not the same claim — the list
 		// could filter on something else entirely and the row would vanish.
 		// Navigate in place (a reload would drop the in-memory key).
-		await page.evaluate((id) => {
-			window.location.hash = `#/folders/${id}`
-		}, folder.id)
-		await page.waitForLoadState('domcontentloaded')
+		await gotoVaultRoute(page, `folders/${folder.id}`)
 		await expect(
 			page.locator('.secret-list-item', { hasText: secretName }),
 			`"${secretName}" is not listed under the folder it was moved into`,

tests/e2e/workflows/page-surfaces.spec.ts

@@ -46,12 +46,12 @@ import type { Page } from '@playwright/test'
  *
  * ROUTING NOTE
  * ------------
- * The router is in hash mode and the vault's private key lives only in memory,
- * so a full `page.goto()` to an in-app route reloads the SPA, discards the
- * CryptoKey and lands on the lock gate. Authenticated pages are reached with
- * `gotoVaultRoute()` (an in-place `location.hash` change) after one
- * `unlockVault()`. The three public recipient routes are exempt from the lock
- * guard (`PUBLIC_ROUTE_NAMES` in `src/App.vue`) and are reached with `goto`.
+ * The vault's private key lives only in memory, so a full `page.goto()` to an
+ * in-app route reloads the SPA, discards the CryptoKey and lands on the lock
+ * gate. Authenticated pages are reached with `gotoVaultRoute()` (an in-place
+ * router navigation) after one `unlockVault()`. The three public recipient
+ * routes are exempt from the lock guard (`PUBLIC_ROUTE_NAMES` in `src/App.vue`)
+ * and are reached with `goto`.
  */
 import { expect, test } from '@playwright/test'
 import { APP_BASE, gotoVaultRoute, unlockVault } from './_workflow-helpers.ts'