♻️ refactor!: massive refactor

2026-09-02 14:18:35 +00:00 · 2026-05-31 03:04:30 +07:00
parent c1f12c7201
commit df3c944547
86 changed files with 3691 additions and 1129 deletions
@@ -18,7 +18,12 @@ function makeImage(width = 1200, height = 800) {
  return { naturalWidth: width, naturalHeight: height } as HTMLImageElement;
 }

-function makeContext2d(ctx: CanvasRenderingContext2D, image: HTMLImageElement, tw = 600, th = 400) {
+function makeContext2d(
+  ctx: CanvasRenderingContext2D,
+  image: HTMLImageElement,
+  tw = 600,
+  th = 400,
+) {
  return { ctx, image, targetWidth: tw, targetHeight: th };
 }

@@ -31,13 +36,32 @@ describe("faceBlurRenderer.render (regions)", () => {
      enabled: true,
      method: "gaussian",
      amount: 24,
-      regions: [{ x: 120, y: 80, width: 300, height: 200, sourceWidth: 1200, sourceHeight: 800 }],
+      regions: [
+        {
+          x: 120,
+          y: 80,
+          width: 300,
+          height: 200,
+          sourceWidth: 1200,
+          sourceHeight: 800,
+        },
+      ],
    };
    faceBlurRenderer.render(makeContext2d(ctx, image), effect);

    expect(ctx.save).toHaveBeenCalledOnce();
    expect(ctx.filter).toBe("blur(24px)");
-    expect(ctx.drawImage).toHaveBeenCalledWith(image, 120, 80, 300, 200, 60, 40, 150, 100);
+    expect(ctx.drawImage).toHaveBeenCalledWith(
+      image,
+      120,
+      80,
+      300,
+      200,
+      60,
+      40,
+      150,
+      100,
+    );
    expect(ctx.restore).toHaveBeenCalledOnce();
  });

@@ -48,27 +72,65 @@ describe("faceBlurRenderer.render (regions)", () => {
    const ctx = makeContext();
    const image = makeImage();
    const sampleDrawImage = vi.fn();
-    const sampleCtx = { imageSmoothingEnabled: true, drawImage: sampleDrawImage } as unknown as CanvasRenderingContext2D;
-    const sampleCanvas = { width: 0, height: 0, getContext: vi.fn(() => sampleCtx) } as unknown as HTMLCanvasElement;
+    const sampleCtx = {
+      imageSmoothingEnabled: true,
+      drawImage: sampleDrawImage,
+    } as unknown as CanvasRenderingContext2D;
+    const sampleCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => sampleCtx),
+    } as unknown as HTMLCanvasElement;
    const nativeCreateElement = doc.createElement.bind(doc);
-    const createElement = vi.spyOn(doc, "createElement").mockImplementation((tagName: string) => {
-      if (tagName === "canvas") return sampleCanvas;
-      return nativeCreateElement(tagName);
-    });
+    const createElement = vi
+      .spyOn(doc, "createElement")
+      .mockImplementation((tagName: string) => {
+        if (tagName === "canvas") return sampleCanvas;
+        return nativeCreateElement(tagName);
+      });

    const effect: FaceBlurEffect = {
      kind: "face-blur",
      enabled: true,
      method: "pixelate",
      amount: 10,
-      regions: [{ x: 200, y: 100, width: 160, height: 120, sourceWidth: 1200, sourceHeight: 800 }],
+      regions: [
+        {
+          x: 200,
+          y: 100,
+          width: 160,
+          height: 120,
+          sourceWidth: 1200,
+          sourceHeight: 800,
+        },
+      ],
    };
    faceBlurRenderer.render(makeContext2d(ctx, image), effect);

    expect(sampleCanvas.width).toBe(16);
    expect(sampleCanvas.height).toBe(12);
-    expect(sampleDrawImage).toHaveBeenCalledWith(image, 200, 100, 160, 120, 0, 0, 16, 12);
-    expect(ctx.drawImage).toHaveBeenCalledWith(sampleCanvas, 0, 0, 16, 12, 100, 50, 80, 60);
+    expect(sampleDrawImage).toHaveBeenCalledWith(
+      image,
+      200,
+      100,
+      160,
+      120,
+      0,
+      0,
+      16,
+      12,
+    );
+    expect(ctx.drawImage).toHaveBeenCalledWith(
+      sampleCanvas,
+      0,
+      0,
+      16,
+      12,
+      100,
+      50,
+      80,
+      60,
+    );
    createElement.mockRestore();
  });

@@ -81,7 +143,17 @@ describe("faceBlurRenderer.render (regions)", () => {
      method: "censor",
      amount: 20,
      censorColor: "#ff0000",
-      regions: [{ x: 20, y: 30, width: 40, height: 50, sourceWidth: 1200, sourceHeight: 800, censorColor: "#00ff00" }],
+      regions: [
+        {
+          x: 20,
+          y: 30,
+          width: 40,
+          height: 50,
+          sourceWidth: 1200,
+          sourceHeight: 800,
+          censorColor: "#00ff00",
+        },
+      ],
    };
    faceBlurRenderer.render(makeContext2d(ctx, image), effect);

@@ -101,7 +173,17 @@ describe("faceBlurRenderer.render (regions)", () => {
    };
    faceBlurRenderer.render(makeContext2d(ctx, image), effect);

-    expect(ctx.drawImage).toHaveBeenCalledWith(image, 400, 480, 1200, 800, 100, 120, 300, 200);
+    expect(ctx.drawImage).toHaveBeenCalledWith(
+      image,
+      400,
+      480,
+      1200,
+      800,
+      100,
+      120,
+      300,
+      200,
+    );
  });
 });

@@ -113,28 +195,67 @@ describe("faceBlurRenderer.renderLayer", () => {
    const ctx = makeContext();
    const image = makeImage();
    const sourceDrawImage = vi.fn();
-    const sourceCtx = { ...makeContext(), drawImage: sourceDrawImage } as unknown as CanvasRenderingContext2D;
-    const sourceCanvas = { width: 0, height: 0, getContext: vi.fn(() => sourceCtx) } as unknown as HTMLCanvasElement;
+    const sourceCtx = {
+      ...makeContext(),
+      drawImage: sourceDrawImage,
+    } as unknown as CanvasRenderingContext2D;
+    const sourceCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => sourceCtx),
+    } as unknown as HTMLCanvasElement;
    const nativeCreateElement = doc.createElement.bind(doc);
-    const createElement = vi.spyOn(doc, "createElement").mockImplementation((tagName: string) => {
-      if (tagName === "canvas") return sourceCanvas;
-      return nativeCreateElement(tagName);
-    });
+    const createElement = vi
+      .spyOn(doc, "createElement")
+      .mockImplementation((tagName: string) => {
+        if (tagName === "canvas") return sourceCanvas;
+        return nativeCreateElement(tagName);
+      });

    const effect: FaceBlurEffect = {
      kind: "face-blur",
      enabled: true,
      method: "gaussian",
      amount: 24,
-      regions: [{ x: 120, y: 80, width: 300, height: 200, sourceWidth: 1200, sourceHeight: 800 }],
+      regions: [
+        {
+          x: 120,
+          y: 80,
+          width: 300,
+          height: 200,
+          sourceWidth: 1200,
+          sourceHeight: 800,
+        },
+      ],
    };
    faceBlurRenderer.renderLayer(makeContext2d(ctx, image), effect);

    expect(sourceCanvas.width).toBe(1200);
    expect(sourceCanvas.height).toBe(800);
    expect(sourceDrawImage).toHaveBeenNthCalledWith(1, image, 0, 0, 1200, 800);
-    expect(sourceDrawImage).toHaveBeenNthCalledWith(2, image, 120, 80, 300, 200, 120, 80, 300, 200);
-    expect(ctx.drawImage).toHaveBeenCalledWith(sourceCanvas, 0, 0, 1200, 800, 0, 0, 600, 400);
+    expect(sourceDrawImage).toHaveBeenNthCalledWith(
+      2,
+      image,
+      120,
+      80,
+      300,
+      200,
+      120,
+      80,
+      300,
+      200,
+    );
+    expect(ctx.drawImage).toHaveBeenCalledWith(
+      sourceCanvas,
+      0,
+      0,
+      1200,
+      800,
+      0,
+      0,
+      600,
+      400,
+    );
    createElement.mockRestore();
  });

@@ -147,30 +268,79 @@ describe("faceBlurRenderer.renderLayer", () => {
    const image = makeImage();
    const regionDrawImage = vi.fn();
    const blurDrawImage = vi.fn();
-    const regionCtx = { ...makeContext(), clearRect: vi.fn(), drawImage: regionDrawImage } as unknown as CanvasRenderingContext2D;
-    const blurCtx = { ...makeContext(), clearRect: vi.fn(), drawImage: blurDrawImage } as unknown as CanvasRenderingContext2D;
-    const regionCanvas = { width: 0, height: 0, getContext: vi.fn(() => regionCtx) } as unknown as HTMLCanvasElement;
-    const blurCanvas = { width: 0, height: 0, getContext: vi.fn(() => blurCtx) } as unknown as HTMLCanvasElement;
+    const regionCtx = {
+      ...makeContext(),
+      clearRect: vi.fn(),
+      drawImage: regionDrawImage,
+    } as unknown as CanvasRenderingContext2D;
+    const blurCtx = {
+      ...makeContext(),
+      clearRect: vi.fn(),
+      drawImage: blurDrawImage,
+    } as unknown as CanvasRenderingContext2D;
+    const regionCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => regionCtx),
+    } as unknown as HTMLCanvasElement;
+    const blurCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => blurCtx),
+    } as unknown as HTMLCanvasElement;
    const nativeCreateElement = doc.createElement.bind(doc);
-    const createElement = vi.spyOn(doc, "createElement").mockImplementation((tagName: string) => {
-      if (tagName !== "canvas") return nativeCreateElement(tagName);
-      return createElement.mock.calls.length === 1 ? regionCanvas : blurCanvas;
-    });
+    const createElement = vi
+      .spyOn(doc, "createElement")
+      .mockImplementation((tagName: string) => {
+        if (tagName !== "canvas") return nativeCreateElement(tagName);
+        return createElement.mock.calls.length === 1
+          ? regionCanvas
+          : blurCanvas;
+      });

    const effect: FaceBlurEffect = {
      kind: "face-blur",
      enabled: true,
      method: "gaussian",
      amount: 24,
-      regions: [{ x: 120, y: 80, width: 300, height: 200, sourceWidth: 1200, sourceHeight: 800 }],
+      regions: [
+        {
+          x: 120,
+          y: 80,
+          width: 300,
+          height: 200,
+          sourceWidth: 1200,
+          sourceHeight: 800,
+        },
+      ],
    };
    faceBlurRenderer.render(makeContext2d(ctx, image), effect);

    expect(ctx.save).not.toHaveBeenCalled();
    expect(regionCanvas.width).toBe(150);
    expect(regionCanvas.height).toBe(100);
-    expect(regionDrawImage).toHaveBeenCalledWith(image, 120, 80, 300, 200, 0, 0, 150, 100);
-    expect(ctx.drawImage).toHaveBeenCalledWith(regionCanvas, 0, 0, 150, 100, 60, 40, 150, 100);
+    expect(regionDrawImage).toHaveBeenCalledWith(
+      image,
+      120,
+      80,
+      300,
+      200,
+      0,
+      0,
+      150,
+      100,
+    );
+    expect(ctx.drawImage).toHaveBeenCalledWith(
+      regionCanvas,
+      0,
+      0,
+      150,
+      100,
+      60,
+      40,
+      150,
+      100,
+    );
    createElement.mockRestore();
  });
 });