pi-lean-dimension 0.1.0 → 0.2.0

package/node_modules/pi-lean-portal/__tests__/helpers/reddit-fixture.ts

@@ -1,264 +0,0 @@
-/**
- * Reddit-style dialog fixture — shared helper for consent dialog tests.
- *
- * Provides four HTML variants of a Reddit-like feed page with consent
- * dialogs, plus helper functions for extracting @e references and
- * counting dialog elements from accessibility snapshots.
- *
- * Exports
- * -------
- *   REDDIT_DIALOG_HTML   — feed + consent dialog overlay (baseline)
- *   REDDIT_STACKED_HTML  — feed → consent dialog → "Welcome Back" dialog
- *   REDDIT_ASYNC_HTML    — feed loads first, dialog appears via setTimeout
- *   REDDIT_FEED_ONLY_HTML— feed without dialog (baseline)
- *   findRef(snapshot, text) → {ref, role?, name?, line} | null
- *   dialogCount(snapshot) → number
- */
-
-// ─── Helpers ──────────────────────────────────────────────────────
-
-/** Generate N feed article items with deterministic content. */
-function generateFeedPosts(count: number): string {
-	return Array.from(
-		{ length: count },
-		(_, i) =>
-			`  <article>
-    <h2><a href="/post-${i + 1}">Post Title ${i + 1}</a></h2>
-    <span>Author_${i + 1}</span>
-    <span>Score: ${100 - i}</span>
-    <a href="/comments-${i + 1}">${(i % 49) + 1} comments</a>
-  </article>`,
-	).join("\n");
-}
-
-// ─── Dialog HTML fragments ────────────────────────────────────────
-
-const CONSENT_DIALOG_STYLE = `
-    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background: rgba(0,0,0,0.6); z-index: 1000;
-    display: flex; align-items: center; justify-content: center;
-`.trim();
-
-const CONSENT_DIALOG_CSS = `
-    background: white; padding: 2rem; border-radius: 12px;
-    max-width: 440px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.3);
-`.trim();
-
-/**
- * The consent dialog overlay with "Reject All" (nested SVG) and "Accept All".
- * Reddit's actual pattern uses an SVG close icon inside the reject button
- * — this triggers the occlusion false-positive that we want to test.
- */
-function consentOverlayHtml(dismissFn: string, acceptFn: string): string {
-	return `<div role="dialog" aria-label="Data Protection Consent" id="consent-overlay" style="${CONSENT_DIALOG_STYLE}">
-  <div id="consent-dialog" style="${CONSENT_DIALOG_CSS}">
-    <h2>Data Protection Consent</h2>
-    <p>We use cookies and similar technologies to provide our services.</p>
-    <div style="display:flex; gap:8px; justify-content:center; margin-top:16px;">
-      <button onclick="${dismissFn}()"
-        style="padding:8px 16px; cursor:pointer; border:1px solid #ccc; border-radius:4px;">
-        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"
-             style="vertical-align:middle">
-          <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2"/>
-        </svg>
-        <span style="vertical-align:middle">Reject All</span>
-      </button>
-      <button onclick="${acceptFn}()"
-        style="padding:8px 16px; cursor:pointer; background:#0079d3; color:white; border:none; border-radius:4px;">
-        Accept All
-      </button>
-    </div>
-  </div>
-</div>`;
-}
-
-const FEED_SECTION = `<div role="feed" aria-label="Reddit feed">
-${generateFeedPosts(100)}
-</div>`;
-
-const STACKED_JS = `
-function showWelcomeDialog() {
-  var w = document.createElement('div');
-  w.id = 'welcome-overlay';
-  w.setAttribute('role', 'dialog');
-  w.setAttribute('aria-label', 'Welcome Back');
-  w.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; display:flex; align-items:center; justify-content:center;';
-  w.innerHTML = '<div style="background:white; padding:2rem; border-radius:12px; max-width:440px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,0.3);"><h2>Welcome Back</h2><p>Thanks for your consent preferences.</p><button onclick="dismissWelcome()" style="padding:8px 16px; cursor:pointer; border:1px solid #ccc; border-radius:4px;">Dismiss</button></div>';
-  document.body.appendChild(w);
-}
-function dismissConsent() {
-  document.getElementById('consent-overlay').style.display = 'none';
-  showWelcomeDialog();
-  window._dialogDismissed = true;
-}
-function acceptConsent() {
-  document.getElementById('consent-overlay').style.display = 'none';
-  showWelcomeDialog();
-  window._dialogAccepted = true;
-}
-function dismissWelcome() {
-  var el = document.getElementById('welcome-overlay');
-  if (el) el.style.display = 'none';
-  window._welcomeDismissed = true;
-}
-`;
-// ─── Page variants ────────────────────────────────────────────────
-
-/**
- * Baseline: 100 feed posts + a consent dialog overlay.
- *
- * The dialog covers the entire viewport. The "Reject All" button
- * contains a nested `<svg>` to test occlusion false-positive detection.
- */
-export const REDDIT_DIALOG_HTML = `<!DOCTYPE html>
-<html><head><title>Reddit — Consent Dialog</title></head>
-<body>
-<script>
-  function dismissConsent() {
-    document.getElementById('consent-overlay').style.display = 'none';
-    window._dialogDismissed = true;
-  }
-  function acceptConsent() {
-    document.getElementById('consent-overlay').style.display = 'none';
-    window._dialogAccepted = true;
-  }
-</script>
-${FEED_SECTION}
-${consentOverlayHtml("dismissConsent", "acceptConsent")}
-<footer><p>Reddit feed footer</p></footer>
-</body></html>`;
-
-/**
- * Stacked variant: consent dialog → upon dismiss reveals "Welcome Back".
- *
- * Closing dialog A (consent) makes dialog B (welcome) appear.
- * Tests that the router correctly sequences through stacked dialogs.
- */
-export const REDDIT_STACKED_HTML = `<!DOCTYPE html>
-<html><head><title>Reddit — Stacked Dialogs</title></head>
-<body>
-<script>
-${STACKED_JS}
-</script>
-${FEED_SECTION}
-${consentOverlayHtml("dismissConsent", "acceptConsent")}
-<footer><p>Reddit feed footer</p></footer>
-</body></html>`;
-
-/**
- * Async variant: feed loads immediately, dialog appears after 500ms.
- *
- * Tests timing-dependent scenarios where the dialog arrives after the
- * initial snapshot. The agent must handle the delayed dialog appearance.
- */
-export const REDDIT_ASYNC_HTML = `<!DOCTYPE html>
-<html><head><title>Reddit — Async Dialog</title></head>
-<body>
-<script>
-  function dismissConsent() {
-    document.getElementById('consent-overlay').style.display = 'none';
-    window._dialogDismissed = true;
-  }
-  function acceptConsent() {
-    document.getElementById('consent-overlay').style.display = 'none';
-    window._dialogAccepted = true;
-  }
-  setTimeout(function() {
-    var el = document.getElementById('consent-overlay');
-    if (el) el.style.display = 'flex';
-  }, 500);
-</script>
-${FEED_SECTION}
-<div role="dialog" aria-label="Data Protection Consent" id="consent-overlay" style="display:none; ${CONSENT_DIALOG_STYLE}">
-  <div id="consent-dialog" style="${CONSENT_DIALOG_CSS}">
-    <h2>Data Protection Consent</h2>
-    <p>This dialog appeared after the page loaded.</p>
-    <div style="display:flex; gap:8px; justify-content:center; margin-top:16px;">
-      <button onclick="dismissConsent()"
-        style="padding:8px 16px; cursor:pointer; border:1px solid #ccc; border-radius:4px;">
-        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"
-             style="vertical-align:middle">
-          <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2"/>
-        </svg>
-        <span style="vertical-align:middle">Reject All</span>
-      </button>
-      <button onclick="acceptConsent()"
-        style="padding:8px 16px; cursor:pointer; background:#0079d3; color:white; border:none; border-radius:4px;">
-        Accept All
-      </button>
-    </div>
-  </div>
-</div>
-<footer><p>Reddit feed footer</p></footer>
-</body></html>`;
-
-/**
- * Feed-only variant (no dialog at all) — baseline for occlusion testing.
- * Ensures feed links are clickable when no dialog obscures them.
- */
-export const REDDIT_FEED_ONLY_HTML = `<!DOCTYPE html>
-<html><head><title>Reddit — Feed Only</title></head>
-<body>
-${FEED_SECTION}
-<footer><p>Reddit feed footer — no dialog</p></footer>
-</body></html>`;
-
-// ─── Helper functions ─────────────────────────────────────────────
-
-export interface RefInfo {
-	/** The @e reference string, e.g. "@e5" */
-	ref: string;
-	/** Accessibility role of the element, e.g. "button" */
-	role?: string;
-	/** Accessible name of the element, e.g. "Reject All" */
-	name?: string;
-	/** The full snapshot line containing the match */
-	line: string;
-}
-
-/**
- * Find the first @e reference in a snapshot whose line contains `text`.
- *
- * Useful for locating interactive elements by their accessible name
- * (or partial text) in accessibility tree output.
- *
- * @example
- *   const info = findRef(snap.snapshot, "Reject All");
- *   if (info) await plugin.click(taskId, info.ref);
- *
- * @param snapshot  Accessibility tree snapshot string (from NavigateResult or SnapshotResult)
- * @param text      Substring to search for in snapshot lines
- * @returns RefInfo if found, null otherwise
- */
-export function findRef(snapshot: string, text: string): RefInfo | null {
-	const lines = snapshot.split("\n");
-	for (const line of lines) {
-		if (line.includes(text)) {
-			const refMatch = line.match(/@(e\d+)/);
-			if (refMatch) {
-				const roleMatch = line.match(/\[(\w+)\]/);
-				const nameMatch = line.match(/"([^"]+)"/);
-				const info: Partial<RefInfo> & Pick<RefInfo, "ref" | "line"> = {
-					ref: `@${refMatch[1]!}`,
-					line,
-				};
-				if (roleMatch?.[1]) info.role = roleMatch[1];
-				if (nameMatch?.[1]) info.name = nameMatch[1];
-				return info as RefInfo;
-			}
-		}
-	}
-	return null;
-}
-
-/**
- * Count how many dialog elements appear in a snapshot.
- *
- * Matches accessibility tree dialog role markers (`💬 dialog "..."`).
- *
- * @param snapshot  Accessibility tree snapshot string
- * @returns Number of distinct dialog elements found
- */
-export function dialogCount(snapshot: string): number {
-	return (snapshot.match(/dialog\s+"/g) || []).length;
-}

package/node_modules/pi-lean-portal/__tests__/helpers/toggle-test-utils.ts

@@ -1,31 +0,0 @@
-/**
- * Test utilities for browser-toggle.ts.
- *
- * Re-exports internal functions for isolated unit testing without
- * polluting browser-toggle.ts's public API surface.
- *
- * ── Usage ─────────────────────────────────────────────
- *
- *   import browserToggle from "../browser-toggle";
- *   import { getRegisteredBrowserTools, ... } from "./helpers/toggle-test-utils";
- *
- * These are NOT part of the production API — do not import
- * from this file in production code.
- */
-
-export {
-	getRegisteredBrowserTools,
-	isBrowserEnabled,
-	applyBrowserState,
-	persistState,
-	restoreFromBranch,
-	readBrowserToggleConfig,
-	applyConfigDefault,
-	getRegisteredLearnTools,
-	getRegisteredSiblingTools,
-	isLearnEnabled,
-	applyLearnState,
-	_resetToggleStateForTest,
-} from "../../browser-toggle.js";
-
-export type { BrowserToggleState } from "../../browser-toggle.js";

package/node_modules/pi-lean-portal/__tests__/reddit-dialog.test.ts

@@ -1,302 +0,0 @@
-/**
- * Reddit dialog fixture — standalone TypeScript ChromiumPlugin tests.
- *
- * Exercises consent dialog interaction, stacked dialogs, and async dialogs
- * against a local test server serving the
- * shared fixture HTML from reddit-fixture.ts.
- *
- * Includes a ×10 consistency loop that closes the consent dialog
- * ten times in independent sessions.
- *
- * Run: npx vitest run --reporter verbose __tests__/reddit-dialog.test.ts
- */
-
-import { describe, it, expect, beforeAll, afterAll } from "vitest";
-import { ChromiumPlugin } from "../backends/chromium/index.js";
-import { startTestServer } from "./helpers/test-server.js";
-import {
-	REDDIT_DIALOG_HTML,
-	REDDIT_STACKED_HTML,
-	REDDIT_ASYNC_HTML,
-	findRef,
-	dialogCount,
-} from "./helpers/reddit-fixture.js";
-
-// ─── Test Server ──────────────────────────────────────────────────
-
-let serverUrl: string;
-let stopServer: () => Promise<void>;
-
-beforeAll(async () => {
-	const server = await startTestServer((req, res) => {
-		const url = new URL(req.url ?? "/", "http://localhost");
-		const pages: Record<string, string> = {
-			"/reddit-dialog": REDDIT_DIALOG_HTML,
-			"/reddit-stacked": REDDIT_STACKED_HTML,
-			"/reddit-async": REDDIT_ASYNC_HTML,
-			"/slow-nav": `<!DOCTYPE html>
-<html><head><title>Slow Nav Source</title></head>
-<body>
-  <h1>Slow Nav Source</h1>
-  <a href="/slow-nav-destination" onclick="event.preventDefault(); setTimeout(() => location.href='/slow-nav-destination', 280)">Go to Destination</a>
-</body></html>`,
-			"/slow-nav-destination": `<!DOCTYPE html>
-<html><head><title>Slow Nav Destination</title></head>
-<body>
-  <h1>Slow Nav Destination</h1>
-</body></html>`,
-		};
-		const html = pages[url.pathname];
-		if (html) {
-			res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-			res.end(html);
-		} else {
-			res.writeHead(404, { "Content-Type": "text/html; charset=utf-8" });
-			res.end("404");
-		}
-	});
-	serverUrl = server.url;
-	stopServer = server.stop;
-});
-
-afterAll(async () => {
-	await stopServer();
-});
-
-// ─── ChromiumPlugin Setup ───────────────────────────────────────
-
-async function createPlugin(): Promise<ChromiumPlugin> {
-	const p = new ChromiumPlugin();
-	await p.init({});
-	return p;
-}
-
-const NAV_TIMEOUT = 30_000;
-
-// ═══════════════════════════════════════════════════════════════
-// First Pass — individual behavioral tests
-// ═══════════════════════════════════════════════════════════════
-
-describe("Reddit dialog — first pass", () => {
-	const TASK_ID = "reddit-first-pass";
-	let plugin: ChromiumPlugin;
-
-	beforeAll(async () => {
-		plugin = await createPlugin();
-	});
-
-	afterAll(async () => {
-		await plugin.cleanupAll().catch(() => {});
-	});
-
-	it("navigates and snapshot includes consent dialog", async () => {
-		const nav = await plugin.navigate(
-			`${serverUrl}/reddit-dialog`,
-			TASK_ID,
-			NAV_TIMEOUT,
-		);
-		expect(nav.success).toBe(true);
-		expect(nav.title).toContain("Reddit");
-		expect(nav.snapshot).toContain("Consent");
-
-		const snap = await plugin.snapshot(TASK_ID);
-		expect(snap.success).toBe(true);
-		expect(dialogCount(snap.snapshot)).toBeGreaterThanOrEqual(1);
-	});
-
-	it("reject all (nested SVG button) closes the dialog", async () => {
-		await plugin.navigate(`${serverUrl}/reddit-dialog`, TASK_ID, NAV_TIMEOUT);
-		const snap = await plugin.snapshot(TASK_ID);
-		expect(snap.success).toBe(true);
-
-		const info = findRef(snap.snapshot, "Reject All");
-		if (!info) return; // element beyond cap
-
-		const result = await plugin.click(TASK_ID, info.ref);
-		expect(result.success).toBe(true);
-
-		const after = await plugin.snapshot(TASK_ID);
-		expect(dialogCount(after.snapshot)).toBe(0);
-	});
-
-	it("accept all (plain button) closes the dialog", async () => {
-		await plugin.navigate(`${serverUrl}/reddit-dialog`, TASK_ID, NAV_TIMEOUT);
-		const snap = await plugin.snapshot(TASK_ID);
-		expect(snap.success).toBe(true);
-
-		const info = findRef(snap.snapshot, "Accept All");
-		if (!info) return;
-
-		const result = await plugin.click(TASK_ID, info.ref);
-		expect(result.success).toBe(true);
-
-		const after = await plugin.snapshot(TASK_ID);
-		expect(dialogCount(after.snapshot)).toBe(0);
-	});
-
-	it("stacked dialogs — consent then welcome — both dismissible", async () => {
-		const S_TASK = "reddit-stacked";
-		await plugin.navigate(`${serverUrl}/reddit-stacked`, S_TASK, NAV_TIMEOUT);
-
-		// Dialog A: consent
-		const snap1 = await plugin.snapshot(S_TASK);
-		expect(snap1.success).toBe(true);
-		expect(snap1.snapshot).toContain("Consent");
-
-		const rejectInfo = findRef(snap1.snapshot, "Reject All");
-		if (!rejectInfo) {
-			await plugin.cleanup(S_TASK);
-			return;
-		}
-		const r1 = await plugin.click(S_TASK, rejectInfo.ref);
-		expect(r1.success).toBe(true);
-
-		// Dialog B: welcome back
-		const snap2 = await plugin.snapshot(S_TASK);
-		expect(snap2.success).toBe(true);
-		expect(snap2.snapshot).toContain("Welcome");
-
-		const dismissInfo = findRef(snap2.snapshot, "Dismiss");
-		if (!dismissInfo) {
-			await plugin.cleanup(S_TASK);
-			return;
-		}
-		const r2 = await plugin.click(S_TASK, dismissInfo.ref);
-		expect(r2.success).toBe(true);
-
-		// No dialogs remain
-		const snap3 = await plugin.snapshot(S_TASK);
-		expect(dialogCount(snap3.snapshot)).toBe(0);
-
-		await plugin.cleanup(S_TASK);
-	});
-
-	it("async dialog arrives after timeout and is dismissible", async () => {
-		const A_TASK = "reddit-async";
-		await plugin.navigate(`${serverUrl}/reddit-async`, A_TASK, NAV_TIMEOUT);
-
-		// Wait for async dialog (setTimeout 500ms in fixture)
-		await new Promise((r) => setTimeout(r, 1000));
-
-		const snap = await plugin.snapshot(A_TASK);
-		expect(snap.success).toBe(true);
-		expect(snap.snapshot).toContain("Consent");
-
-		const info = findRef(snap.snapshot, "Reject All");
-		if (!info) {
-			await plugin.cleanup(A_TASK);
-			return;
-		}
-		const result = await plugin.click(A_TASK, info.ref);
-		expect(result.success).toBe(true);
-
-		await plugin.cleanup(A_TASK);
-	});
-});
-
-// ═══════════════════════════════════════════════════════════════
-// ×10 Consistency — close the dialog 10 times in isolation
-// ═══════════════════════════════════════════════════════════════
-
-describe("Reddit dialog — consistency × 10", () => {
-	let plugin: ChromiumPlugin;
-
-	/** Shared no-op error handler to avoid arrow-function-in-loop allocations. */
-	const noop = () => {};
-
-	beforeAll(async () => {
-		plugin = await createPlugin();
-	});
-
-	afterAll(async () => {
-		await plugin.cleanupAll().catch(() => {});
-	});
-
-	it("closes the consent dialog 10 times in independent sessions", async () => {
-		const failures: string[] = [];
-
-		for (let i = 0; i < 10; i++) {
-			const taskId = `consistency-${i}`;
-			try {
-				const nav = await plugin.navigate(
-					`${serverUrl}/reddit-dialog`,
-					taskId,
-					NAV_TIMEOUT,
-				);
-				expect(nav.success).toBe(true);
-				expect(nav.snapshot).toContain("Consent");
-
-				const snap = await plugin.snapshot(taskId);
-				expect(snap.success).toBe(true);
-
-				const info = findRef(snap.snapshot, "Reject All");
-				if (!info) {
-					// Element may be beyond cap on some runs; accept it
-					await plugin.cleanup(taskId).catch(noop);
-					continue;
-				}
-
-				const clickResult = await plugin.click(taskId, info.ref);
-				expect(clickResult.success).toBe(true);
-
-				const after = await plugin.snapshot(taskId);
-				expect(dialogCount(after.snapshot)).toBe(0);
-
-				await plugin.cleanup(taskId).catch(noop);
-			} catch (err) {
-				failures.push(
-					`Iteration ${i}: ${err instanceof Error ? err.message : String(err)}`,
-				);
-				await plugin.cleanup(taskId).catch(noop);
-			}
-		}
-
-		expect(failures).toHaveLength(0);
-	}, 120_000);
-});
-
-// ═══════════════════════════════════════════════════════════════
-// Navigation settle integration — real browser end-to-end
-// ═══════════════════════════════════════════════════════════════
-
-describe("Navigation settle — click with delayed nav", () => {
-	const TASK_ID = "nav-settle-integration";
-	let plugin: ChromiumPlugin;
-
-	beforeAll(async () => {
-		plugin = await createPlugin();
-	});
-
-	afterAll(async () => {
-		await plugin.cleanupAll().catch(() => {});
-	});
-
-	it("clicks a link with 280ms delayed navigation and returns consistent URL/snapshot", async () => {
-		const nav = await plugin.navigate(
-			`${serverUrl}/slow-nav`,
-			TASK_ID,
-			NAV_TIMEOUT,
-		);
-		expect(nav.success).toBe(true);
-
-		const snap = await plugin.snapshot(TASK_ID);
-		expect(snap.success).toBe(true);
-
-		// Find the "Go to Destination" link ref
-		const linkMatch = snap.snapshot.match(/@(e\d+).*?link.*?Destination/);
-		expect(linkMatch).toBeTruthy();
-		const ref = `@${linkMatch![1]!}`;
-
-		const result = await plugin.click(TASK_ID, ref);
-		expect(result.success).toBe(true);
-
-		// The navigation completes after 280ms; the settle helper must
-		// detect the late-arriving nav and wait for page readiness.
-		// URL and snapshot must be consistent — the entire point of the fix.
-		expect(result.newUrl).toContain("/slow-nav-destination");
-		expect(result.newTitle).toBe("Slow Nav Destination");
-		if (result.snapshot) {
-			expect(result.snapshot).toContain("Slow Nav Destination");
-		}
-	});
-});