@quake2ts/test-utils 0.0.807 → 0.0.809

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quake2ts/test-utils",
-  "version": "0.0.807",
+  "version": "0.0.809",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -45,10 +45,10 @@
     "serve-handler": "^6.1.6",
     "vitest": "^1.6.0",
     "webgpu": "^0.3.8",
-    "@quake2ts/engine": "^0.0.807",
-    "@quake2ts/game": "0.0.807",
-    "@quake2ts/server": "0.0.807",
-    "@quake2ts/shared": "0.0.807"
+    "@quake2ts/engine": "^0.0.809",
+    "@quake2ts/game": "0.0.809",
+    "@quake2ts/server": "0.0.809",
+    "@quake2ts/shared": "0.0.809"
   },
   "peerDependenciesMeta": {
     "@quake2ts/engine": {
@@ -104,10 +104,10 @@
     "vitest": "^4.0.16",
     "serve-handler": "^6.1.6",
     "webgpu": "^0.3.8",
-    "@quake2ts/engine": "^0.0.807",
-    "@quake2ts/game": "0.0.807",
-    "@quake2ts/server": "0.0.807",
-    "@quake2ts/shared": "0.0.807"
+    "@quake2ts/engine": "^0.0.809",
+    "@quake2ts/game": "0.0.809",
+    "@quake2ts/server": "0.0.809",
+    "@quake2ts/shared": "0.0.809"
   },
   "dependencies": {
     "upng-js": "^2.1.0"

package/src/engine/helpers/webgl-playwright.ts

@@ -7,8 +7,10 @@
 
 import type { Browser, Page, BrowserContext } from 'playwright';
 import { expectSnapshot, SnapshotTestOptions } from '../../visual/snapshots.js';
+import { expectAnimationSnapshot, AnimationSnapshotOptions } from '../../visual/animation-snapshots.js';
 import { createServer, IncomingMessage, ServerResponse } from 'http';
 import path from 'path';
+import fs from 'fs';
 
 export interface WebGLPlaywrightSetup {
   browser: Browser;
@@ -26,6 +28,18 @@ export interface WebGLPlaywrightOptions {
   headless?: boolean;
 }
 
+function findWorkspaceRoot(startDir: string): string {
+  let currentDir = startDir;
+  while (currentDir !== path.parse(currentDir).root) {
+    if (fs.existsSync(path.join(currentDir, 'pnpm-workspace.yaml'))) {
+      return currentDir;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  // Fallback to process.cwd() if not found (though unexpected in this repo)
+  return process.cwd();
+}
+
 /**
  * Creates a Playwright-based WebGL test setup with the actual quake2ts renderer.
  * Starts a static server, loads the built renderer bundle, and provides a clean testing environment.
@@ -56,9 +70,9 @@ export async function createWebGLPlaywrightSetup(
   }
 
   // Start static server to serve built files
-  // Serve from repo root so we can access packages/engine/dist
-  // Note: __dirname is handled by tsup shims to work in both ESM and CJS
-  const repoRoot = path.resolve(__dirname, '../../../../..');
+  // Find workspace root robustly (works from src or dist, and regardless of CWD)
+  // We start looking from __dirname (which might be src/... or dist/...)
+  const repoRoot = findWorkspaceRoot(__dirname);
 
   const staticServer = createServer((request: IncomingMessage, response: ServerResponse) => {
     return handler(request, response, {
@@ -148,16 +162,18 @@ export async function createWebGLPlaywrightSetup(
  * @param renderFn - Function code as string that uses window.testRenderer
  * @param width - Optional width to resize the canvas to
  * @param height - Optional height to resize the canvas to
+ * @param frameIndex - Optional frame index passed to the render function
  * @returns Captured pixel data
  */
 export async function renderAndCaptureWebGLPlaywright(
   page: Page,
   renderFn: string,
   width?: number,
-  height?: number
+  height?: number,
+  frameIndex: number = 0
 ): Promise<Uint8ClampedArray> {
   try {
-    const pixelData = await page.evaluate(({ code, width, height }) => {
+    const pixelData = await page.evaluate(({ code, width, height, frameIndex }) => {
       const renderer = (window as any).testRenderer;
       const gl = (window as any).testGl;
       const canvas = (window as any).testCanvas;
@@ -175,8 +191,8 @@ export async function renderAndCaptureWebGLPlaywright(
 
       try {
         // Execute the render function
-        const fn = new Function('renderer', 'gl', code);
-        fn(renderer, gl);
+        const fn = new Function('renderer', 'gl', 'frameIndex', code);
+        fn(renderer, gl, frameIndex);
       } catch (err: any) {
         // Capture context for better debugging
         throw new Error(`Renderer Execution Error: ${err.message}\nCode:\n${code}`);
@@ -187,7 +203,7 @@ export async function renderAndCaptureWebGLPlaywright(
 
       // Capture pixels
       return (window as any).captureCanvas();
-    }, { code: renderFn, width, height });
+    }, { code: renderFn, width, height, frameIndex });
 
     return new Uint8ClampedArray(pixelData);
   } catch (err: any) {
@@ -245,3 +261,55 @@ export async function testWebGLRenderer(
     await setup.cleanup();
   }
 }
+
+/**
+ * Runs a WebGL animated visual test with the actual quake2ts renderer.
+ *
+ * Usage:
+ * ```ts
+ * await testWebGLAnimation(`
+ *   // frameIndex is available here
+ *   gl.clearColor(frameIndex * 0.1, 0, 0, 1);
+ *   gl.clear(gl.COLOR_BUFFER_BIT);
+ * `, {
+ *   name: 'animated-red',
+ *   description: 'Fading red animation',
+ *   width: 256,
+ *   height: 256,
+ *   frameCount: 10,
+ *   fps: 10,
+ *   snapshotDir: __dirname
+ * });
+ * ```
+ */
+export async function testWebGLAnimation(
+  renderCode: string,
+  options: AnimationSnapshotOptions & WebGLPlaywrightOptions
+): Promise<void> {
+  const setup = await createWebGLPlaywrightSetup(options);
+
+  try {
+    await expectAnimationSnapshot(async (frameIndex) => {
+        return renderAndCaptureWebGLPlaywright(
+            setup.page,
+            renderCode,
+            options.width,
+            options.height,
+            frameIndex
+        );
+    }, {
+      name: options.name,
+      description: options.description,
+      width: setup.width,
+      height: setup.height,
+      frameCount: options.frameCount,
+      fps: options.fps,
+      updateBaseline: options.updateBaseline,
+      snapshotDir: options.snapshotDir,
+      threshold: options.threshold,
+      maxDifferencePercent: options.maxDifferencePercent
+    });
+  } finally {
+    await setup.cleanup();
+  }
+}