@quake2ts/test-utils 0.0.807 → 0.0.808

package/dist/index.cjs

@@ -296,6 +296,7 @@ __export(index_exports, {
   teardownNodeEnvironment: () => teardownNodeEnvironment,
   testComputeShader: () => testComputeShader,
   testPipelineRendering: () => testPipelineRendering,
+  testWebGLAnimation: () => testWebGLAnimation,
   testWebGLRenderer: () => testWebGLRenderer,
   throttleBandwidth: () => throttleBandwidth,
   verifySmoothing: () => verifySmoothing,
@@ -4547,9 +4548,153 @@ async function renderAndExpectSnapshot(setup, renderFn, options) {
   });
 }
 
+// src/visual/animation-snapshots.ts
+var import_upng_js = __toESM(require("upng-js"), 1);
+var import_promises2 = __toESM(require("fs/promises"), 1);
+var import_fs2 = require("fs");
+var import_path2 = __toESM(require("path"), 1);
+async function loadAPNG(filepath) {
+  const buffer = await import_promises2.default.readFile(filepath);
+  const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+  const img = import_upng_js.default.decode(arrayBuffer);
+  const framesRGBA = import_upng_js.default.toRGBA8(img);
+  const frames = framesRGBA.map((buffer2) => new Uint8ClampedArray(buffer2));
+  return {
+    width: img.width,
+    height: img.height,
+    frames
+  };
+}
+async function saveAPNG(filepath, frames, width, height, delayMs) {
+  const buffers = frames.map((f) => {
+    const dst = new ArrayBuffer(f.byteLength);
+    new Uint8ClampedArray(dst).set(f);
+    return dst;
+  });
+  const delays = new Array(frames.length).fill(delayMs);
+  const pngBuffer = import_upng_js.default.encode(buffers, width, height, 0, delays);
+  await import_promises2.default.mkdir(import_path2.default.dirname(filepath), { recursive: true });
+  await import_promises2.default.writeFile(filepath, Buffer.from(pngBuffer));
+}
+async function expectAnimationSnapshot(renderAndCaptureFrame, options) {
+  const {
+    name,
+    width,
+    height,
+    frameCount,
+    fps = 10,
+    updateBaseline = false,
+    snapshotDir = import_path2.default.join(process.cwd(), "tests", "__snapshots__"),
+    threshold = 0.1,
+    maxDifferencePercent = 0.1
+  } = options;
+  if (!width || !height) {
+    throw new Error("Width and height are required for expectAnimationSnapshot");
+  }
+  const baselinePath = getSnapshotPath(name, "baseline", snapshotDir);
+  const actualPath = getSnapshotPath(name, "actual", snapshotDir);
+  const diffPath = getSnapshotPath(name, "diff", snapshotDir);
+  const alwaysSave = process.env.ALWAYS_SAVE_SNAPSHOTS === "1";
+  const actualFrames = [];
+  for (let i = 0; i < frameCount; i++) {
+    const frameData = await renderAndCaptureFrame(i);
+    if (frameData.length !== width * height * 4) {
+      throw new Error(`Frame ${i} dimension mismatch: expected length ${width * height * 4}, got ${frameData.length}`);
+    }
+    actualFrames.push(frameData);
+  }
+  const delayMs = 1e3 / fps;
+  let baselineFrames = null;
+  let shouldUpdateBaseline = updateBaseline || !(0, import_fs2.existsSync)(baselinePath);
+  if (!shouldUpdateBaseline) {
+    try {
+      const baseline = await loadAPNG(baselinePath);
+      if (baseline.width !== width || baseline.height !== height) {
+        console.warn(`Baseline dimensions mismatch (${baseline.width}x${baseline.height} vs ${width}x${height}). Forcing update.`);
+        shouldUpdateBaseline = true;
+      } else if (baseline.frames.length !== frameCount) {
+        console.warn(`Baseline frame count mismatch (${baseline.frames.length} vs ${frameCount}). Forcing update.`);
+        shouldUpdateBaseline = true;
+      } else {
+        baselineFrames = baseline.frames;
+      }
+    } catch (e) {
+      console.warn(`Failed to load baseline APNG: ${e}. Forcing update.`);
+      shouldUpdateBaseline = true;
+    }
+  }
+  if (shouldUpdateBaseline) {
+    console.log(`Creating/Updating baseline for ${name} at ${baselinePath}`);
+    await saveAPNG(baselinePath, actualFrames, width, height, delayMs);
+    return;
+  }
+  if (!baselineFrames) {
+    throw new Error("Baseline frames missing despite checks.");
+  }
+  const frameStats = [];
+  const diffFrames = [];
+  let totalDiffPixels = 0;
+  let totalPixels = 0;
+  for (let i = 0; i < frameCount; i++) {
+    const result2 = await compareSnapshots(actualFrames[i], baselineFrames[i], width, height, options);
+    frameStats.push(result2);
+    if (result2.diffImage) {
+      diffFrames.push(result2.diffImage);
+    } else {
+      diffFrames.push(new Uint8ClampedArray(width * height * 4));
+    }
+    totalDiffPixels += result2.pixelsDifferent;
+    totalPixels += width * height;
+  }
+  const avgPercentDifferent = totalDiffPixels / totalPixels * 100;
+  const passed = avgPercentDifferent <= (maxDifferencePercent || 0);
+  const result = {
+    passed,
+    totalPixels,
+    totalDiffPixels,
+    percentDifferent: avgPercentDifferent,
+    frameStats
+  };
+  const statsPath = import_path2.default.join(snapshotDir, "stats", `${name}.json`);
+  await import_promises2.default.mkdir(import_path2.default.dirname(statsPath), { recursive: true });
+  await import_promises2.default.writeFile(statsPath, JSON.stringify({
+    passed: result.passed,
+    percentDifferent: result.percentDifferent,
+    pixelsDifferent: result.totalDiffPixels,
+    totalPixels: result.totalPixels,
+    threshold: options.threshold ?? 0.1,
+    maxDifferencePercent: options.maxDifferencePercent ?? 0.1,
+    frameCount
+  }, null, 2));
+  if (!passed || alwaysSave) {
+    await saveAPNG(actualPath, actualFrames, width, height, delayMs);
+    await saveAPNG(diffPath, diffFrames, width, height, delayMs);
+  }
+  if (!passed) {
+    const failThreshold = 10;
+    const errorMessage = `Animation snapshot comparison failed for ${name}: ${result.percentDifferent.toFixed(2)}% different (${result.totalDiffPixels} pixels total). See ${diffPath} for details.`;
+    if (result.percentDifferent <= failThreshold) {
+      console.warn(`[WARNING] ${errorMessage} (Marked as failed in report but passing test execution due to <${failThreshold}% difference)`);
+    } else {
+      throw new Error(errorMessage);
+    }
+  }
+}
+
 // src/engine/helpers/webgl-playwright.ts
 var import_http = require("http");
-var import_path2 = __toESM(require("path"), 1);
+var import_path3 = __toESM(require("path"), 1);
+var import_fs3 = __toESM(require("fs"), 1);
+function findWorkspaceRoot(startDir) {
+  let currentDir = startDir;
+  while (currentDir !== import_path3.default.parse(currentDir).root) {
+    if (import_fs3.default.existsSync(import_path3.default.join(currentDir, "pnpm-workspace.yaml"))) {
+      return currentDir;
+    }
+    currentDir = import_path3.default.dirname(currentDir);
+  }
+  return process.cwd();
+}
 async function createWebGLPlaywrightSetup(options = {}) {
   const width = options.width ?? 256;
   const height = options.height ?? 256;
@@ -4568,7 +4713,7 @@ async function createWebGLPlaywrightSetup(options = {}) {
   } catch (e) {
     throw new Error('Failed to load "serve-handler" package. Please ensure it is installed.');
   }
-  const repoRoot = import_path2.default.resolve(__dirname, "../../../../..");
+  const repoRoot = findWorkspaceRoot(__dirname);
   const staticServer = (0, import_http.createServer)((request, response) => {
     return handler(request, response, {
       public: repoRoot,
@@ -4632,9 +4777,9 @@ async function createWebGLPlaywrightSetup(options = {}) {
     cleanup
   };
 }
-async function renderAndCaptureWebGLPlaywright(page, renderFn, width, height) {
+async function renderAndCaptureWebGLPlaywright(page, renderFn, width, height, frameIndex = 0) {
   try {
-    const pixelData = await page.evaluate(({ code, width: width2, height: height2 }) => {
+    const pixelData = await page.evaluate(({ code, width: width2, height: height2, frameIndex: frameIndex2 }) => {
       const renderer = window.testRenderer;
       const gl = window.testGl;
       const canvas = window.testCanvas;
@@ -4647,8 +4792,8 @@ async function renderAndCaptureWebGLPlaywright(page, renderFn, width, height) {
         gl.viewport(0, 0, width2, height2);
       }
       try {
-        const fn = new Function("renderer", "gl", code);
-        fn(renderer, gl);
+        const fn = new Function("renderer", "gl", "frameIndex", code);
+        fn(renderer, gl, frameIndex2);
       } catch (err) {
         throw new Error(`Renderer Execution Error: ${err.message}
 Code:
@@ -4656,7 +4801,7 @@ ${code}`);
       }
       gl.finish();
       return window.captureCanvas();
-    }, { code: renderFn, width, height });
+    }, { code: renderFn, width, height, frameIndex });
     return new Uint8ClampedArray(pixelData);
   } catch (err) {
     throw new Error(`Browser Test Error: ${err.message}`);
@@ -4683,6 +4828,33 @@ async function testWebGLRenderer(renderCode, options) {
     await setup.cleanup();
   }
 }
+async function testWebGLAnimation(renderCode, options) {
+  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();
+  }
+}
 
 // src/engine/helpers/pipeline-test-template.ts
 var import_vitest18 = require("vitest");
@@ -5307,139 +5479,6 @@ var verifySmoothing = (states) => {
   };
 };
 
-// src/visual/animation-snapshots.ts
-var import_upng_js = __toESM(require("upng-js"), 1);
-var import_promises2 = __toESM(require("fs/promises"), 1);
-var import_fs2 = require("fs");
-var import_path3 = __toESM(require("path"), 1);
-async function loadAPNG(filepath) {
-  const buffer = await import_promises2.default.readFile(filepath);
-  const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
-  const img = import_upng_js.default.decode(arrayBuffer);
-  const framesRGBA = import_upng_js.default.toRGBA8(img);
-  const frames = framesRGBA.map((buffer2) => new Uint8ClampedArray(buffer2));
-  return {
-    width: img.width,
-    height: img.height,
-    frames
-  };
-}
-async function saveAPNG(filepath, frames, width, height, delayMs) {
-  const buffers = frames.map((f) => {
-    const dst = new ArrayBuffer(f.byteLength);
-    new Uint8ClampedArray(dst).set(f);
-    return dst;
-  });
-  const delays = new Array(frames.length).fill(delayMs);
-  const pngBuffer = import_upng_js.default.encode(buffers, width, height, 0, delays);
-  await import_promises2.default.mkdir(import_path3.default.dirname(filepath), { recursive: true });
-  await import_promises2.default.writeFile(filepath, Buffer.from(pngBuffer));
-}
-async function expectAnimationSnapshot(renderAndCaptureFrame, options) {
-  const {
-    name,
-    width,
-    height,
-    frameCount,
-    fps = 10,
-    updateBaseline = false,
-    snapshotDir = import_path3.default.join(process.cwd(), "tests", "__snapshots__"),
-    threshold = 0.1,
-    maxDifferencePercent = 0.1
-  } = options;
-  if (!width || !height) {
-    throw new Error("Width and height are required for expectAnimationSnapshot");
-  }
-  const baselinePath = getSnapshotPath(name, "baseline", snapshotDir);
-  const actualPath = getSnapshotPath(name, "actual", snapshotDir);
-  const diffPath = getSnapshotPath(name, "diff", snapshotDir);
-  const alwaysSave = process.env.ALWAYS_SAVE_SNAPSHOTS === "1";
-  const actualFrames = [];
-  for (let i = 0; i < frameCount; i++) {
-    const frameData = await renderAndCaptureFrame(i);
-    if (frameData.length !== width * height * 4) {
-      throw new Error(`Frame ${i} dimension mismatch: expected length ${width * height * 4}, got ${frameData.length}`);
-    }
-    actualFrames.push(frameData);
-  }
-  const delayMs = 1e3 / fps;
-  let baselineFrames = null;
-  let shouldUpdateBaseline = updateBaseline || !(0, import_fs2.existsSync)(baselinePath);
-  if (!shouldUpdateBaseline) {
-    try {
-      const baseline = await loadAPNG(baselinePath);
-      if (baseline.width !== width || baseline.height !== height) {
-        console.warn(`Baseline dimensions mismatch (${baseline.width}x${baseline.height} vs ${width}x${height}). Forcing update.`);
-        shouldUpdateBaseline = true;
-      } else if (baseline.frames.length !== frameCount) {
-        console.warn(`Baseline frame count mismatch (${baseline.frames.length} vs ${frameCount}). Forcing update.`);
-        shouldUpdateBaseline = true;
-      } else {
-        baselineFrames = baseline.frames;
-      }
-    } catch (e) {
-      console.warn(`Failed to load baseline APNG: ${e}. Forcing update.`);
-      shouldUpdateBaseline = true;
-    }
-  }
-  if (shouldUpdateBaseline) {
-    console.log(`Creating/Updating baseline for ${name} at ${baselinePath}`);
-    await saveAPNG(baselinePath, actualFrames, width, height, delayMs);
-    return;
-  }
-  if (!baselineFrames) {
-    throw new Error("Baseline frames missing despite checks.");
-  }
-  const frameStats = [];
-  const diffFrames = [];
-  let totalDiffPixels = 0;
-  let totalPixels = 0;
-  for (let i = 0; i < frameCount; i++) {
-    const result2 = await compareSnapshots(actualFrames[i], baselineFrames[i], width, height, options);
-    frameStats.push(result2);
-    if (result2.diffImage) {
-      diffFrames.push(result2.diffImage);
-    } else {
-      diffFrames.push(new Uint8ClampedArray(width * height * 4));
-    }
-    totalDiffPixels += result2.pixelsDifferent;
-    totalPixels += width * height;
-  }
-  const avgPercentDifferent = totalDiffPixels / totalPixels * 100;
-  const passed = avgPercentDifferent <= (maxDifferencePercent || 0);
-  const result = {
-    passed,
-    totalPixels,
-    totalDiffPixels,
-    percentDifferent: avgPercentDifferent,
-    frameStats
-  };
-  const statsPath = import_path3.default.join(snapshotDir, "stats", `${name}.json`);
-  await import_promises2.default.mkdir(import_path3.default.dirname(statsPath), { recursive: true });
-  await import_promises2.default.writeFile(statsPath, JSON.stringify({
-    passed: result.passed,
-    percentDifferent: result.percentDifferent,
-    pixelsDifferent: result.totalDiffPixels,
-    totalPixels: result.totalPixels,
-    threshold: options.threshold ?? 0.1,
-    maxDifferencePercent: options.maxDifferencePercent ?? 0.1,
-    frameCount
-  }, null, 2));
-  if (!passed || alwaysSave) {
-    await saveAPNG(actualPath, actualFrames, width, height, delayMs);
-    await saveAPNG(diffPath, diffFrames, width, height, delayMs);
-  }
-  if (!passed) {
-    const failThreshold = 10;
-    const errorMessage = `Animation snapshot comparison failed for ${name}: ${result.percentDifferent.toFixed(2)}% different (${result.totalDiffPixels} pixels total). See ${diffPath} for details.`;
-    if (result.percentDifferent <= failThreshold) {
-      console.warn(`[WARNING] ${errorMessage} (Marked as failed in report but passing test execution due to <${failThreshold}% difference)`);
-    } else {
-      throw new Error(errorMessage);
-    }
-  }
-}
-
 // src/e2e/playwright.ts
 async function createPlaywrightTestClient(options = {}) {
   let playwright;
@@ -5853,6 +5892,7 @@ function createVisualTestScenario(sceneName) {
   teardownNodeEnvironment,
   testComputeShader,
   testPipelineRendering,
+  testWebGLAnimation,
   testWebGLRenderer,
   throttleBandwidth,
   verifySmoothing,