web-corders-vrt 0.1.1

package/test/region-detector.test.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect } from "vitest";
+import { PNG } from "pngjs";
+import { detectDiffRegions } from "../src/core/region-detector.js";
+
+/**
+ * pixelmatchが出力するような diff画像を手動で生成する。
+ * 指定領域を赤 (255, 0, 0) にし、残りを半透明にする。
+ */
+function createDiffImage(
+  width: number,
+  height: number,
+  regions: Array<{ x: number; y: number; w: number; h: number }>,
+): Buffer {
+  const png = new PNG({ width, height });
+
+  // 背景を半透明に
+  for (let i = 0; i < png.data.length; i += 4) {
+    png.data[i] = 0;
+    png.data[i + 1] = 0;
+    png.data[i + 2] = 0;
+    png.data[i + 3] = 25; // alpha 0.1 * 255 ≈ 25
+  }
+
+  // 差分領域を赤にする
+  for (const region of regions) {
+    for (let y = region.y; y < region.y + region.h && y < height; y++) {
+      for (let x = region.x; x < region.x + region.w && x < width; x++) {
+        const idx = (y * width + x) * 4;
+        png.data[idx] = 255; // R
+        png.data[idx + 1] = 0; // G
+        png.data[idx + 2] = 0; // B
+        png.data[idx + 3] = 255; // A
+      }
+    }
+  }
+
+  return PNG.sync.write(png);
+}
+
+describe("detectDiffRegions", () => {
+  it("差分がない画像からは領域を検出しない", () => {
+    const png = new PNG({ width: 100, height: 100 });
+    for (let i = 0; i < png.data.length; i += 4) {
+      png.data[i] = 0;
+      png.data[i + 1] = 0;
+      png.data[i + 2] = 0;
+      png.data[i + 3] = 25;
+    }
+    const buffer = PNG.sync.write(png);
+
+    const regions = detectDiffRegions(buffer);
+    expect(regions).toHaveLength(0);
+  });
+
+  it("単一の差分領域を正しく検出する", () => {
+    const diffImage = createDiffImage(200, 200, [
+      { x: 50, y: 50, w: 40, h: 30 },
+    ]);
+
+    const regions = detectDiffRegions(diffImage, { minRegionSize: 1 });
+
+    expect(regions.length).toBeGreaterThanOrEqual(1);
+    const region = regions[0];
+
+    // bounding box が概ね正しい
+    expect(region.boundingBox.x).toBeGreaterThanOrEqual(50);
+    expect(region.boundingBox.y).toBeGreaterThanOrEqual(50);
+    expect(region.boundingBox.x + region.boundingBox.width).toBeLessThanOrEqual(
+      100,
+    );
+    expect(
+      region.boundingBox.y + region.boundingBox.height,
+    ).toBeLessThanOrEqual(90);
+  });
+
+  it("離れた2つの差分領域を別々に検出する", () => {
+    const diffImage = createDiffImage(400, 400, [
+      { x: 10, y: 10, w: 30, h: 30 },
+      { x: 350, y: 350, w: 30, h: 30 },
+    ]);
+
+    const regions = detectDiffRegions(diffImage, {
+      minRegionSize: 1,
+      mergingDistance: 20, // 離れてるのでマージされない
+    });
+
+    expect(regions.length).toBe(2);
+  });
+
+  it("近い差分領域はマージされる", () => {
+    const diffImage = createDiffImage(200, 200, [
+      { x: 10, y: 10, w: 20, h: 20 },
+      { x: 40, y: 10, w: 20, h: 20 }, // 10px しか離れてない
+    ]);
+
+    const regions = detectDiffRegions(diffImage, {
+      minRegionSize: 1,
+      mergingDistance: 50, // 50px 以下はマージ
+    });
+
+    expect(regions.length).toBe(1);
+  });
+
+  it("locationHint が正しく設定される", () => {
+    // ページ上部にフル幅の差分
+    const diffImage = createDiffImage(1440, 900, [
+      { x: 0, y: 10, w: 1440, h: 60 },
+    ]);
+
+    const regions = detectDiffRegions(diffImage, { minRegionSize: 1 });
+
+    expect(regions.length).toBeGreaterThanOrEqual(1);
+    const hint = regions[0].locationHint;
+    expect(hint.verticalPosition).toBe("top");
+    expect(hint.horizontalPosition).toBe("full-width");
+    expect(hint.estimatedElement).toContain("header");
+  });
+
+  it("小さすぎる差分はminRegionSizeでフィルタされる", () => {
+    const diffImage = createDiffImage(200, 200, [
+      { x: 50, y: 50, w: 2, h: 2 }, // 4ピクセルしかない
+    ]);
+
+    const regions = detectDiffRegions(diffImage, { minRegionSize: 10 });
+    expect(regions).toHaveLength(0);
+  });
+
+  it("IDが大きい差分順に振られる", () => {
+    const diffImage = createDiffImage(400, 400, [
+      { x: 10, y: 10, w: 10, h: 10 }, // 100px
+      { x: 300, y: 300, w: 50, h: 50 }, // 2500px
+    ]);
+
+    const regions = detectDiffRegions(diffImage, {
+      minRegionSize: 1,
+      mergingDistance: 20,
+    });
+
+    expect(regions.length).toBe(2);
+    // 大きい差分が先（id=1）
+    expect(regions[0].diffPixelCount).toBeGreaterThan(
+      regions[1].diffPixelCount,
+    );
+    expect(regions[0].id).toBe(1);
+    expect(regions[1].id).toBe(2);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts", "src/types/**/*.d.ts", "bin/**/*.ts"],
+  "exclude": ["node_modules", "dist", "test"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    "bin/vrt": "bin/vrt.ts",
+  },
+  format: ["esm"],
+  target: "node18",
+  sourcemap: true,
+  clean: true,
+  splitting: false,
+  banner: {
+    js: "#!/usr/bin/env node",
+  },
+});