diff --git a/package-lock.json b/package-lock.json index b2be0ebdc..24a4997b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,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", @@ -9566,9 +9566,9 @@ } }, "node_modules/looks-same": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/looks-same/-/looks-same-8.1.0.tgz", - "integrity": "sha512-gdMgCSCvhpR2/AA15CamZD7Ch+gx8sOqWyRzz3j1Gs8+2VBCyHm3CRMS8EK+5rNvpwf9AGEnDunredVM5+f46w==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/looks-same/-/looks-same-8.2.1.tgz", + "integrity": "sha512-55u5dWPWc/9cIFRtDjqbH/J3h0nyar1gqFrDIDQSpqYDDd19dZUQtTMxLj0hvsxzp/qzQ0EV0HChtXRWylY2Pg==", "dependencies": { "color-diff": "^1.1.0", "fs-extra": "^8.1.0", @@ -21627,9 +21627,9 @@ "dev": true }, "looks-same": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/looks-same/-/looks-same-8.1.0.tgz", - "integrity": "sha512-gdMgCSCvhpR2/AA15CamZD7Ch+gx8sOqWyRzz3j1Gs8+2VBCyHm3CRMS8EK+5rNvpwf9AGEnDunredVM5+f46w==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/looks-same/-/looks-same-8.2.1.tgz", + "integrity": "sha512-55u5dWPWc/9cIFRtDjqbH/J3h0nyar1gqFrDIDQSpqYDDd19dZUQtTMxLj0hvsxzp/qzQ0EV0HChtXRWylY2Pg==", "requires": { "color-diff": "^1.1.0", "fs-extra": "^8.1.0", diff --git a/package.json b/package.json index 2f9307856..c84518d78 100644 --- 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 index ce460165a..89c619f85 100644 --- 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 index 79281df41..4750f0166 100644 --- 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 = new ( refImg: ImageInfo, diffOpts: DiffOptions, diffAreas: DiffAreas, + diffBuffer: Buffer, ) => T; interface ImageDiffErrorData { @@ -29,6 +30,7 @@ interface ImageDiffErrorData { diffOpts: DiffOptions; diffBounds: LooksSameResult["diffBounds"]; diffClusters: LooksSameResult["diffClusters"]; + diffBuffer: Buffer; } export class ImageDiffError extends BaseStateError { @@ -36,6 +38,7 @@ export class ImageDiffError extends BaseStateError { diffOpts: DiffOptions; diffBounds?: DiffAreas["diffBounds"]; diffClusters?: DiffAreas["diffClusters"]; + diffBuffer: Buffer; static create( this: ImageDiffErrorConstructor, @@ -43,17 +46,25 @@ export class ImageDiffError extends BaseStateError { 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(this: ImageDiffErrorConstructor, 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( @@ -61,7 +72,8 @@ export class ImageDiffError extends BaseStateError { currImg: ImageInfo, refImg: ImageInfo, diffOpts: DiffOptions, - { diffBounds, diffClusters }: DiffAreas = {}, + { diffBounds, diffClusters } = {} as DiffAreas, + diffBuffer: Buffer, ) { super(stateName, currImg, refImg); @@ -69,6 +81,7 @@ export class ImageDiffError extends BaseStateError { this.diffOpts = diffOpts; this.diffBounds = diffBounds; this.diffClusters = diffClusters; + this.diffBuffer = diffBuffer; } saveDiffTo(diffPath: string): Promise { diff --git a/src/browser/commands/assert-view/index.js b/src/browser/commands/assert-view/index.js index 45b06a843..2cdebd3ca 100644 --- 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 index 81af668ea..721ab96e5 100644 --- 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 index e367e176a..9b4881a85 100644 --- 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 index f5e5e5ba4..e93d08564 100644 --- a/test/src/image.js +++ b/test/src/image.js @@ -277,6 +277,7 @@ describe("Image", () => { tolerance: 250, antialiasingTolerance: 100500, stopOnFirstFail: true, + createDiffImage: true, }); });