Merge pull request #156 from remarkablemark/test/coverage

test: refactor and add missing tests, get coverage to 100%

Author: remarkablemark

.travis.yml

@@ -12,7 +12,7 @@ script:
   - npm run build
   - npm run benchmark
 after_success:
-  - npm run coveralls
+  - npx nyc report --reporter=text-lcov | npx coveralls
 cache:
   directories:
     - node_modules

lib/attributes-to-props.js

@@ -68,26 +68,24 @@ function attributesToProps(attributes) {
 }
 
 /**
- * Converts CSS style string to JS style object.
+ * Converts inline CSS style to POJO (Plain Old JavaScript Object).
  *
- * @param  {String} style - The CSS style.
- * @return {Object}       - The JS style object.
+ * @param  {String} style - The inline CSS style.
+ * @return {Object}       - The style object.
  */
 function cssToJs(style) {
-  if (typeof style !== 'string') {
-    throw new TypeError('First argument must be a string.');
+  var styleObject = {};
+
+  if (style) {
+    styleToObject(style, function(property, value) {
+      // skip CSS comment
+      if (property && value) {
+        styleObject[camelCase(property)] = value;
+      }
+    });
   }
 
-  var styleObj = {};
-
-  styleToObject(style, function(property, value) {
-    // skip if it's a comment node
-    if (property && value) {
-      styleObj[camelCase(property)] = value;
-    }
-  });
-
-  return styleObj;
+  return styleObject;
 }
 
 module.exports = attributesToProps;

package.json

@@ -10,7 +10,6 @@
     "build:min": "cross-env NODE_ENV=production rollup --config --file dist/html-react-parser.min.js --sourcemap",
     "build:unmin": "cross-env NODE_ENV=development rollup --config --file dist/html-react-parser.js",
     "clean": "rimraf dist",
-    "coveralls": "nyc report --reporter=text-lcov | coveralls",
     "lint": "eslint --ignore-path .gitignore --ignore-pattern /examples/ .",
     "lint:dts": "dtslint .",
     "lint:fix": "npm run lint -- --fix",
@@ -45,7 +44,6 @@
     "@commitlint/config-conventional": "^8.2.0",
     "@types/react": "^16.9.11",
     "benchmark": "^2.1.4",
-    "coveralls": "^3.0.7",
     "cross-env": "^6.0.3",
     "dtslint": "^2.0.0",
     "eslint": "^6.6.0",

test/attributes-to-props.js

@@ -171,8 +171,19 @@ describe('attributes-to-props', () => {
     });
   });
 
+  // cssToJs
   describe('style', () => {
-    it('converts inline style to object', () => {
+    it('parses empty inline style to object', () => {
+      assert.deepEqual(attributesToProps({ style: '' }), { style: {} });
+    });
+
+    it('does not parse CSS comment', () => {
+      assert.deepEqual(attributesToProps({ style: '/* comment */' }), {
+        style: {}
+      });
+    });
+
+    it('parses inline style to object', () => {
       assert.deepEqual(
         attributesToProps({
           style:
@@ -222,29 +233,6 @@ describe('attributes-to-props', () => {
           style: undefined
         }
       );
-
-      assert.deepEqual(
-        attributesToProps({
-          style: ''
-        }),
-        {
-          style: {}
-        }
-      );
-    });
-
-    [Object, Array, Number, Date, Function].forEach(type => {
-      it(`throws an error when attributes.style=${type.name}`, () => {
-        assert.throws(
-          () => {
-            attributesToProps({ style: type });
-          },
-          {
-            name: 'TypeError',
-            message: 'First argument must be a string.'
-          }
-        );
-      });
     });
   });
 

test/dom-to-react.js

@@ -1,21 +1,11 @@
 const assert = require('assert');
 const React = require('react');
-const Preact = require('preact');
 const htmlToDOM = require('html-dom-parser');
 const domToReact = require('../lib/dom-to-react');
 const { data, render } = require('./helpers/');
 const utilities = require('../lib/utilities');
 
-describe('dom-to-react parser', () => {
-  let actualReactVersion;
-  beforeEach(() => {
-    actualReactVersion = React.version;
-  });
-
-  afterEach(() => {
-    React.version = actualReactVersion;
-  });
-
+describe('dom-to-react', () => {
   it('converts single DOM node to React', () => {
     const html = data.html.single;
     const reactElement = domToReact(htmlToDOM(html));
@@ -39,7 +29,7 @@ describe('dom-to-react parser', () => {
     ]);
   });
 
-  // https://facebook.github.io/react/docs/forms.html#why-textarea-value
+  // https://reactjs.org/docs/forms.html#the-textarea-tag
   it('converts <textarea> correctly', () => {
     const html = data.html.textarea;
     const reactElement = domToReact(htmlToDOM(html));
@@ -131,7 +121,7 @@ describe('dom-to-react parser', () => {
     ]);
   });
 
-  it("handles svg's with a viewBox", () => {
+  it('converts SVG element with viewBox attribute', () => {
     const html = data.svg.simple;
     const reactElement = domToReact(
       htmlToDOM(html, { lowerCaseAttributeNames: false })
@@ -160,47 +150,61 @@ describe('dom-to-react parser', () => {
     );
   });
 
-  it('handles using a custom component library', () => {
-    const html = data.html.single;
-    const preactElement = domToReact(htmlToDOM(html), { library: Preact });
+  describe('library', () => {
+    const Preact = require('preact');
+
+    it('converts with Preact instead of React', () => {
+      const html = data.html.single;
+      const preactElement = domToReact(htmlToDOM(html), { library: Preact });
 
-    assert.deepEqual(preactElement, Preact.createElement('p', {}, 'foo'));
+      assert.deepEqual(preactElement, Preact.createElement('p', {}, 'foo'));
+    });
   });
 
-  it('does not modify keys for replacement if it has one', () => {
-    const html = [data.html.single, data.html.customElement].join('');
+  describe('replace', () => {
+    it("does not set key if there's 1 node", () => {
+      const replaceElement = React.createElement('p');
+      const reactElement = domToReact(htmlToDOM(data.html.single), {
+        replace: () => replaceElement
+      });
+      assert.deepEqual(reactElement, replaceElement);
+    });
 
-    const reactElements = domToReact(htmlToDOM(html), {
-      replace: node => {
-        if (node.name === 'p') {
-          return React.createElement('p', {}, 'replaced foo');
-        }
-        if (node.name === 'custom-button') {
-          return React.createElement(
-            'custom-button',
-            {
-              key: 'myKey',
-              class: 'myClass',
-              'custom-attribute': 'replaced value'
-            },
-            null
-          );
+    it("does not modify keys if it's already set", () => {
+      const html = [data.html.single, data.html.customElement].join('');
+
+      const reactElements = domToReact(htmlToDOM(html), {
+        replace: node => {
+          if (node.name === 'p') {
+            return React.createElement('p', {}, 'replaced foo');
+          }
+          if (node.name === 'custom-button') {
+            return React.createElement(
+              'custom-button',
+              {
+                key: 'myKey',
+                class: 'myClass',
+                'custom-attribute': 'replaced value'
+              },
+              null
+            );
+          }
         }
-      }
+      });
+
+      assert.deepEqual(reactElements, [
+        React.createElement('p', { key: 0 }, 'replaced foo'),
+        React.createElement(
+          'custom-button',
+          {
+            key: 'myKey',
+            class: 'myClass',
+            'custom-attribute': 'replaced value'
+          },
+          null
+        )
+      ]);
     });
-
-    assert.deepEqual(reactElements, [
-      React.createElement('p', { key: 0 }, 'replaced foo'),
-      React.createElement(
-        'custom-button',
-        {
-          key: 'myKey',
-          class: 'myClass',
-          'custom-attribute': 'replaced value'
-        },
-        null
-      )
-    ]);
   });
 
   describe('when React <16', () => {

test/html-to-react.js

@@ -18,26 +18,26 @@ describe('html-to-react', () => {
     });
 
     it('returns string if it cannot be parsed as HTML', () => {
-      assert.equal(parse('foo'), 'foo');
+      assert.strictEqual(parse('foo'), 'foo');
     });
 
     it('converts single HTML element to React', () => {
       const html = data.html.single;
       const reactElement = parse(html);
-      assert.equal(render(reactElement), html);
+      assert.strictEqual(render(reactElement), html);
     });
 
     it('converts single HTML element and ignores comment', () => {
       const html = data.html.single;
       // comment should be ignored
       const reactElement = parse(html + data.html.comment);
-      assert.equal(render(reactElement), html);
+      assert.strictEqual(render(reactElement), html);
     });
 
     it('converts multiple HTML elements to React', () => {
       const html = data.html.multiple;
       const reactElements = parse(html);
-      assert.equal(
+      assert.strictEqual(
         render(React.createElement('div', {}, reactElements)),
         '<div>' + html + '</div>'
       );
@@ -46,32 +46,32 @@ describe('html-to-react', () => {
     it('converts complex HTML to React', () => {
       const html = data.html.complex;
       const reactElement = parse(data.html.doctype + html);
-      assert.equal(render(reactElement), html);
+      assert.strictEqual(render(reactElement), html);
     });
 
     it('converts empty <script> to React', () => {
       const html = '<script></script>';
       const reactElement = parse(html);
-      assert.equal(render(reactElement), html);
+      assert.strictEqual(render(reactElement), html);
     });
 
     it('converts empty <style> to React', () => {
       const html = '<style></style>';
       const reactElement = parse(html);
-      assert.equal(render(reactElement), html);
+      assert.strictEqual(render(reactElement), html);
     });
 
     it('converts SVG to React', () => {
       const svg = data.svg.complex;
       const reactElement = parse(svg);
-      assert.equal(render(reactElement), svg);
+      assert.strictEqual(render(reactElement), svg);
     });
 
     it('decodes HTML entities', () => {
       const encodedEntities = 'asdf &amp; &yuml; &uuml; &apos;';
       const decodedEntities = "asdf & ÿ ü '";
       const reactElement = parse('<i>' + encodedEntities + '</i>');
-      assert.equal(reactElement.props.children, decodedEntities);
+      assert.strictEqual(reactElement.props.children, decodedEntities);
     });
   });
 
@@ -86,7 +86,7 @@ describe('html-to-react', () => {
             }
           }
         });
-        assert.equal(
+        assert.strictEqual(
           render(reactElement),
           html.replace('<title>Title</title>', '<title>Replaced Title</title>')
         );
@@ -118,6 +118,6 @@ describe('html-to-react', () => {
 
 describe('dom-to-react', () => {
   it('exports domToReact', () => {
-    assert.equal(parse.domToReact, require('../lib/dom-to-react'));
+    assert.strictEqual(parse.domToReact, require('../lib/dom-to-react'));
   });
 });