Rename test mocks file and update tests

remarkablemark · remarkablemark · commit 07c6847ce4b3 · 2016-10-14T12:36:54.000-04:00
- Rename `test/data.json` to `test/helpers/mocks.json`
- Require mocks in test helpers index
- Add a test for doctype (should be skipped and not parsed)
- Tidy tests
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -8,16 +8,18 @@ var React = require('react');
 var htmlToDOM = require('html-dom-parser');
 var domToReact = require('../lib/dom-to-react');
 var helpers = require('./helpers/');
-var data = require('./data');
+var mocks = helpers.mocks;
+var render = helpers.render;
 
 /**
  * Tests for `domToReact`.
  */
 describe('dom-to-react parser', function() {
 
     it('converts single DOM node to React', function() {
-        var html = data.html.single;
+        var html = mocks.html.single;
         var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -26,12 +28,14 @@ describe('dom-to-react parser', function() {
     });
 
     it('converts multiple DOM nodes to React', function() {
-        var html = data.html.multiple;
+        var html = mocks.html.multiple;
         var reactElements = domToReact(htmlToDOM(html));
+
         reactElements.forEach(function(reactElement) {
             assert(React.isValidElement(reactElement));
             assert(reactElement.key);
         });
+
         assert.deepEqual(
             reactElements,
             [
@@ -43,8 +47,9 @@ describe('dom-to-react parser', function() {
 
     // https://facebook.github.io/react/docs/forms.html#why-textarea-value
     it('converts <textarea> correctly', function() {
-        var html = data.html.textarea;
+        var html = mocks.html.textarea;
         var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -55,8 +60,9 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not escape <script> content', function() {
-        var html = data.html.script;
+        var html = mocks.html.script;
         var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -69,8 +75,9 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not escape <style> content', function() {
-        var html = data.html.style;
+        var html = mocks.html.style;
         var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -83,32 +90,40 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not have `children` for void elements', function() {
-        var html = data.html.img;
+        var html = mocks.html.img;
         var reactElement = domToReact(htmlToDOM(html));
         assert(!reactElement.props.children);
     });
 
     it('does not throw an error for void elements', function() {
-        var html = data.html.void;
+        var html = mocks.html.void;
         var reactElements = domToReact(htmlToDOM(html));
         assert.doesNotThrow(function() {
-            helpers.render(React.createElement('div', {}, reactElements));
+            render(React.createElement('div', {}, reactElements));
         });
     });
 
-    it('skips HTML comments', function() {
-        var html = [data.html.single, data.html.comment, data.html.single].join('');
+    it('skips doctype and comments', function() {
+        var html = [
+            mocks.html.doctype,
+            mocks.html.single,
+            mocks.html.comment,
+            mocks.html.single
+        ].join('');
+
         var reactElements = domToReact(htmlToDOM(html));
         reactElements.forEach(function(reactElement) {
             assert(React.isValidElement(reactElement));
             assert(reactElement.key);
         });
+
         assert.deepEqual(
             reactElements,
             [
-                React.createElement('p', { key: 0 }, 'foo'),
+                // doctype
+                React.createElement('p', { key: 1 }, 'foo'),
                 // comment is in the middle
-                React.createElement('p', { key: 2 }, 'foo')
+                React.createElement('p', { key: 3 }, 'foo')
             ]
         );
     });
diff --git a/test/helpers/index.js b/test/helpers/index.js
@@ -23,5 +23,6 @@ function render(reactElement) {
  * Export assert helpers.
  */
 module.exports = {
-    render: render
+    render: render,
+    mocks: require('./mocks')
 };
diff --git a/test/helpers/mocks.json b/test/helpers/mocks.json
@@ -10,7 +10,8 @@
     "style": "<style>body > .foo { color: #f00; }</style>",
     "img": "<img src=\"http://stat.ic/img.jpg\" alt=\"Image\"/>",
     "void": "<link/><meta/><img/><br/><hr/><input/>",
-    "comment": "<!-- comment -->"
+    "comment": "<!-- comment -->",
+    "doctype": "<!DOCTYPE html>"
   },
   "svg": {
     "complex": "<svg height=\"400\" width=\"450\"><path id=\"lineAB\" d=\"M 100 350 l 150 -300\" stroke=\"red\" stroke-width=\"3\" fill=\"none\"></path><g stroke=\"black\" stroke-width=\"3\" fill=\"black\"><circle id=\"pointA\" cx=\"100\" cy=\"350\" r=\"3\"></circle></g><g font-size=\"30\" font-family=\"sans-serif\" fill=\"black\" stroke=\"none\" text-anchor=\"middle\"><text x=\"100\" y=\"350\" dx=\"-30\">A</text></g>Your browser does not support inline SVG.</svg>"
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -7,7 +7,8 @@ var assert = require('assert');
 var React = require('react');
 var Parser = require('../');
 var helpers = require('./helpers/');
-var data = require('./data');
+var mocks = helpers.mocks;
+var render = helpers.render;
 
 /**
  * Tests for `htmlToReact`.
@@ -32,49 +33,49 @@ describe('html-to-react', function() {
         });
 
         it('converts single HTML element to React', function() {
-            var html = data.html.single;
+            var html = mocks.html.single;
             var reactElement = Parser(html);
-            assert.equal(helpers.render(reactElement), html);
+            assert.equal(render(reactElement), html);
         });
 
         it('converts single HTML element and ignores comment', function() {
-            var html = data.html.single;
+            var html = mocks.html.single;
             // comment should be ignored
-            var reactElement = Parser(html + data.html.comment);
-            assert.equal(helpers.render(reactElement), html);
+            var reactElement = Parser(html + mocks.html.comment);
+            assert.equal(render(reactElement), html);
         });
 
         it('converts multiple HTML elements to React', function() {
-            var html = data.html.multiple;
+            var html = mocks.html.multiple;
             var reactElements = Parser(html);
             assert.equal(
-                helpers.render(React.createElement('div', {}, reactElements)),
+                render(React.createElement('div', {}, reactElements)),
                 '<div>' + html + '</div>'
             );
         });
 
         it('converts complex HTML to React', function() {
-            var html = data.html.complex;
-            var reactElement = Parser(html);
-            assert.equal(helpers.render(reactElement), html);
+            var html = mocks.html.complex;
+            var reactElement = Parser(mocks.html.doctype + html);
+            assert.equal(render(reactElement), html);
         });
 
         it('converts empty <script> to React', function() {
             var html = '<script></script>';
             var reactElement = Parser(html);
-            assert.equal(helpers.render(reactElement), html);
+            assert.equal(render(reactElement), html);
         });
 
         it('converts empty <style> to React', function() {
             var html = '<style></style>';
             var reactElement = Parser(html);
-            assert.equal(helpers.render(reactElement), html);
+            assert.equal(render(reactElement), html);
         });
 
         it('converts SVG to React', function() {
-            var svg = data.svg.complex;
+            var svg = mocks.svg.complex;
             var reactElement = Parser(svg);
-            assert.equal(helpers.render(reactElement), svg);
+            assert.equal(render(reactElement), svg);
         });
 
     });
@@ -87,7 +88,7 @@ describe('html-to-react', function() {
         describe('replace', function() {
 
             it('overrides the element if replace is valid', function() {
-                var html = data.html.complex;
+                var html = mocks.html.complex;
                 var reactElement = Parser(html, {
                     replace: function(node) {
                         if (node.name === 'title') {
@@ -96,13 +97,13 @@ describe('html-to-react', function() {
                     }
                 });
                 assert.equal(
-                    helpers.render(reactElement),
+                    render(reactElement),
                     html.replace('<title>Title</title>', '<title>Replaced Title</title>')
                 );
             });
 
             it('does not override the element if replace is invalid', function() {
-                var html = data.html.complex;
+                var html = mocks.html.complex;
                 var reactElement = Parser(html, {
                     replace: function(node) {
                         if (node.attribs && node.attribs.id === 'header') {
@@ -114,7 +115,7 @@ describe('html-to-react', function() {
                     }
                 });
                 assert.notEqual(
-                    helpers.render(reactElement),
+                    render(reactElement),
                     html.replace(
                         '<header id="header">Header</header>',
                         '<h1>Heading</h1>'
