Add tests for HTML to DOM parsing on the client

remarkablemark · remarkablemark · commit 26213ba2c40f · 2016-08-22T16:09:57.000-04:00
- Organize Mocha tests to differentiate between environments
  (node versus browser)
- Add tests to confirm `formatDOM` (client) works as expected and
  returns the same output as `parseDOM` (server)
- Update HTML mocks with more cases
- Save `jsdomify` to devDependencies.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "htmlparser2": "^3.9.1"
   },
   "devDependencies": {
+    "jsdomify": "^2.1.0",
     "mocha": "^3.0.2",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
diff --git a/test/data.json b/test/data.json
@@ -2,7 +2,9 @@
   "html": {
     "single": "<p>foo</p>",
     "multiple": "<p>foo</p><p>bar</p>",
-    "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
+    "nested": "<div><p>foo <em>bar</em></p></div>",
+    "attributes": "<hr id=\"foo\" class=\"bar baz\" style=\"background: #fff; text-align: center;\" data-foo=\"bar\" />",
+    "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px;\">Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
     "textarea": "<textarea>foo</textarea>",
     "script": "<script>alert(1 < 2);</script>",
     "comment": "<!-- comment -->"
diff --git a/test/html-to-dom.js b/test/html-to-dom.js
@@ -5,22 +5,58 @@
  */
 var assert = require('assert');
 var util = require('util');
-var parseDOM = require('../lib/html-to-dom');
+var jsdomify = require('jsdomify').default;
 var htmlparser = require('htmlparser2');
+var parseDOM = require('../lib/html-to-dom');
+var formatDOM = require('../lib/html-to-dom-client');
+var helpers = require('./helpers/');
 var data = require('./data');
 
 /**
- * Tests for `parseDOM`.
+ * Tests for HTML to DOM parser.
  */
-describe('html-to-dom parser', function() {
-
-    it('works the same as `require("htmlparser2").parseDOM`', function() {
-        var html = data.html.complex;
-        // use `util.inspect` to resolve circular references
-        assert.equal(
-            util.inspect(parseDOM(html), { showHidden: true, depth: null }),
-            util.inspect(htmlparser.parseDOM(html), { showHidden: true, depth: null })
-        );
+describe('html-to-dom', function() {
+
+    /**
+     * Node environment.
+     */
+    describe('server parser', function() {
+
+        it('works the same as `require("htmlparser2").parseDOM`', function() {
+            var html = data.html.complex;
+            // use `util.inspect` to resolve circular references
+            assert.equal(
+                util.inspect(parseDOM(html), { showHidden: true, depth: null }),
+                util.inspect(htmlparser.parseDOM(html), { showHidden: true, depth: null })
+            );
+        });
+
+    });
+
+    /**
+     * Browser environment.
+     */
+    describe('client parser', function() {
+
+        // setup mock browser environment
+        before(function() {
+            jsdomify.create();
+        });
+
+        // teardown mock browser environment
+        after(function() {
+            jsdomify.destroy();
+        });
+
+        it('formats the nodes like `htmlparser2.parseDOM`', function() {
+            var html = data.html.attributes + data.html.nested + data.html.comment + data.html.script;
+            var root = document.createElement('div');
+            root.innerHTML = html;
+            var clientNodes = formatDOM(root.childNodes);
+            var serverNodes = parseDOM(html);
+            helpers.deepEqualCircular(clientNodes, serverNodes);
+        });
+
     });
 
 });
