[testing] Use bem/html-differ to perform tests

package.json

@@ -23,14 +23,15 @@
     "html"
   ],
   "devDependencies": {
-    "markdown": "*",
-    "showdown": "*",
-    "markdown-it": "*",
     "front-matter": "^2.3.0",
     "glob-to-regexp": "0.3.0",
     "gulp": "^3.8.11",
+    "gulp-concat": "^2.5.2",
     "gulp-uglify": "^1.1.0",
-    "gulp-concat": "^2.5.2"
+    "html-differ": "^1.3.4",
+    "markdown": "*",
+    "markdown-it": "*",
+    "showdown": "*"
   },
   "scripts": {
     "test": "node test",

test/index.js

@@ -27,11 +27,8 @@ function load(options) {
     , file
     , name
     , content
-    , regex
-    , skip
-    , glob = g2r(options.glob || "*", { extended: true })
+    , glob = g2r(options.glob || '*', { extended: true })
     , i
-    , j
     , l;
 
   list = fs
@@ -44,7 +41,7 @@ function load(options) {
   l = list.length;
 
   for (i = 0; i < l; i++) {
-    name = path.basename(list[i], ".md");
+    name = path.basename(list[i], '.md');
     if (glob.test(name)) {
       file = path.join(dir, list[i]);
       content = fm(fs.readFileSync(file, 'utf8'));
@@ -89,11 +86,14 @@ function load(options) {
 function runTests(engine, options) {
   if (typeof engine !== 'function') {
     options = engine;
-    engine = null;
+    engine = marked;
   }
 
-  var engine = engine || marked
-    , options = options || {}
+  options = options || {};
+
+  var HtmlDiffer = require('html-differ').HtmlDiffer
+    , htmlDiffer = new HtmlDiffer()
+    , diffLogger = require('html-differ/lib/logger')
     , files = options.files || load(options)
     , complete = 0
     , failed = 0
@@ -106,14 +106,12 @@ function runTests(engine, options) {
     , opts
     , text
     , html
-    , j
-    , l;
+    , diff;
 
   if (options.marked) {
     marked.setOptions(options.marked);
   }
 
-main:
   for (; i < len; i++) {
     filename = keys[i];
     file = files[filename];
@@ -138,49 +136,27 @@ main:
     }
 
     try {
-      text = engine(file.text).replace(/\s/g, '');
-      html = file.html.replace(/\s/g, '');
+      text = engine(file.text);
+      html = file.html;
     } catch (e) {
       console.log('%s failed.', filename);
       throw e;
     }
 
-    j = 0;
-    l = html.length;
-
-    for (; j < l; j++) {
-      if (text[j] !== html[j]) {
-        failed++;
-        failures.push(filename);
-
-        text = text.substring(
-          Math.max(j - 30, 0),
-          Math.min(j + 30, text.length));
-
-        html = html.substring(
-          Math.max(j - 30, 0),
-          Math.min(j + 30, html.length));
-
-        console.log(
-          '\n#%d. %s failed at offset %d. Near: "%s".\n',
-          i + 1, filename, j, text);
-
-        console.log('\nGot:\n%s\n', text.trim() || text);
-        console.log('\nExpected:\n%s\n', html.trim() || html);
-
-        if (options.stop) {
-          break main;
-        }
-
-        continue main;
-      }
+    diff = htmlDiffer.diffHtml(text, html);
+    if (!htmlDiffer.isEqual(text, html)) {
+      failed++;
+      failures.push(filename);
+      console.log('#%d. %s failed.', i + 1, filename);
+      diffLogger.logDiffText(diff);
+      if (options.stop) break;
+    } else {
+      complete++;
+      console.log('#%d. %s completed.', i + 1, filename);
     }
-
-    complete++;
-    console.log('#%d. %s completed.', i + 1, filename);
   }
 
-  console.log('%d/%d tests completed successfully.', complete, len);
+  console.log('\n%d/%d tests completed successfully.', complete, len);
   if (failed) console.log('%d/%d tests failed.', failed, len);
 
   return !failed;
@@ -215,8 +191,8 @@ function bench(name, files, func) {
  */
 
 function runBench(options) {
-  var options = options || {}
-    , files = load(options);
+  options = options || {}
+  var files = load(options);
 
   // Non-GFM, Non-pedantic
   marked.setOptions({
@@ -337,9 +313,7 @@ function fix() {
   ['compiled_tests', 'original', 'new'].forEach(function(dir) {
     try {
       fs.mkdirSync(path.resolve(__dirname, dir), 0o755);
-    } catch (e) {
-      ;
-    }
+    } catch (e) { }
   });
 
   // rm -rf tests
@@ -364,8 +338,8 @@ function fix() {
   fs.readdirSync(dir).filter(function(file) {
     return path.extname(file) === '.html';
   }).forEach(function(file) {
-    var file = path.join(dir, file)
-      , html = fs.readFileSync(file, 'utf8');
+    file = path.join(dir, file);
+    var html = fs.readFileSync(file, 'utf8');
 
     // fix unencoded quotes
     html = html
@@ -425,9 +399,9 @@ function fix() {
  */
 
 function parseArg(argv) {
-  var argv = process.argv.slice(2)
-    , options = {}
-    , opt = ""
+  argv = process.argv.slice(2)
+  var options = {}
+    , opt = ''
     , orphans = []
     , arg;
 

test/new/main.html

@@ -1,4 +1,17 @@
-<h1 id="a-heading">A heading</h1> <p>Just a note, I&#39;ve found that I can&#39;t test my markdown parser vs others. For example, both markdown.js and showdown code blocks in lists wrong. They&#39;re  also completely <a href="http://google.com/" title="Google">inconsistent</a> with regards to paragraphs in list items.</p> <p>A link. Not anymore.</p> <aside>This will make me fail the test because
-markdown.js doesnt acknowledge arbitrary html blocks =/</aside> <ul><li><p>List Item 1</p></li><li><p>List Item 2 </p><ul><li>New List Item 1 Hi, this is a list item.</li><li>New List Item 2 Another item <pre><code>Code goes here.
-Lots of it...</code></pre></li><li>New List Item 3 The last item</li></ul></li><li><p>List Item 3 The final item.</p></li><li><p>List Item 4 The real final item.</p></li></ul> <p>Paragraph.</p> <blockquote><ul><li>bq Item 1</li><li>bq Item 2 <ul><li>New bq Item 1</li><li>New bq Item 2 Text here</li></ul></li></ul></blockquote> <hr> <blockquote><p> Another blockquote!  I really need to get  more creative with  mockup text..  markdown.js breaks here again</p></blockquote> <h2 id="another-heading">Another Heading</h2> <p>Hello <em>world</em>. Here is a <a href="//hello">link</a>. And an image <img src="src" alt="alt">.</p> <pre><code>Code goes here.
+<h1 id="a-heading">A heading</h1> <p>Just a note, I&#39;ve found that I can&#39;t test my markdown parser vs others.
+For example, both markdown.js and showdown code blocks in lists wrong. They&#39;re
+also completely <a href="http://google.com/" title="Google">inconsistent</a> with regards to paragraphs in list items.</p> <p>A link. Not anymore.</p> <aside>This will make me fail the test because
+markdown.js doesnt acknowledge arbitrary html blocks =/</aside> <ul><li><p>List Item 1</p></li><li><p>List Item 2 </p><ul><li>New List Item 1
+Hi, this is a list item.</li><li>New List Item 2
+Another item <pre><code>Code goes here.
+Lots of it...</code></pre></li><li>New List Item 3
+The last item</li></ul></li><li><p>List Item 3
+The final item.</p></li><li><p>List Item 4
+The real final item.</p></li></ul> <p>Paragraph.</p> <blockquote><ul><li>bq Item 1</li><li>bq Item 2 <ul><li>New bq Item 1</li><li>New bq Item 2
+Text here</li></ul></li></ul></blockquote> <hr> <blockquote><p> Another blockquote!
+I really need to get
+more creative with
+mockup text..
+markdown.js breaks here again</p></blockquote> <h2 id="another-heading">Another Heading</h2> <p>Hello <em>world</em>. Here is a <a href="//hello">link</a>.
+And an image <img src="src" alt="alt">.</p> <pre><code>Code goes here.
 Lots of it...</code></pre>

test/new/uppercase_hex.html

@@ -1,2 +1,2 @@
-<p>lowerclickmelower
-upperclickmeupper</p>
+<p>lowerclick melower
+upperclick meupper</p>