Merge pull request #32 from remarkablemark/chore/improve-docs-and-tests

chore: improve docs and tests, refactor code
remarkablemark · Nov 29, 2020 · 375bd37 · 375bd37
2 parents 5d07218 + 3467e1f
commit 375bd37
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 51 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -1,4 +1,4 @@
-<textarea cols="50" rows="5"><div>text</div></textarea>
+<textarea cols="50" rows="5"><p>Hello, world!</p></textarea>
 <pre><code></code></pre>
 <script src="../dist/html-dom-parser.min.js"></script>
 <script>

diff --git a/karma.conf.js b/karma.conf.js
@@ -13,7 +13,7 @@ module.exports = config => {
       'test/helpers/*.js'
     ],
     exclude: ['lib/html-to-dom-server.js'],
-    browsers: ['PhantomJS', 'Chrome'],
+    browsers: ['Chrome'],
     preprocessors: {
       'dist/**/*.js': ['commonjs'],
       'lib/**/*.js': ['commonjs'],

diff --git a/lib/html-to-dom-client.js b/lib/html-to-dom-client.js
@@ -7,12 +7,12 @@ var isIE9 = utilities.isIE(9);
 var DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/; // e.g., <!doctype html>
 
 /**
- * Parses HTML and reformats DOM nodes output.
+ * Parses HTML string to DOM nodes in browser.
  *
- * @param  {String} html - The HTML string.
- * @return {Array}       - The formatted DOM nodes.
+ * @param  {String} html - HTML string.
+ * @return {Object[]}    - DOM nodes.
  */
-function parseDOM(html) {
+function HTMLDOMParser(html) {
   if (typeof html !== 'string') {
     throw new TypeError('First argument must be a string');
   }
@@ -38,4 +38,4 @@ function parseDOM(html) {
   return formatDOM(domparser(html), null, directive);
 }
 
-module.exports = parseDOM;
+module.exports = HTMLDOMParser;
diff --git a/lib/html-to-dom-server.js b/lib/html-to-dom-server.js
@@ -2,16 +2,16 @@ var Parser = require('htmlparser2/lib/Parser');
 var DomHandler = require('domhandler');
 
 /**
- * Parses HTML string to DOM nodes (server).
+ * Parses HTML string to DOM nodes in Node.js.
  *
  * This is the same method as `require('htmlparser2').parseDOM`
  * https://github.com/fb55/htmlparser2/blob/v3.9.1/lib/index.js#L39-L43
  *
- * @param  {String} html      - The HTML string.
- * @param  {Object} [options] - The parser options.
- * @return {Array}            - The DOM nodes.
+ * @param  {String} html      - HTML string.
+ * @param  {Object} [options] - Parser options.
+ * @return {DomElement[]}     - DOM nodes.
  */
-function parseDOM(html, options) {
+function HTMLDOMParser(html, options) {
   if (typeof html !== 'string') {
     throw new TypeError('First argument must be a string.');
   }
@@ -25,4 +25,4 @@ function parseDOM(html, options) {
   return handler.dom;
 }
 
-module.exports = parseDOM;
+module.exports = HTMLDOMParser;
diff --git a/lib/utilities.js b/lib/utilities.js
@@ -10,7 +10,7 @@ for (var i = 0, len = CASE_SENSITIVE_TAG_NAMES.length; i < len; i++) {
 /**
  * Gets case-sensitive tag name.
  *
- * @param  {String}           tagName - The lowercase tag name.
+ * @param {String} tagName - Tag name in lowercase.
  * @return {String|undefined}
  */
 function getCaseSensitiveTagName(tagName) {
@@ -53,13 +53,13 @@ function formatTagName(tagName) {
 /**
  * Formats the browser DOM nodes to mimic the output of `htmlparser2.parseDOM()`.
  *
- * @param  {NodeList} nodes        - The DOM nodes.
- * @param  {Object}   [parentObj]  - The formatted parent node.
- * @param  {String}   [directive]  - The directive.
- * @return {Object[]}              - The formatted DOM object.
+ * @param  {NodeList} nodes        - DOM nodes.
+ * @param  {Object}   [parentNode] - Formatted parent node.
+ * @param  {String}   [directive]  - Directive.
+ * @return {Object[]}              - Formatted DOM object.
  */
-function formatDOM(nodes, parentObj, directive) {
-  parentObj = parentObj || null;
+function formatDOM(nodes, parentNode, directive) {
+  parentNode = parentNode || null;
 
   var result = [];
   var node;
@@ -73,7 +73,7 @@ function formatDOM(nodes, parentObj, directive) {
     nodeObj = {
       next: null,
       prev: result[i - 1] || null,
-      parent: parentObj
+      parent: parentNode
     };
 
     // set the next node for the previous node (if applicable)
@@ -129,7 +129,7 @@ function formatDOM(nodes, parentObj, directive) {
       type: 'directive',
       next: result[0] ? result[0] : null,
       prev: null,
-      parent: parentObj
+      parent: parentNode
     });
 
     if (result[1]) {
@@ -141,10 +141,10 @@ function formatDOM(nodes, parentObj, directive) {
 }
 
 /**
- * Detects IE with or without version.
+ * Detects if browser is Internet Explorer.
  *
- * @param  {Number}  [version] - The IE version to detect.
- * @return {Boolean}           - Whether IE or the version has been detected.
+ * @param {Number} [version] - IE version to detect.
+ * @return {Boolean}
  */
 function isIE(version) {
   if (version) {

diff --git a/package.json b/package.json
@@ -58,7 +58,6 @@
     "karma-commonjs": "^1.0.0",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
-    "karma-phantomjs-launcher": "^1.0.4",
     "lint-staged": "^10.5.2",
     "mocha": "^8.2.1",
     "mock-require": "^3.0.3",

diff --git a/test/cases/html.js b/test/cases/html.js
@@ -1,50 +1,36 @@
-// skip test cases where PhantomJS does not support `DOMParser.parseFromString`
-var isPhantomJS =
-  typeof navigator === 'object' && navigator.userAgent
-    ? /PhantomJS/i.test(navigator.userAgent)
-    : false;
-
 module.exports = [
   // html tags
   {
     name: 'empty html',
-    data: '<html></html>',
-    skip: isPhantomJS
+    data: '<html></html>'
   },
   {
     name: 'html with attribute',
-    data: '<html lang="en"></html>',
-    skip: isPhantomJS
+    data: '<html lang="en"></html>'
   },
   {
     name: 'html with empty head and body',
-    data: '<html><head></head><body></body></html>',
-    skip: isPhantomJS
+    data: '<html><head></head><body></body></html>'
   },
   {
     name: 'html with empty head',
-    data: '<html><head></head></html>',
-    skip: isPhantomJS
+    data: '<html><head></head></html>'
   },
   {
     name: 'html with empty body',
-    data: '<html><body></body></html>',
-    skip: isPhantomJS
+    data: '<html><body></body></html>'
   },
   {
     name: 'unclosed html and head tags',
-    data: '<html><head>',
-    skip: isPhantomJS
+    data: '<html><head>'
   },
   {
     name: 'unclosed html and body tags',
-    data: '<html><body>',
-    skip: isPhantomJS
+    data: '<html><body>'
   },
   {
     name: 'unclosed html, head, and body tags',
-    data: '<html><head><body>',
-    skip: isPhantomJS
+    data: '<html><head><body>'
   },
 
   // head and body tags
@@ -244,8 +230,7 @@ module.exports = [
   },
   {
     name: 'directive with html',
-    data: '<!DOCTYPE html><html></html>',
-    skip: isPhantomJS
+    data: '<!DOCTYPE html><html></html>'
   },
 
   // comment

diff --git a/test/cases/index.js b/test/cases/index.js
@@ -10,7 +10,7 @@ const htmlCases = require('./html');
  * @return {String}          - The file text.
  */
 function read(filepath) {
-  return fs.readFileSync(path.join(__dirname, filepath), 'utf8');
+  return fs.readFileSync(path.resolve(__dirname, filepath), 'utf8');
 }
 
 const html = [