mocha-image-compare
Module makes possible to compare images during mocha test execution. It generates report in specified folder which includes provided test image, image received from buffer/file, diff image (if previous tests were ok) and report json file for each test.
It compares images by three parameters:
- format (PNG, JPG etc)
- geometry (width/height)
- content (by MSE metric)
Installation
npm install --save-dev mocha-image-compare
Usage
This module is pretty easy to use. First include it into you test file:
var mic = ;
Also, you can specify optional parameters like
var mic = report: '/path/to/report/folder' // path to the report folder, default // is './report' threshold: 0002 // default detection thresold, default is 0.001 highlight: 'yellow' // image diff highlight color;
Please note, this way you'll have common scope for all tests run in common, even if you include it in other test file.
To have a separate scope you need to instantiate a new instance, like this:
var scope = options;
To get actual compare function you need to bind test with the comparator instance like
;
You can test an already saved file too:
;
There is also a syntax sugar which will be pretty useful for testing with
supertest
library:
;
Report
Report folder contains up to four files per compare invocation:
- <sha1-hash>-src.<filetype>: original file
- <sha1-hash>-dst.<filetype>: resulting file saved from buffer/file
- <sha1-hash>-diff.png: image shows visual difference between images
- <sha1-hash>-report.json: JSON encoded test results.
Example JSON report is:
// threshold for test "threshold": 0001 "test": "/project/test/001-thumbnails.js" // test suite file "name": "thumbnails" // suite name "should create thumbnail with scaling" // test name // original file "src": "./report/1b924ae63414b5876a0b04feeaa88d41b0d2da41-src.png" // report file (this one!) "report": "./report/1b924ae63414b5876a0b04feeaa88d41b0d2da41-report.json" // object dimensions "geometry": "src": "200x82" "dst": "200x82" // object formats "format": "src": "PNG (Portable Network Graphics)" "dst": "PNG (Portable Network Graphics)" // got file/content "dst": "./report/1b924ae63414b5876a0b04feeaa88d41b0d2da41-dst.png" // image diff file "diff": "./report/1b924ae63414b5876a0b04feeaa88d41b0d2da41-diff.png" // actual equality value "equality": 0 // content comparison test result "isEqual": true