Merge pull request #107 from bem/issue106

Issue106

Author: eGavr

README.md

@@ -92,19 +92,26 @@ The following two code samples will be considered to be equivalent:
 
 * **compareAttributesAsJSON: [ Array ]**
 
-Sets what kind of respective attributes' content will be compared as JSON objects, but not as strings (default: `[]`).
+Sets what kind of respective attributes' content will be compared as JSON objects, but not as strings (default: `[]`).<br>
+In cases when the value of the attribute is an invalid JSON or can not be wrapped into a function, it will be compared as `undefined`.
 
 **Example**: `[{ name: 'data', isFunction: false }, { name: 'onclick', isFunction: true }]`<br>
 The following two code samples will be considered to be equivalent:
 
 ```html
 <div data='{"bla":{"first":"ololo","second":"trololo"}}'></div>
 <span onclick='return {"aaa":"bbb","bbb":"aaa"}'></span>
+
+<button data='REALLY BAD JSON'></button>
+<button onclick='REALLY BAD FUNCTION'></button>
 ```
 
 ```html
 <div data='{"bla":{"second":"trololo","first":"ololo"}}'></div>
 <span onclick='return {"bbb":"aaa","aaa":"bbb"}'></span>
+
+<button data='undefined'></button>
+<button onclick='undefined'></button>
 ```
 
 **REMARK!**<br>

README.ru.md

@@ -92,19 +92,26 @@ var HtmlDiffer = require('html-differ').HtmlDiffer,
 
 * **compareAttributesAsJSON: [ Array ]**
 
-Устанавливает, значения каких атрибутов следует сравнивать как JSON-объекты, а не как строки (по умолчанию: `[]`).
+Устанавливает, значения каких атрибутов следует сравнивать как JSON-объекты, а не как строки (по умолчанию: `[]`).<br>
+В тех случаях, когда в качестве значения атрибута выступает некорректный JSON или это значение нельзя обернуть в функцию, то оно будет сравниваться как `undefined`.
 
 **Пример**: `[{ name: 'data', isFunction: false }, { name: 'onclick', isFunction: true }]`<br>
 Следующие два HTML будут считаться эквивалентными:
 
 ```html
 <div data='{"bla":{"first":"ololo","second":"trololo"}}'></div>
 <span onclick='return {"aaa":"bbb","bbb":"aaa"}'></span>
+
+<button data='REALLY BAD JSON'></button>
+<button onclick='REALLY BAD FUNCTION'></button>
 ```
 
 ```html
 <div data='{"bla":{"second":"trololo","first":"ololo"}}'></div>
 <span onclick='return {"bbb":"aaa","aaa":"bbb"}'></span>
+
+<button data='undefined'></button>
+<button onclick='undefined'></button>
 ```
 
 **ПРИМЕЧАНИЕ!**<br>

lib/utils/utils.js

@@ -95,20 +95,24 @@ function sortAttrsValues(attrs, compareAttributesAsJSON) {
     }
 
     /**
-     * Parses the given JSON in HTML attribute
+     * Parses the given in HTML attribute JSON
      * @param {String} val
      * @param {Boolean} [isClick]
      * @returns {Object}
      */
     function _parseAttr(val, isClick) {
-        if (isClick) {
-            /*jshint evil: true */
-            var fn = Function(val);
+        try {
+            if (isClick) {
+                /*jshint evil: true */
+                var fn = Function(val);
 
-            return fn ? fn() : {};
-        }
+                return fn ? fn() : {};
+            }
 
-        return JSON.parse(val);
+            return JSON.parse(val);
+        } catch (err) {
+            return undefined;
+        }
     }
 
     _.forEach(compareAttributesAsJSON, function (attr) {
@@ -125,10 +129,10 @@ function sortAttrsValues(attrs, compareAttributesAsJSON) {
 
         _.forEach(attrIndexes, function (index) {
             attrValue = _parseAttr(attrs[index].value, isFunction);
-            attrValue = _sortObj(attrValue);
-            attrValue = JSON.stringify(attrValue);
 
-            attrs[index].value = (isFunction ? 'return ' : '') + attrValue;
+            attrValue && (attrValue = JSON.stringify(_sortObj(attrValue)));
+
+            attrs[index].value = (isFunction && attrValue ? 'return ' : '') + attrValue;
         });
     });
 

test/diff/fixtures/first/invalid-function.html

@@ -0,0 +1 @@
+<button onclick="{&quot;button&quot;:{}};"></button>

test/diff/fixtures/first/invalid-json.html

@@ -0,0 +1 @@
+<button data-bem="{&quot;button&quot;:{invalid}}"></button>

test/diff/fixtures/second/invalid-function.html

@@ -0,0 +1 @@
+<button onclick="undefined"></button>

test/diff/fixtures/second/invalid-json.html

@@ -0,0 +1 @@
+<button data-bem="undefined"></button>

test/diff/getDiffText.js

@@ -2,7 +2,7 @@ var diffLoger = require('../../lib/logger');
 
 require('colors');
 
-describe('\'diffHtml\'', function () {
+describe('\'getDiffText\'', function () {
     it('must return an empty string', function () {
         var inp = [ {
                 value: 'text',

test/diff/isEqual.js

@@ -47,12 +47,19 @@ describe('\'isEqual\'', function () {
     });
 
     it('must sort values of attributes as JSON when the content is not a function', function () {
-        var htmlDiffer = new HtmlDiffer({ compareAttributesAsJSON: [ 'a', { name: 'b', isFunction: false }] }),
+        var htmlDiffer = new HtmlDiffer({ compareAttributesAsJSON: ['a', { name: 'b', isFunction: false }] }),
             files = readFiles('sort-values-in-json-format');
 
         htmlDiffer.isEqual(files.html1, files.html2).must.be.true();
     });
 
+    it('must handle invalid JSON', function () {
+        var htmlDiffer = new HtmlDiffer({ compareAttributesAsJSON: ['data-bem'] }),
+            files = readFiles('invalid-json');
+
+        htmlDiffer.isEqual(files.html1, files.html2).must.be.true();
+    });
+
     it('must sort values of attributes as JSON when the content is a function', function () {
         var options = {
                 compareAttributesAsJSON: [
@@ -66,6 +73,14 @@ describe('\'isEqual\'', function () {
         htmlDiffer.isEqual(files.html1, files.html2).must.be.true();
     });
 
+    it('must handle invalid function', function () {
+        var options = { compareAttributesAsJSON: [{ name: 'onclick', isFunction: true }] },
+            htmlDiffer = new HtmlDiffer(options),
+            files = readFiles('invalid-function');
+
+        htmlDiffer.isEqual(files.html1, files.html2).must.be.true();
+    });
+
     it('must work option \'ignoreAttributes\'', function () {
         var htmlDiffer = new HtmlDiffer({ ignoreAttributes: ['id', 'for'] }),
             files = readFiles('ignore-attributes');