"""Adversarial Stress Test Suite for Milestone 2 (Site Diary Dock, Zero Occlusion & Mobile Resize Guard). Empirical Challenger 2 Test Harness targeting: 1. 50x expansion and collapse toggle stress test: - Validates dock height toggles between 195px (expanded) and 32px (collapsed). - Validates layout stability without layout flickering (CLS, width thrashing, scrollbar shift). - Validates rapid click burst resilience (race condition resistance). 2. Zero Occlusion verification: - Bounding client rects of #siteDiaryDock, #player4DDock, and .sidebar. - Asserts dockRect.right <= sidebarRect.left at all times across diverse viewports. - Asserts zero pixel overlap between dock and sidebar. 3. Mobile viewport resize down to 375x667 (and extreme 320x568): - Verifies camera.aspect does NOT produce NaN or Infinity (verifying Challenger 1's safeguard patch). - Verifies Three.js projectionMatrix elements are all finite and non-NaN. - Verifies WebGL render loop stability on mobile screen sizes. 4. Check 5 & Check 6 Playwright test integration and console error audit (0 errors, 0 exceptions). """ import math import os import sys import time from pathlib import Path from typing import Any, Dict, List, Tuple import pytest from playwright.sync_api import Browser, BrowserContext, Page, sync_playwright if hasattr(sys.stdout, "reconfigure"): sys.stdout.reconfigure(encoding="utf-8") if hasattr(sys.stderr, "reconfigure"): sys.stderr.reconfigure(encoding="utf-8") BASE_URL = os.environ.get("TEST_BASE_URL", "http://127.0.0.1:8000") BIM_URL = f"{BASE_URL}/static/bim/index.html" REPORT_DIR = Path("reports/stress_m2") REPORT_DIR.mkdir(parents=True, exist_ok=True) # Tolerances for sub-pixel CSS layouts HEIGHT_EXPANDED_TARGET = 195.0 HEIGHT_COLLAPSED_TARGET = 32.0 PX_TOLERANCE = 1.0 def ensure_page_ready(page: Page, timeout_ms: int = 20000) -> None: """Ensures page is loaded and WebGL canvas is mounted.""" canvas = page.query_selector("#webgl-container canvas") if not canvas or "index.html" not in page.url: page.goto(BIM_URL, wait_until="load", timeout=timeout_ms) page.wait_for_selector("#webgl-container canvas", state="visible", timeout=timeout_ms) page.wait_for_timeout(1000) @pytest.fixture(scope="module") def browser_context(): """Launches Playwright headless Chromium with WebGL enabled.""" with sync_playwright() as p: args = [ "--disable-background-timer-throttling", "--disable-backgrounding-occluded-windows", "--disable-renderer-backgrounding", "--ignore-gpu-blocklist", "--enable-webgl", "--enable-gpu-rasterization", ] browser = None for channel in ["chrome", None]: try: launch_kwargs: Dict[str, Any] = {"headless": True, "args": args} if channel: launch_kwargs["channel"] = channel browser = p.chromium.launch(**launch_kwargs) break except Exception: continue if not browser: browser = p.chromium.launch(headless=True, args=args) context = browser.new_context( viewport={"width": 1440, "height": 900}, user_agent=( "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 " "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 DSCons4DBimChallenger2" ), ) page = context.new_page() console_logs: List[Dict[str, str]] = [] page_errors: List[str] = [] def handle_console(msg): console_logs.append({"type": msg.type, "text": msg.text, "location": str(msg.location)}) def handle_page_error(err): page_errors.append(str(err)) page.on("console", handle_console) page.on("pageerror", handle_page_error) page.goto(BIM_URL, wait_until="load", timeout=25000) page.wait_for_selector("#webgl-container canvas", state="visible", timeout=15000) page.wait_for_timeout(1200) yield { "browser": browser, "context": context, "page": page, "console_logs": console_logs, "page_errors": page_errors, } browser.close() # ============================================================================== # CHALLENGE 1: 50x Dock Expansion & Collapse Toggle Stress Test # ============================================================================== def test_adversarial_dock_50x_toggle_expansion_collapse(browser_context): """Stress Test 1: Toggles dock expansion and collapse 50 times. Verifies: - Expanded height settles at 195px (+/- 1.0px). - Collapsed height settles at 32px (+/- 1.0px). - No layout flickering: dock.width, dock.left, and sidebar.left remain rock-solid. - Zero unexpected scrollbars or CLS during toggles. """ page: Page = browser_context["page"] ensure_page_ready(page) print("\n[CHALLENGE 1] Executing 50x Dock Expansion/Collapse Toggle Stress Test...", flush=True) # Verify initial expanded height initial_info = page.evaluate(""" () => { const dock = document.getElementById('siteDiaryDock'); const sidebar = document.querySelector('.sidebar'); const rDock = dock.getBoundingClientRect(); const rSide = sidebar.getBoundingClientRect(); return { height: rDock.height, width: rDock.width, left: rDock.left, right: rDock.right, sidebarLeft: rSide.left, isCollapsed: dock.classList.contains('collapsed') }; } """) print(f" -> Initial dock metrics: {initial_info}", flush=True) assert abs(initial_info["height"] - HEIGHT_EXPANDED_TARGET) <= PX_TOLERANCE, ( f"Initial dock height should be ~{HEIGHT_EXPANDED_TARGET}px, got {initial_info['height']}px" ) assert not initial_info["isCollapsed"], "Dock should start in expanded state." # Perform 50 sequential toggles and record metrics at every step toggle_records = [] initial_width = initial_info["width"] initial_left = initial_info["left"] for i in range(1, 51): # Click toggle button page.evaluate(""" () => { const btn = document.getElementById('btnToggleDock') || document.getElementById('btnCollapseDock'); if (btn) btn.click(); else if (typeof window.toggleDockCollapse === 'function') window.toggleDockCollapse(); } """) # Wait for CSS transition (0.25s) + safety margin page.wait_for_timeout(270) step_metrics = page.evaluate(""" () => { const dock = document.getElementById('siteDiaryDock'); const sidebar = document.querySelector('.sidebar'); const rDock = dock.getBoundingClientRect(); const rSide = sidebar.getBoundingClientRect(); return { height: rDock.height, width: rDock.width, left: rDock.left, right: rDock.right, sidebarLeft: rSide.left, isCollapsed: dock.classList.contains('collapsed'), scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth }; } """) expected_collapsed = (i % 2 == 1) # Odd = collapsed, Even = expanded expected_height = HEIGHT_COLLAPSED_TARGET if expected_collapsed else HEIGHT_EXPANDED_TARGET # Verify height height_diff = abs(step_metrics["height"] - expected_height) assert height_diff <= PX_TOLERANCE, ( f"Toggle #{i}: Expected height {expected_height}px, got {step_metrics['height']}px (diff {height_diff}px)" ) # Verify collapsed class state assert step_metrics["isCollapsed"] == expected_collapsed, ( f"Toggle #{i}: Expected collapsed={expected_collapsed}, got {step_metrics['isCollapsed']}" ) # Verify layout stability (NO FLICKERING) # Dock left must remain 0 assert step_metrics["left"] == initial_left, ( f"Toggle #{i}: Dock left flickered from {initial_left} to {step_metrics['left']}" ) # Dock width must not jitter assert abs(step_metrics["width"] - initial_width) <= PX_TOLERANCE, ( f"Toggle #{i}: Dock width flickered from {initial_width} to {step_metrics['width']}" ) # Zero horizontal scroll thrashing assert step_metrics["scrollWidth"] <= step_metrics["clientWidth"] + 1, ( f"Toggle #{i}: Layout caused horizontal overflow ({step_metrics['scrollWidth']} > {step_metrics['clientWidth']})" ) toggle_records.append(step_metrics) if i in [1, 10, 25, 49, 50]: print(f" -> Toggle #{i:02d}: Height={step_metrics['height']:.1f}px (collapsed={step_metrics['isCollapsed']}), Width={step_metrics['width']:.1f}px", flush=True) print(f" -> Successfully verified all 50 sequential toggles (25 collapsed, 25 expanded).", flush=True) # Rapid click burst stress test (50 clicks in rapid succession without waiting) print(" -> Testing rapid click burst (50 clicks within 500ms, stress testing race conditions)...", flush=True) page.evaluate(""" () => { const btn = document.getElementById('btnToggleDock') || document.getElementById('btnCollapseDock'); for (let j = 0; j < 50; j++) { if (btn) btn.click(); else if (typeof window.toggleDockCollapse === 'function') window.toggleDockCollapse(); } } """) # Wait for final transition to settle page.wait_for_timeout(350) final_burst_metrics = page.evaluate(""" () => { const dock = document.getElementById('siteDiaryDock'); return { height: dock.getBoundingClientRect().height, isCollapsed: dock.classList.contains('collapsed') }; } """) # 50 clicks from expanded state: even number of clicks -> must return to expanded state (195px) print(f" -> Post-burst settled metrics: {final_burst_metrics}", flush=True) assert abs(final_burst_metrics["height"] - HEIGHT_EXPANDED_TARGET) <= PX_TOLERANCE, ( f"After 50 rapid clicks, dock height should settle at {HEIGHT_EXPANDED_TARGET}px, got {final_burst_metrics['height']}px" ) assert not final_burst_metrics["isCollapsed"], "Dock should be expanded after 50 rapid clicks." screenshot_path = REPORT_DIR / "adversarial_1_dock_50x_toggle_expanded.png" page.screenshot(path=str(screenshot_path)) print(f" -> Saved screenshot: {screenshot_path}", flush=True) print(" -> PASSED: Challenge 1 verified 100% successfully.", flush=True) # ============================================================================== # CHALLENGE 2: Zero Occlusion Verification Across Diverse Viewports # ============================================================================== @pytest.mark.parametrize( "vp_width,vp_height,name", [ (1920, 1080, "Full_HD_Desktop"), (1440, 900, "MacBook_Standard"), (1280, 800, "Compact_Laptop"), (1024, 768, "Tablet_Landscape"), (800, 600, "Legacy_Small_Desktop"), ], ) def test_adversarial_zero_occlusion_across_viewports(browser_context, vp_width, vp_height, name): """Stress Test 2: Measures bounding client rects of #siteDiaryDock, #player4DDock, and .sidebar. Verifies Zero Occlusion: - dockRect.right <= sidebarRect.left at all times. - playerDockRect.right <= sidebarRect.left at all times. - Horizontal intersection area between dock and sidebar is strictly 0.0px. """ page: Page = browser_context["page"] page.set_viewport_size({"width": vp_width, "height": vp_height}) page.wait_for_timeout(200) print(f"\n[CHALLENGE 2] Testing Zero Occlusion on {name} ({vp_width}x{vp_height})...", flush=True) metrics = page.evaluate(""" () => { const dock = document.getElementById('siteDiaryDock'); const playerDock = document.getElementById('player4DDock'); const sidebar = document.querySelector('.sidebar'); const rDock = dock.getBoundingClientRect(); const rPlayer = playerDock ? playerDock.getBoundingClientRect() : null; const rSide = sidebar.getBoundingClientRect(); // Calculate horizontal overlap const dockOverlap = Math.max(0, Math.min(rDock.right, rSide.right) - Math.max(rDock.left, rSide.left)); const playerOverlap = rPlayer ? Math.max(0, Math.min(rPlayer.right, rSide.right) - Math.max(rPlayer.left, rSide.left)) : 0; return { windowWidth: window.innerWidth, windowHeight: window.innerHeight, dockRight: rDock.right, dockLeft: rDock.left, dockWidth: rDock.width, sidebarLeft: rSide.left, sidebarRight: rSide.right, sidebarWidth: rSide.width, dockOverlap: dockOverlap, playerRight: rPlayer ? rPlayer.right : null, playerOverlap: playerOverlap }; } """) print(f" -> Metrics: Dock.right={metrics['dockRight']}px, Sidebar.left={metrics['sidebarLeft']}px, Overlap={metrics['dockOverlap']}px", flush=True) # Zero Occlusion Assertions # In CSS, .site-diary-dock has right: 390px, and .sidebar is width: 390px. # Therefore dockRight must not exceed sidebarLeft (allowing <= 0.5px for floating point sub-pixel rounding) assert metrics["dockRight"] <= metrics["sidebarLeft"] + 0.5, ( f"ZERO OCCLUSION VIOLATED on {name}: Dock right ({metrics['dockRight']}px) overlaps Sidebar left ({metrics['sidebarLeft']}px)" ) assert metrics["dockOverlap"] == 0, ( f"ZERO OCCLUSION VIOLATED on {name}: Dock and Sidebar overlap by {metrics['dockOverlap']}px" ) if metrics["playerRight"] is not None: assert metrics["playerRight"] <= metrics["sidebarLeft"] + 0.5, ( f"ZERO OCCLUSION VIOLATED: 4D Player dock right ({metrics['playerRight']}px) overlaps Sidebar left ({metrics['sidebarLeft']}px)" ) assert metrics["playerOverlap"] == 0, ( f"ZERO OCCLUSION VIOLATED: 4D Player dock and Sidebar overlap by {metrics['playerOverlap']}px" ) print(f" -> PASSED: Zero Occlusion strictly upheld for {name}.", flush=True) # ============================================================================== # CHALLENGE 3: Mobile Viewport Resize down to 375x667 & Camera Aspect Safeguard # ============================================================================== @pytest.mark.parametrize( "m_width,m_height,device_name", [ (768, 1024, "iPad_Mini_Portrait"), (414, 896, "iPhone_11_XR"), (390, 844, "iPhone_12_13_14"), (375, 667, "iPhone_SE_Mobile_Target"), (320, 568, "iPhone_5_Extreme_Edge"), ], ) def test_adversarial_mobile_resize_camera_aspect_safeguard(browser_context, m_width, m_height, device_name): """Stress Test 3: Resizes viewport down to mobile dimensions (375x667 and extreme 320x568). Verifies: - camera.aspect does NOT produce NaN or Infinity (verifying Challenger 1's safeguard patch). - camera.aspect is strictly positive and finite (> 0). - camera.projectionMatrix elements are 100% finite and non-NaN. - container.clientWidth and clientHeight handled safely without exceptions. - Three.js animation loop continues rendering without crash. """ page: Page = browser_context["page"] print(f"\n[CHALLENGE 3] Testing Mobile Resize Safeguard on {device_name} ({m_width}x{m_height})...", flush=True) # Perform resize page.set_viewport_size({"width": m_width, "height": m_height}) # Dispatch window resize event explicitly to trigger listener page.evaluate("() => window.dispatchEvent(new Event('resize'))") page.wait_for_timeout(300) # Inspect camera and Three.js state eval_result = page.evaluate(""" () => { const cam = typeof camera !== 'undefined' ? camera : (window.camera || null); const cont = document.getElementById('webgl-container'); const rend = typeof renderer !== 'undefined' ? renderer : (window.renderer || null); let aspect = cam ? cam.aspect : null; let projElements = cam ? Array.from(cam.projectionMatrix.elements) : []; let hasNan = projElements.some(e => isNaN(e)); let hasInf = projElements.some(e => !isFinite(e)); return { hasCamera: !!cam, aspect: aspect, isNanAspect: isNaN(aspect), isInfAspect: !isFinite(aspect), containerClientWidth: cont ? cont.clientWidth : null, containerClientHeight: cont ? cont.clientHeight : null, hasNanInMatrix: hasNan, hasInfInMatrix: hasInf, projElementsSample: projElements.slice(0, 4) }; } """) print(f" -> State on {device_name}: {eval_result}", flush=True) assert eval_result["hasCamera"], "Three.js camera object was not accessible." aspect_val = eval_result["aspect"] assert aspect_val is not None, "camera.aspect is None" # CRITICAL SAFEGUARD VERIFICATION: Assert camera.aspect is NOT NaN and NOT Infinity assert not eval_result["isNanAspect"], f"CRITICAL FAILURE: camera.aspect is NaN on {device_name}!" assert not eval_result["isInfAspect"], f"CRITICAL FAILURE: camera.aspect is Infinity on {device_name}!" assert aspect_val > 0.0, f"camera.aspect must be strictly positive, got {aspect_val}" # Verify projection matrix integrity assert not eval_result["hasNanInMatrix"], f"CRITICAL FAILURE: Projection matrix contains NaN on {device_name}!" assert not eval_result["hasInfInMatrix"], f"CRITICAL FAILURE: Projection matrix contains Infinity on {device_name}!" # Test rendering a single frame on this mobile viewport to ensure no WebGL error render_test = page.evaluate(""" () => { try { if (typeof renderer !== 'undefined' && typeof scene !== 'undefined' && typeof camera !== 'undefined') { renderer.render(scene, camera); return { success: true }; } return { success: true, note: 'Globals not directly exposed' }; } catch (e) { return { success: false, error: e.toString() }; } } """) assert render_test["success"], f"Rendering failed on {device_name}: {render_test.get('error')}" screenshot_path = REPORT_DIR / f"adversarial_3_{device_name}.png" page.screenshot(path=str(screenshot_path)) print(f" -> Saved mobile screenshot: {screenshot_path}", flush=True) print(f" -> PASSED: Mobile safeguard on {device_name} (aspect={aspect_val:.4f}).", flush=True) # Restore default viewport for subsequent tests page.set_viewport_size({"width": 1440, "height": 900}) page.evaluate("() => window.dispatchEvent(new Event('resize'))") page.wait_for_timeout(200) # ============================================================================== # CHALLENGE 4: Zero-Width Edge Case Stress Test (Artificial Zero Dimensions) # ============================================================================== def test_adversarial_zero_dimension_math_max_safeguard(browser_context): """Stress Test 4: Adversarially tests the resize handler logic when container clientWidth/Height is 0. Verifies that Math.max(container.clientWidth, 1) / Math.max(container.clientHeight, 1) prevents 0 / 0 (NaN) and x / 0 (Infinity) under all theoretical mount race conditions. """ page: Page = browser_context["page"] print("\n[CHALLENGE 4] Testing Mathematical Zero-Dimension Safeguard Formula...", flush=True) formula_results = page.evaluate(""" () => { function calcAspect(w, h) { return Math.max(w, 1) / Math.max(h, 1); } const cases = [ { w: 0, h: 0, desc: 'Both 0' }, { w: 0, h: 900, desc: 'Width 0' }, { w: 1440, h: 0, desc: 'Height 0' }, { w: -10, h: -20, desc: 'Negative sizes' }, { w: 375, h: 667, desc: 'Mobile 375x667' } ]; return cases.map(c => { const aspect = calcAspect(c.w, c.h); return { desc: c.desc, w: c.w, h: c.h, aspect: aspect, isNan: isNaN(aspect), isInf: !isFinite(aspect) }; }); } """) for r in formula_results: print(f" -> Case '{r['desc']}' (w={r['w']}, h={r['h']}): aspect={r['aspect']}, isNaN={r['isNan']}, isInf={r['isInf']}", flush=True) assert not r["isNan"], f"Formula produced NaN for case {r['desc']}" assert not r["isInf"], f"Formula produced Infinity for case {r['desc']}" assert r["aspect"] > 0, f"Formula produced non-positive aspect for case {r['desc']}" print(" -> PASSED: Mathematical safeguard formula proves immune to division by zero.", flush=True) # ============================================================================== # CHALLENGE 5: Site Diary Dock Synchronization When Collapsed # ============================================================================== def test_adversarial_dock_sync_when_collapsed(browser_context): """Stress Test 5: Verifies that Site Diary Dock accurately updates its DOM and data bindings even when in collapsed state, and displays correct data upon expansion. """ page: Page = browser_context["page"] ensure_page_ready(page) print("\n[CHALLENGE 5] Testing Site Diary Synchronization When Collapsed...", flush=True) # Collapse dock page.evaluate(""" () => { const dock = document.getElementById('siteDiaryDock'); if (!dock.classList.contains('collapsed')) { const btn = document.getElementById('btnToggleDock') || document.getElementById('btnCollapseDock'); if (btn) btn.click(); else if (typeof window.toggleDockCollapse === 'function') window.toggleDockCollapse(); } } """) page.wait_for_timeout(300) # Scrub to Day 60 while collapsed page.evaluate("() => typeof window.setTimelineDay === 'function' && window.setTimelineDay(60)") page.wait_for_timeout(200) # Check that DOM fields updated under the hood day60_data = page.evaluate(""" () => { return { dateText: document.getElementById('dockDate')?.innerText, weatherText: document.getElementById('dockWeather')?.innerText, rebarText: document.getElementById('dockRebar')?.innerText, concreteText: document.getElementById('dockConcrete')?.innerText, isCollapsed: document.getElementById('siteDiaryDock')?.classList.contains('collapsed') }; } """) print(f" -> Day 60 data while collapsed: {day60_data}", flush=True) assert day60_data["isCollapsed"], "Dock should be collapsed." assert "2026" in day60_data["dateText"], "Date should have updated for Day 60." assert float(day60_data["concreteText"].replace(".", "").replace(",", ".")) > 0, "Concrete volume should be > 0 on Day 60." # Re-expand dock and check visual presentation page.evaluate(""" () => { const btn = document.getElementById('btnToggleDock') || document.getElementById('btnCollapseDock'); if (btn) btn.click(); else if (typeof window.toggleDockCollapse === 'function') window.toggleDockCollapse(); } """) page.wait_for_timeout(300) expanded_height = page.evaluate("() => document.getElementById('siteDiaryDock')?.getBoundingClientRect().height") assert abs(expanded_height - HEIGHT_EXPANDED_TARGET) <= PX_TOLERANCE, ( f"Dock height should re-expand to {HEIGHT_EXPANDED_TARGET}px, got {expanded_height}px" ) screenshot_path = REPORT_DIR / "adversarial_5_dock_expanded_day60.png" page.screenshot(path=str(screenshot_path)) print(f" -> Saved Day 60 re-expanded screenshot: {screenshot_path}", flush=True) print(" -> PASSED: Synchronous data updates verified while collapsed and re-expanded.", flush=True) # ============================================================================== # CHALLENGE 6: Console Error & Uncaught Exception Audit # ============================================================================== def test_adversarial_audit_console_and_page_errors(browser_context): """Stress Test 6: Strict audit of all captured console error messages and page errors. Verifies 0 errors, 0 unhandled exceptions, and 0 WebGL crash warnings. """ console_logs: List[Dict[str, str]] = browser_context["console_logs"] page_errors: List[str] = browser_context["page_errors"] print("\n[CHALLENGE 6] Auditing Console & Page Errors Throughout Stress Suite...", flush=True) errors = [log for log in console_logs if log["type"] == "error" and "favicon" not in log["text"].lower()] warnings = [log for log in console_logs if log["type"] == "warning"] print(f" -> Total console logs captured: {len(console_logs)}", flush=True) print(f" -> Console errors: {len(errors)}", flush=True) print(f" -> Console warnings: {len(warnings)}", flush=True) print(f" -> Page errors: {len(page_errors)}", flush=True) if errors: for e in errors: print(f" [CONSOLE ERROR] {e['text']} @ {e['location']}", flush=True) if page_errors: for pe in page_errors: print(f" [PAGE ERROR] {pe}", flush=True) assert len(errors) == 0, f"Found {len(errors)} console errors during stress testing: {errors}" assert len(page_errors) == 0, f"Found {len(page_errors)} unhandled page exceptions: {page_errors}" print(" -> PASSED: 0 console errors and 0 unhandled exceptions across entire session.", flush=True)