istanbul-coverage-display - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

dist/index.cjs.js

@@ -32,2 +32,17 @@ 'use strict';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _inherits(subClass, superClass) {
@@ -84,5 +99,6 @@ if (typeof superClass !== "function" && superClass !== null) {
   fontSize: 16,
-  border: 0
+  border: 0,
+  borderRadius: 3
 };
-var Padding = 30;
+var TablePadding = 30;
 
@@ -101,3 +117,3 @@ var Coverage =
     _this.state = {
-      fileCoverages: []
+      treeNodes: []
     };
@@ -111,8 +127,28 @@ return _this;
       this.setState({
-        fileCoverages: []
+        treeNodes: []
       });
     }
   }, {
+    key: "getInitialSubData",
+    value: function getInitialSubData() {
+      return {
+        total: 0,
+        covered: 0
+      };
+    }
+  }, {
+    key: "getInitialData",
+    value: function getInitialData() {
+      return {
+        branches: this.getInitialSubData(),
+        functions: this.getInitialSubData(),
+        lines: this.getInitialSubData(),
+        statements: this.getInitialSubData()
+      };
+    }
+  }, {
     key: "handleShow",
     value: function handleShow() {
+      var _this2 = this;
+
       var map = libCoverage.createCoverageMap({});
@@ -134,6 +170,90 @@ map.merge(window.__coverage__);
       fileCoverages.forEach(function (fileCoverage) {
-        fileCoverage.key = fileCoverage.key.split('/').slice(minSlashes - 1).join('/');
+        var paths = fileCoverage.key.split('/').slice(minSlashes - 1);
+        fileCoverage.path = paths.join('/');
+        fileCoverage.parentPath = paths.length > 1 ? paths.slice(0, paths.length - 1).join('/') : rootPath;
+        fileCoverage.level = paths.length;
+        fileCoverage.name = paths[fileCoverage.level - 1];
+        fileCoverage.paths = paths;
+        fileCoverage.leaf = true;
       });
+      var id = 1;
+      var rootPath = '[Total]';
+      var rootNode = {
+        id: id++,
+        path: rootPath,
+        name: 'Total',
+        level: 0
+      };
+
+      var treeData = _defineProperty({}, rootNode.path, rootNode);
+
+      fileCoverages.forEach(function (fc) {
+        fc.id = id++;
+
+        if (fc.level === 1) {
+          fc.parentId = 1;
+          return;
+        }
+
+        var childNode = fc;
+
+        for (var i = fc.level - 2; i >= 0; i--) {
+          var paths = fc.paths.slice(0, i + 1);
+          var path = paths.join('/');
+          var node = treeData[path];
+
+          if (!node) {
+            node = {
+              id: id++,
+              path: path,
+              parentPath: paths.length > 1 ? paths.slice(0, paths.length - 1).join('/') : rootPath,
+              name: paths[paths.length - 1],
+              parentId: 1,
+              level: i + 1
+            };
+            treeData[path] = node;
+          }
+
+          childNode.parentId = node.id;
+          childNode = node;
+        }
+      });
+      var treeNodes = Object.values(treeData);
+      treeNodes = treeNodes.concat(fileCoverages);
+      treeNodes.sort(function (a, b) {
+        return a.level < b.level ? 1 : a.level > b.level ? -1 : 0;
+      });
+      treeNodes.forEach(function (treeNode) {
+        if (!treeNode.leaf) {
+          var children = treeNodes.filter(function (n) {
+            return n.parentId === treeNode.id;
+          });
+
+          var data = _this2.getInitialData();
+
+          children.forEach(function (c) {
+            data.branches.total += c.data.branches.total;
+            data.branches.covered += c.data.branches.covered;
+            data.functions.total += c.data.functions.total;
+            data.functions.covered += c.data.functions.covered;
+            data.lines.total += c.data.lines.total;
+            data.lines.covered += c.data.lines.covered;
+            data.statements.total += c.data.statements.total;
+            data.statements.covered += c.data.statements.covered;
+          });
+          data.branches.pct = data.branches.total ? Math.round(data.branches.covered * 100 / data.branches.total) : 100;
+          data.functions.pct = data.functions.total ? Math.round(data.functions.covered * 100 / data.functions.total) : 100;
+          data.lines.pct = data.lines.total ? Math.round(data.lines.covered * 100 / data.lines.total) : 100;
+          data.statements.pct = data.statements.total ? Math.round(data.statements.covered * 100 / data.statements.total) : 100;
+          treeNode.data = data;
+        }
+
+        treeNode.lineCount = treeNode.data.statements.total;
+        treeNode.branchPerc = treeNode.data.branches.pct;
+        treeNode.functionPerc = treeNode.data.functions.pct;
+        treeNode.linePerc = treeNode.data.lines.pct;
+        treeNode.stmtPerc = treeNode.data.statements.pct;
+      });
       this.setState({
-        fileCoverages: fileCoverages
+        treeNodes: treeNodes
       });
@@ -182,3 +302,3 @@ }
     value: function render() {
-      var fileCoverages = this.state.fileCoverages;
+      var treeNodes = this.state.treeNodes;
       var position = this.getPosition();
@@ -193,31 +313,27 @@ var showButtonStyle = Object.assign({}, BaseButtonStyle, position, {
       });
-      return React__default.createElement("div", null, fileCoverages.length ? React__default.createElement("div", {
+      var rootNode = treeNodes.find(function (n) {
+        return n.level === 0;
+      });
+      return React__default.createElement("div", null, rootNode ? React__default.createElement("div", {
         style: Object.assign({
           padding: 20,
-          backgroundColor: 'rgba(0,0,0,.12)',
+          backgroundColor: '#eee',
           position: 'fixed',
           zIndex: 10000
-        }, this.getPosition(Padding))
-      }, React__default.createElement("table", {
-        border: "1",
-        cellSpacing: "0",
-        style: {
-          maxHeight: 400,
-          overflow: 'scroll'
-        }
-      }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+        }, this.getPosition(TablePadding))
+      }, React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
         width: "200"
-      }, "File"), React__default.createElement("th", {
-        width: "50"
-      }, "Branches"), React__default.createElement("th", {
-        width: "50"
-      }, "Functions"), React__default.createElement("th", {
-        width: "50"
-      }, "Lines"), React__default.createElement("th", {
-        width: "50"
-      }, "Statements"))), React__default.createElement("tbody", null, fileCoverages.map(function (fileCoverage) {
-        return React__default.createElement("tr", {
-          key: fileCoverage.key
-        }, React__default.createElement("td", null, fileCoverage.key), React__default.createElement("td", null, fileCoverage.data.branches.pct), React__default.createElement("td", null, fileCoverage.data.functions.pct), React__default.createElement("td", null, fileCoverage.data.lines.pct), React__default.createElement("td", null, fileCoverage.data.statements.pct));
-      }))), React__default.createElement("div", {
+      }), React__default.createElement("th", {
+        width: "100"
+      }))), React__default.createElement("tbody", null, React__default.createElement("tr", null, React__default.createElement("td", null, "Line count:"), React__default.createElement("td", {
+        align: "right"
+      }, rootNode.lineCount)), React__default.createElement("tr", null, React__default.createElement("td", null, "Branch coverage:"), React__default.createElement("td", {
+        align: "right"
+      }, rootNode.branchPerc, "%")), React__default.createElement("tr", null, React__default.createElement("td", null, "Function coverage:"), React__default.createElement("td", {
+        align: "right"
+      }, rootNode.functionPerc, "%")), React__default.createElement("tr", null, React__default.createElement("td", null, "Line coverage:"), React__default.createElement("td", {
+        align: "right"
+      }, rootNode.linePerc, "%")), React__default.createElement("tr", null, React__default.createElement("td", null, "Statement coverage:"), React__default.createElement("td", {
+        align: "right"
+      }, rootNode.stmtPerc, "%")))), React__default.createElement("div", {
         style: {
@@ -224,0 +340,0 @@ textAlign: 'right',

dist/index.esm.js

@@ -27,2 +27,17 @@ import React, { Component } from 'react';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _inherits(subClass, superClass) {
@@ -79,5 +94,6 @@ if (typeof superClass !== "function" && superClass !== null) {
   fontSize: 16,
-  border: 0
+  border: 0,
+  borderRadius: 3
 };
-var Padding = 30;
+var TablePadding = 30;
 
@@ -96,3 +112,3 @@ var Coverage =
     _this.state = {
-      fileCoverages: []
+      treeNodes: []
     };
@@ -106,8 +122,28 @@ return _this;
       this.setState({
-        fileCoverages: []
+        treeNodes: []
       });
     }
   }, {
+    key: "getInitialSubData",
+    value: function getInitialSubData() {
+      return {
+        total: 0,
+        covered: 0
+      };
+    }
+  }, {
+    key: "getInitialData",
+    value: function getInitialData() {
+      return {
+        branches: this.getInitialSubData(),
+        functions: this.getInitialSubData(),
+        lines: this.getInitialSubData(),
+        statements: this.getInitialSubData()
+      };
+    }
+  }, {
     key: "handleShow",
     value: function handleShow() {
+      var _this2 = this;
+
       var map = libCoverage.createCoverageMap({});
@@ -129,6 +165,90 @@ map.merge(window.__coverage__);
       fileCoverages.forEach(function (fileCoverage) {
-        fileCoverage.key = fileCoverage.key.split('/').slice(minSlashes - 1).join('/');
+        var paths = fileCoverage.key.split('/').slice(minSlashes - 1);
+        fileCoverage.path = paths.join('/');
+        fileCoverage.parentPath = paths.length > 1 ? paths.slice(0, paths.length - 1).join('/') : rootPath;
+        fileCoverage.level = paths.length;
+        fileCoverage.name = paths[fileCoverage.level - 1];
+        fileCoverage.paths = paths;
+        fileCoverage.leaf = true;
       });
+      var id = 1;
+      var rootPath = '[Total]';
+      var rootNode = {
+        id: id++,
+        path: rootPath,
+        name: 'Total',
+        level: 0
+      };
+
+      var treeData = _defineProperty({}, rootNode.path, rootNode);
+
+      fileCoverages.forEach(function (fc) {
+        fc.id = id++;
+
+        if (fc.level === 1) {
+          fc.parentId = 1;
+          return;
+        }
+
+        var childNode = fc;
+
+        for (var i = fc.level - 2; i >= 0; i--) {
+          var paths = fc.paths.slice(0, i + 1);
+          var path = paths.join('/');
+          var node = treeData[path];
+
+          if (!node) {
+            node = {
+              id: id++,
+              path: path,
+              parentPath: paths.length > 1 ? paths.slice(0, paths.length - 1).join('/') : rootPath,
+              name: paths[paths.length - 1],
+              parentId: 1,
+              level: i + 1
+            };
+            treeData[path] = node;
+          }
+
+          childNode.parentId = node.id;
+          childNode = node;
+        }
+      });
+      var treeNodes = Object.values(treeData);
+      treeNodes = treeNodes.concat(fileCoverages);
+      treeNodes.sort(function (a, b) {
+        return a.level < b.level ? 1 : a.level > b.level ? -1 : 0;
+      });
+      treeNodes.forEach(function (treeNode) {
+        if (!treeNode.leaf) {
+          var children = treeNodes.filter(function (n) {
+            return n.parentId === treeNode.id;
+          });
+
+          var data = _this2.getInitialData();
+
+          children.forEach(function (c) {
+            data.branches.total += c.data.branches.total;
+            data.branches.covered += c.data.branches.covered;
+            data.functions.total += c.data.functions.total;
+            data.functions.covered += c.data.functions.covered;
+            data.lines.total += c.data.lines.total;
+            data.lines.covered += c.data.lines.covered;
+            data.statements.total += c.data.statements.total;
+            data.statements.covered += c.data.statements.covered;
+          });
+          data.branches.pct = data.branches.total ? Math.round(data.branches.covered * 100 / data.branches.total) : 100;
+          data.functions.pct = data.functions.total ? Math.round(data.functions.covered * 100 / data.functions.total) : 100;
+          data.lines.pct = data.lines.total ? Math.round(data.lines.covered * 100 / data.lines.total) : 100;
+          data.statements.pct = data.statements.total ? Math.round(data.statements.covered * 100 / data.statements.total) : 100;
+          treeNode.data = data;
+        }
+
+        treeNode.lineCount = treeNode.data.statements.total;
+        treeNode.branchPerc = treeNode.data.branches.pct;
+        treeNode.functionPerc = treeNode.data.functions.pct;
+        treeNode.linePerc = treeNode.data.lines.pct;
+        treeNode.stmtPerc = treeNode.data.statements.pct;
+      });
       this.setState({
-        fileCoverages: fileCoverages
+        treeNodes: treeNodes
       });
@@ -177,3 +297,3 @@ }
     value: function render() {
-      var fileCoverages = this.state.fileCoverages;
+      var treeNodes = this.state.treeNodes;
       var position = this.getPosition();
@@ -188,31 +308,27 @@ var showButtonStyle = Object.assign({}, BaseButtonStyle, position, {
       });
-      return React.createElement("div", null, fileCoverages.length ? React.createElement("div", {
+      var rootNode = treeNodes.find(function (n) {
+        return n.level === 0;
+      });
+      return React.createElement("div", null, rootNode ? React.createElement("div", {
         style: Object.assign({
           padding: 20,
-          backgroundColor: 'rgba(0,0,0,.12)',
+          backgroundColor: '#eee',
           position: 'fixed',
           zIndex: 10000
-        }, this.getPosition(Padding))
-      }, React.createElement("table", {
-        border: "1",
-        cellSpacing: "0",
-        style: {
-          maxHeight: 400,
-          overflow: 'scroll'
-        }
-      }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+        }, this.getPosition(TablePadding))
+      }, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
         width: "200"
-      }, "File"), React.createElement("th", {
-        width: "50"
-      }, "Branches"), React.createElement("th", {
-        width: "50"
-      }, "Functions"), React.createElement("th", {
-        width: "50"
-      }, "Lines"), React.createElement("th", {
-        width: "50"
-      }, "Statements"))), React.createElement("tbody", null, fileCoverages.map(function (fileCoverage) {
-        return React.createElement("tr", {
-          key: fileCoverage.key
-        }, React.createElement("td", null, fileCoverage.key), React.createElement("td", null, fileCoverage.data.branches.pct), React.createElement("td", null, fileCoverage.data.functions.pct), React.createElement("td", null, fileCoverage.data.lines.pct), React.createElement("td", null, fileCoverage.data.statements.pct));
-      }))), React.createElement("div", {
+      }), React.createElement("th", {
+        width: "100"
+      }))), React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, "Line count:"), React.createElement("td", {
+        align: "right"
+      }, rootNode.lineCount)), React.createElement("tr", null, React.createElement("td", null, "Branch coverage:"), React.createElement("td", {
+        align: "right"
+      }, rootNode.branchPerc, "%")), React.createElement("tr", null, React.createElement("td", null, "Function coverage:"), React.createElement("td", {
+        align: "right"
+      }, rootNode.functionPerc, "%")), React.createElement("tr", null, React.createElement("td", null, "Line coverage:"), React.createElement("td", {
+        align: "right"
+      }, rootNode.linePerc, "%")), React.createElement("tr", null, React.createElement("td", null, "Statement coverage:"), React.createElement("td", {
+        align: "right"
+      }, rootNode.stmtPerc, "%")))), React.createElement("div", {
         style: {
@@ -219,0 +335,0 @@ textAlign: 'right',

package.json

 {
   "name": "istanbul-coverage-display",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "dist/index.cjs.js",
@@ -21,5 +21,5 @@ "module": "dist/index.esm.js",
   "peerDependencies": {
-    "react": "^16.0.0",
     "istanbul-lib-coverage": "^2.0.0",
-    "prop-types": "^15.0.0"
+    "prop-types": "^15.0.0",
+    "react": "^16.0.0"
   },
@@ -36,3 +36,4 @@ "scripts": {
     "code coverage"
-  ]
+  ],
+  "dependencies": {}
 }

No alert changes

Improved metrics

Total package byte prevSize

58667

increased by15.87%

Lines of code

623

increased by48.69%

No dependency changes