perf: provide diffBuffer in ImageDiffError

gemini-testing · Aug 21, 2023 · e3f61ce · e3f61ce
1 parent 2a7c62f
commit e3f61ce
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "glob-extra": "^5.0.2",
     "inherit": "^2.2.2",
     "lodash": "^4.17.21",
-    "looks-same": "^8.1.0",
+    "looks-same": "^8.2.1",
     "micromatch": "^4.0.5",
     "mocha": "^10.2.0",
     "plugins-loader": "^1.2.0",

diff --git a/src/browser/commands/assert-view/capture-processors/assert-refs.js b/src/browser/commands/assert-view/capture-processors/assert-refs.js
@@ -9,7 +9,7 @@ exports.handleNoRefImage = (currImg, refImg, state) => {
 };
 
 exports.handleImageDiff = (currImg, refImg, state, opts) => {
-    const { tolerance, antialiasingTolerance, canHaveCaret, diffAreas, config } = opts;
+    const { tolerance, antialiasingTolerance, canHaveCaret, diffAreas, config, diffBuffer } = opts;
     const {
         buildDiffOpts,
         system: { diffColor },
@@ -25,5 +25,5 @@ exports.handleImageDiff = (currImg, refImg, state, opts) => {
         ...buildDiffOpts,
     };
 
-    return Promise.reject(ImageDiffError.create(state, currImg, refImg, diffOpts, diffAreas));
+    return Promise.reject(ImageDiffError.create(state, currImg, refImg, diffOpts, diffAreas, diffBuffer));
 };
diff --git a/src/browser/commands/assert-view/errors/image-diff-error.ts b/src/browser/commands/assert-view/errors/image-diff-error.ts
@@ -20,6 +20,7 @@ type ImageDiffErrorConstructor<T> = new (
     refImg: ImageInfo,
     diffOpts: DiffOptions,
     diffAreas: DiffAreas,
+    diffBuffer: Buffer,
 ) => T;
 
 interface ImageDiffErrorData {
@@ -29,46 +30,58 @@ interface ImageDiffErrorData {
     diffOpts: DiffOptions;
     diffBounds: LooksSameResult["diffBounds"];
     diffClusters: LooksSameResult["diffClusters"];
+    diffBuffer: Buffer;
 }
 
 export class ImageDiffError extends BaseStateError {
     message: string;
     diffOpts: DiffOptions;
     diffBounds?: DiffAreas["diffBounds"];
     diffClusters?: DiffAreas["diffClusters"];
+    diffBuffer: Buffer;
 
     static create<T extends ImageDiffError>(
         this: ImageDiffErrorConstructor<T>,
         stateName: string,
         currImg: ImageInfo,
         refImg: ImageInfo,
         diffOpts: DiffOptions,
-        diffAreas: DiffAreas = {},
+        diffAreas = {} as DiffAreas,
+        diffBuffer: Buffer,
     ): T {
-        return new this(stateName, currImg, refImg, diffOpts, diffAreas);
+        return new this(stateName, currImg, refImg, diffOpts, diffAreas, diffBuffer);
     }
 
     static fromObject<T>(this: ImageDiffErrorConstructor<T>, data: ImageDiffErrorData): T {
         const { diffBounds, diffClusters } = data;
-        return new this(data.stateName, data.currImg, data.refImg, data.diffOpts, {
-            diffBounds,
-            diffClusters,
-        });
+        return new this(
+            data.stateName,
+            data.currImg,
+            data.refImg,
+            data.diffOpts,
+            {
+                diffBounds,
+                diffClusters,
+            },
+            data.diffBuffer,
+        );
     }
 
     constructor(
         stateName: string,
         currImg: ImageInfo,
         refImg: ImageInfo,
         diffOpts: DiffOptions,
-        { diffBounds, diffClusters }: DiffAreas = {},
+        { diffBounds, diffClusters } = {} as DiffAreas,
+        diffBuffer: Buffer,
     ) {
         super(stateName, currImg, refImg);
 
         this.message = `images are different for "${stateName}" state`;
         this.diffOpts = diffOpts;
         this.diffBounds = diffBounds;
         this.diffClusters = diffClusters;
+        this.diffBuffer = diffBuffer;
     }
 
     saveDiffTo(diffPath: string): Promise<null> {

diff --git a/src/browser/commands/assert-view/index.js b/src/browser/commands/assert-view/index.js
@@ -90,14 +90,24 @@ module.exports = browser => {
             equal,
             diffBounds,
             diffClusters,
+            diffImage,
             metaInfo = {},
         } = await Image.compare(refBuffer, currBuffer, imageCompareOpts);
         Object.assign(refImg, metaInfo.refImg);
 
         if (!equal) {
+            const diffBuffer = await diffImage.createBuffer("png");
             const diffAreas = { diffBounds, diffClusters };
             const { tolerance, antialiasingTolerance } = opts;
-            const imageDiffOpts = { tolerance, antialiasingTolerance, canHaveCaret, diffAreas, config, emitter };
+            const imageDiffOpts = {
+                tolerance,
+                antialiasingTolerance,
+                canHaveCaret,
+                diffAreas,
+                config,
+                emitter,
+                diffBuffer,
+            };
 
             await fs.outputFile(currImg.path, currBuffer);
 

diff --git a/src/image.js b/src/image.js
@@ -159,6 +159,7 @@ module.exports = class Image {
             ignoreCaret: opts.canHaveCaret,
             pixelRatio: opts.pixelRatio,
             ...opts.compareOpts,
+            createDiffImage: true,
         };
         ["tolerance", "antialiasingTolerance"].forEach(option => {
             if (option in opts) {

diff --git a/test/src/browser/commands/assert-view/index.js b/test/src/browser/commands/assert-view/index.js
@@ -74,7 +74,7 @@ describe("assertView command", () => {
 
     beforeEach(() => {
         sandbox.stub(Image, "create").returns(Object.create(Image.prototype));
-        sandbox.stub(Image, "compare").resolves(true);
+        sandbox.stub(Image, "compare").resolves({ diffImage: { createBuffer: sandbox.stub() } });
         sandbox.stub(Image.prototype, "getSize");
 
         sandbox.stub(fs, "readFileSync");
@@ -494,7 +494,7 @@ describe("assertView command", () => {
 
             describe("image compare", () => {
                 it("should add opts from runtime config to temp", async () => {
-                    Image.compare.resolves({ equal: true });
+                    Image.compare.resolves({ equal: true, diffImage: { createBuffer: sandbox.stub() } });
                     RuntimeConfig.getInstance.returns({ tempOpts: { some: "opts" } });
                     const browser = await initBrowser_();
 
@@ -506,7 +506,7 @@ describe("assertView command", () => {
                 it("should compare a current image with a reference", async () => {
                     const config = mkConfig_({ getScreenshotPath: () => "/ref/path" });
                     const image = stubImage_();
-                    Image.compare.resolves({ equal: true });
+                    Image.compare.resolves({ equal: true, diffImage: { createBuffer: sandbox.stub() } });
                     temp.path.returns("/curr/path");
                     fs.readFile.withArgs("/ref/path").resolves("refPngBuffer");
                     ScreenShooter.prototype.capture.resolves(image);
@@ -525,7 +525,9 @@ describe("assertView command", () => {
                     });
                     fs.readFile.withArgs("/ref/path").resolves("refPngBuffer");
                     image.toPngBuffer.resolves("currPngBuffer");
-                    Image.compare.withArgs("refPngBuffer", "currPngBuffer").resolves({ equal: true });
+                    Image.compare
+                        .withArgs("refPngBuffer", "currPngBuffer")
+                        .resolves({ equal: true, diffImage: { createBuffer: sandbox.stub() } });
                     ScreenShooter.prototype.capture.resolves(image);
 
                     await fn(browser);
@@ -589,7 +591,7 @@ describe("assertView command", () => {
 
                 describe("if images are not equal", () => {
                     beforeEach(() => {
-                        Image.compare.resolves({ equal: false });
+                        Image.compare.resolves({ equal: false, diffImage: { createBuffer: sandbox.stub() } });
                     });
 
                     describe("assert refs", () => {
@@ -613,6 +615,7 @@ describe("assertView command", () => {
                             Image.compare.resolves({
                                 equal: false,
                                 metaInfo: { refImg: { size: { width: 300, height: 400 } } },
+                                diffImage: { createBuffer: sandbox.stub() },
                             });
 
                             await fn(browser, "state");
@@ -664,7 +667,10 @@ describe("assertView command", () => {
                             });
 
                             it("should pass diff bounds to error", async () => {
-                                Image.compare.resolves({ diffBounds: { left: 0, top: 0, right: 10, bottom: 10 } });
+                                Image.compare.resolves({
+                                    diffBounds: { left: 0, top: 0, right: 10, bottom: 10 },
+                                    diffImage: { createBuffer: sandbox.stub() },
+                                });
                                 const browser = await initBrowser_();
 
                                 await fn(browser);
@@ -675,7 +681,10 @@ describe("assertView command", () => {
                             });
 
                             it("should pass diff clusters to error", async () => {
-                                Image.compare.resolves({ diffClusters: [{ left: 0, top: 0, right: 10, bottom: 10 }] });
+                                Image.compare.resolves({
+                                    diffClusters: [{ left: 0, top: 0, right: 10, bottom: 10 }],
+                                    diffImage: { createBuffer: sandbox.stub() },
+                                });
                                 const browser = await initBrowser_();
 
                                 await fn(browser);

diff --git a/test/src/image.js b/test/src/image.js
@@ -277,6 +277,7 @@ describe("Image", () => {
             tolerance: 250,
             antialiasingTolerance: 100500,
             stopOnFirstFail: true,
+            createDiffImage: true,
         });
     });