Add option to use resemble`s ignoreAntialiasing() (#629)

Author: zbycz

README.md

@@ -154,7 +154,7 @@ clickSelector            // Click the specified DOM element prior to screen shot
 postInteractionWait      // Wait for a selector after interacting with hoverSelector or clickSelector (optionally accepts wait time in ms. Idea for use with a click or hover element transition. available with default onReadyScript)
 selectors                // Array of selectors to capture. Defaults to document if omitted. Use "viewport" to capture the viewport size. See Targeting elements in the next section for more info...
 selectorExpansion        // See Targeting elements in the next section for more info...
-misMatchThreshold        // Around of change before a test is marked failed
+misMatchThreshold        // Percentage of different pixels allowed to pass test
 requireSameDimensions    // If set to true -- any change in selector size will trigger a test failure.
 ```
 
@@ -700,7 +700,9 @@ optional parameters
 
 ### Modifying output settings of image-diffs
 
-By specifying `resembleOutputOptions` in your backstop.json file you can modify the image-diffs transparency, errorcolor, etc. (See [Resemble.js outputSettings](https://github.com/Huddle/Resemble.js) for the full list.
+By specifying `resembleOutputOptions` in your backstop.json file you can modify the image-diffs transparency, errorcolor, etc. (See [Resemble.js outputSettings](https://github.com/Huddle/Resemble.js) for the full list.)
+
+Instead of calling resemble`s ignoreAntialiasing(), you may set it as a property in the config. (See [example](examples/simpleReactApp/backstop.json))
 ```json
 "resembleOutputOptions": {
   "errorColor": {
@@ -709,7 +711,8 @@ By specifying `resembleOutputOptions` in your backstop.json file you can modify
     "blue": 255
   },
   "errorType": "movement",
-  "transparency": 0.3
+  "transparency": 0.3,
+  "ignoreAntialiasing": true
 }
 ```
 

core/util/compare/compare-resemble.js

@@ -3,11 +3,17 @@ var resemble = require('node-resemble-js');
 module.exports = function (referencePath, testPath, misMatchThreshold, resembleOutputSettings, requireSameDimensions) {
   return new Promise(function (resolve, reject) {
     resemble.outputSettings(resembleOutputSettings || {});
-    resemble(referencePath).compareTo(testPath).onComplete(data => {
+    var comparison = resemble(referencePath).compareTo(testPath);
+
+    if (resembleOutputSettings && resembleOutputSettings.ignoreAntialiasing) {
+      comparison.ignoreAntialiasing();
+    }
+
+    comparison.onComplete(data => {
       if ((requireSameDimensions === false || data.isSameDimensions === true) && data.misMatchPercentage <= misMatchThreshold) {
         return resolve(data);
       }
-      reject(data)
+      reject(data);
     });
   });
 };

examples/simpleReactApp/assets/css/styles.css

@@ -6,6 +6,7 @@
 
 h1 {
 	margin-bottom: 20px;
+  text-shadow: 0 0 1px rgba(120, 120, 120, 19);
 }
 
 #geocoding_form {
@@ -41,7 +42,7 @@ h1 {
 	line-height: 1.4;
 }
 
-.current-location .glyphicon-star, 
+.current-location .glyphicon-star,
 .current-location .glyphicon-star-empty {
 	display: inline-block;
 	margin-left: 10px;

examples/simpleReactApp/backstop.json

@@ -27,7 +27,7 @@
       ],
       "readyEvent": "gmapResponded",
       "delay": 100,
-      "misMatchThreshold" : 1,
+      "misMatchThreshold" : 0,
       "onBeforeScript": "onBefore.js",
       "onReadyScript": "onReady.js"
     }
@@ -42,5 +42,8 @@
   "casperFlags": [],
   "engine": "phantomjs",
   "report": ["browser"],
+  "resembleOutputOptions": {
+    "ignoreAntialiasing": true
+  },
   "debug": false
 }

examples/simpleReactApp/package.json

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dev-backstop-test": "node ../../cli/index.js test",
     "watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
     "build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js && backstop test"
   },

examples/simpleReactApp/readme.md

@@ -11,6 +11,9 @@ then Build...
 
 Then open index.html in your browser.
 
+**Note:** ignore antialiasing is used here. 
+See backstop.json: `"resembleOutputOptions": {"ignoreAntialiasing": true}`
+
 ---
 
 **A BackstopJS test configuration file has already been added to this project.**