pix-diff - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

CHANGELOG.md

 Changelog
 =========
+v1.0.8 - Fixed protractors capabilities issues (credit to msviha)
+       - Added formatImageName option for custom image naming
+       - Diff directory now created automatically
+       - Image tag is now strict camel case for better readability (7/4/2016)
+
 v1.0.7 - Merged PR #5 to resolve issue on SauceLabs (18/12/2015)
@@ -4,0 +9,0 @@

Gruntfile.js

@@ -13,4 +13,3 @@ 'use strict';
                     "test/screenshots/*",
-                    "!test/screenshots/diff/**",
-                    "!test/screenshots/example-fail*.png",
+                    "!test/screenshots/exampleFail*.png",
                     "test/screenshots/diff/*.png"
@@ -17,0 +16,0 @@ ]

index.js

@@ -5,3 +5,5 @@ var BlinkDiff = require('blink-diff'),
     path = require('path'),
-    util = require('util');
+    util = require('util'),
+    fs = require('fs'),
+    camelCase = require('camel-case');
 
@@ -17,2 +19,3 @@ /**
  * @param {string} options.height Height of browser
+ * @param {string} options.formatImageName Custom format image name
  *
@@ -29,6 +32,10 @@ * @property {string} _basePath
 
+    if (!fs.existsSync(options.basePath + '/diff') || !fs.statSync(options.basePath + '/diff').isDirectory()) {
+        fs.mkdirSync(options.basePath + '/diff');
+    }
+
     this._width = options.width || 1280;
     this._height = options.height || 1024;
 
-    this._capabilities = null;
+    this._formatString = options.formatImageName || "{tag}-{browserName}-{width}x{height}";
 
@@ -39,7 +46,8 @@ this._flow = browser.controlFlow();
     browser.driver.manage().window().setSize(this._width, this._height)
-        .then(function() {
-            return browser.getCapabilities()
+        .then(function () {
+            return browser.getProcessedConfig()
         })
-        .then(function(data) {
-            return this._capabilities = data.caps_;
+        .then(function (data) {
+            this._capabilities = data.capabilities;
+            assert.ok(this._capabilities.browserName, "Browser name is undefined.");
         }.bind(this));
@@ -59,8 +67,6 @@ }
      */
-    _mergeDefaultOptions: function (optionsA, optionsB) {
-        var option;
-
+    _mergeDefaultOptions: function(optionsA, optionsB) {
         optionsB = (typeof optionsB === 'object') ? optionsB : {};
 
-        for (option in optionsB) {
+        for (var option in optionsB) {
             if (!optionsA.hasOwnProperty(option)) {
@@ -74,2 +80,25 @@ optionsA[option] = optionsB[option];
     /**
+     * Format string with description and capabilities
+     *
+     * @method _format
+     * @param {string} formatString
+     * @param {string} description
+     * @return {string}
+     * @private
+     */
+    _format: function(formatString, description) {
+        var formatOptions = {
+            'tag': camelCase(description),
+            'browserName': this._capabilities.browserName,
+            'width': this._width,
+            'height': this._height
+        };
+
+        for (var option in formatOptions ) {
+            formatString = formatString.replace('{' + option + '}', formatOptions[option]);
+        }
+        return formatString + '.png';
+    },
+
+    /**
      * Saves an image of the screen
@@ -88,6 +117,5 @@ *
                 .then(function(image) {
-                    tag = util.format('%s-%s-%sx%s.png', tag, this._capabilities.browserName, this._width, this._height);
                     return new PNGImage({
                         imagePath: new Buffer(image, 'base64'),
-                        imageOutputPath: path.join(this._basePath, tag)
+                        imageOutputPath: path.join(this._basePath, this._format(this._formatString, tag))
                     }).runWithPromise();
@@ -124,6 +152,5 @@ }.bind(this));
                 .then(function(image) {
-                    tag = util.format('%s-%s-%sx%s.png', tag, this._capabilities.browserName, this._width, this._height);
                     return new PNGImage({
                         imagePath: new Buffer(image, 'base64'),
-                        imageOutputPath: path.join(this._basePath, tag),
+                        imageOutputPath: path.join(this._basePath, this._format(this._formatString, tag)),
                         cropImage: rect
@@ -153,3 +180,3 @@ }).runWithPromise();
                 .then(function(image) {
-                    tag = util.format('%s-%s-%sx%s.png', tag, this._capabilities.browserName, this._width, this._height);
+                    tag = this._format(this._formatString, tag);
                     defaults = {
@@ -198,3 +225,3 @@ imageAPath: path.join(this._basePath, tag),
                 .then(function(image) {
-                    tag = util.format('%s-%s-%sx%s.png', tag, this._capabilities.browserName, this._width, this._height);
+                    tag = this._format(this._formatString, tag);
                     defaults = {
@@ -264,7 +291,3 @@ imageAPath: path.join(this._basePath, tag),
     beforeEach(function() {
-        if (/^2/.test(jasmine.version)) {
-            jasmine.addMatchers(v2);
-        } else {
-            this.addMatchers(v1);
-        }
+        (/^2/.test(jasmine.version)) ? jasmine.addMatchers(v2) : this.addMatchers(v1);
     });
@@ -271,0 +294,0 @@ })();

package.json

 {
   "name": "pix-diff",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Protractor plugin for image comparison",
@@ -11,2 +11,3 @@ "main": "index.js",
   "devDependencies": {
+    "camel-case": "^1.2.2",
     "grunt": "^0.4.2",
@@ -17,3 +18,3 @@ "grunt-cli": "^0.1.13",
     "load-grunt-tasks": "^0.6.0",
-    "protractor": "2.1.0"
+    "protractor": "3.2.2"
   },
@@ -20,0 +21,0 @@ "scripts": {

README.md

@@ -71,3 +71,3 @@ Pix-Diff
         expect(browser.pixdiff.checkRegion(element(By.id('title')), 'example-page-title', {
-            blockOut: {x: 10, y: 132, width: 100, height: 50}})).toMatchScreen();
+            blockOut: [{x: 10, y: 132, width: 100, height: 50}]})).toMatchScreen();
     });
@@ -82,2 +82,3 @@ });
 * ```height``` Browser height (default: 1024)
+* ```formatImageName``` Naming format for images (default: ```"{tag}-{browserName}-{width}x{height}"```)
 
@@ -104,7 +105,7 @@ ####Function options:
         ├── diff
-        │   └── example-page-chrome-1280x1024.png
-        ├── example-page-chrome-800x600.png
-        ├── example-page-chrome-1280x1024.png
-        ├── example-page-title-chrome-800x600.png
-        └── example-page-title-chrome-1280x1024.png
+        │   └── examplePage-chrome-1280x1024.png
+        ├── examplePage-chrome-800x600.png
+        ├── examplePage-chrome-1280x1024.png
+        ├── examplePage-title-chrome-800x600.png
+        └── examplePage-title-chrome-1280x1024.png
 ```
@@ -115,7 +116,14 @@ The ```basePath``` directory must contain all the *approved* images. You may create subdirectories for better organisation, but the relative path should then be given in the test spec method. Failed comparisons generate a diff image under the **diff** folder.
 
-Images should obey the following format:
+Images should obey the following default format:
 
 ```text
-{descriptive_name}-{browserName}-{browserWidth}x{browserHeight}.png
+{descriptionInCamelCase}-{browserName}-{browserWidth}x{browserHeight}.png
 ```
+
+The naming convention can be customized by passing the parameter ```formatImageName``` with a format string like:
+
+```text
+{browserName}_{tag}__{width}-{height}
+```
+
 Images specified via name in the spec method will be selected according to the browsers current resolution. That is to say that multiple images can share the same name differentated by resolution.
@@ -137,2 +145,3 @@
 * [png-image](https://github.com/koola/png-image)
+* [camel-case](https://github.com/blakeembrey/camel-case)
 
@@ -139,0 +148,0 @@ ###Dev-Dependencies

test/integration.spec.js

@@ -13,3 +13,3 @@ 'use strict';
     it("should save the screen", function () {
-        var tagName = 'example-page';
+        var tagName = 'examplePage';
 
@@ -16,0 +16,0 @@ browser.pixDiff.saveScreen(tagName).then(function() {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20883

increased by6.27%

Lines of code

339

increased by6.27%

Number of lines in readme file

155

increased by6.16%

Worsened metrics

Dev dependency count

7

increased by16.67%

Number of package files

11

decreased by-8.33%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes