istanbul - npm Package Compare versions

Comparing version 0.3.22 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,13 @@ Changelog
 <tr>
+<td>v0.4.0</td>
+<td>
+    <ul>
+        <li>HTML report design, thanks a bunch to @tmcw</li>
+        <li>"loading config file" message on the console is now tied to the verbose state, thanks @asa-git</li>
+        <li>Add the `l` property to documentation, thanks @kitsonk</li>
+
+    </ul>
+</td>
+</tr>
+<tr>
 <td>v0.3.21</td>
@@ -8,0 +19,0 @@ <td>

lib/assets/sorter.js

@@ -10,3 +10,3 @@ var addSorting = (function () {
     // returns the summary table element
-    function getTable() { return document.querySelector('.coverage-summary table'); }
+    function getTable() { return document.querySelector('.coverage-summary'); }
     // returns the thead element of the summary table
@@ -13,0 +13,0 @@ function getTableHeader() { return getTable().querySelector('thead tr'); }

lib/config.js

@@ -425,3 +425,5 @@ /*
     if (file) {
-        console.error('Loading config: ' + file);
+        if (overrides && overrides.verbose === true) {
+            console.error('Loading config: ' + file);
+        }
         configObject = file.match(YML_PATTERN) ?
@@ -428,0 +430,0 @@ yaml.safeLoad(fs.readFileSync(file, 'utf8'), { filename: file }) :

lib/report/html.js

@@ -21,7 +21,6 @@ /*
     footerTemplate = templateFor('foot'),
-    pathTemplate = handlebars.compile('<div class="path">{{{html}}}</div>'),
     detailTemplate = handlebars.compile([
         '<tr>',
-        '<td class="line-count">{{#show_lines}}{{maxLines}}{{/show_lines}}</td>',
-        '<td class="line-coverage">{{#show_line_execution_counts fileCoverage}}{{maxLines}}{{/show_line_execution_counts}}</td>',
+        '<td class="line-count quiet">{{#show_lines}}{{maxLines}}{{/show_lines}}</td>',
+        '<td class="line-coverage quiet">{{#show_line_execution_counts fileCoverage}}{{maxLines}}{{/show_line_execution_counts}}</td>',
         '<td class="text"><pre class="prettyprint lang-js">{{#show_code structured}}{{/show_code}}</pre></td>',
@@ -31,4 +30,4 @@ '</tr>\n'
     summaryTableHeader = [
-        '<div class="coverage-summary">',
-        '<table>',
+        '<div class="pad1">',
+        '<table class="coverage-summary">',
         '<thead>',
@@ -53,11 +52,11 @@ '<tr>',
         '<td class="file {{reportClasses.statements}}" data-value="{{file}}"><a href="{{output}}">{{file}}</a></td>',
-        '<td data-value="{{metrics.statements.pct}}" class="pic {{reportClasses.statements}}">{{#show_picture}}{{metrics.statements.pct}}{{/show_picture}}</td>',
+        '<td data-value="{{metrics.statements.pct}}" class="pic {{reportClasses.statements}}"><div class="chart">{{#show_picture}}{{metrics.statements.pct}}{{/show_picture}}</div></td>',
         '<td data-value="{{metrics.statements.pct}}" class="pct {{reportClasses.statements}}">{{metrics.statements.pct}}%</td>',
-        '<td data-value="{{metrics.statements.total}}" class="abs {{reportClasses.statements}}">({{metrics.statements.covered}}&nbsp;/&nbsp;{{metrics.statements.total}})</td>',
+        '<td data-value="{{metrics.statements.total}}" class="abs {{reportClasses.statements}}">{{metrics.statements.covered}}/{{metrics.statements.total}}</td>',
         '<td data-value="{{metrics.branches.pct}}" class="pct {{reportClasses.branches}}">{{metrics.branches.pct}}%</td>',
-        '<td data-value="{{metrics.branches.total}}" class="abs {{reportClasses.branches}}">({{metrics.branches.covered}}&nbsp;/&nbsp;{{metrics.branches.total}})</td>',
+        '<td data-value="{{metrics.branches.total}}" class="abs {{reportClasses.branches}}">{{metrics.branches.covered}}/{{metrics.branches.total}}</td>',
         '<td data-value="{{metrics.functions.pct}}" class="pct {{reportClasses.functions}}">{{metrics.functions.pct}}%</td>',
-        '<td data-value="{{metrics.functions.total}}" class="abs {{reportClasses.functions}}">({{metrics.functions.covered}}&nbsp;/&nbsp;{{metrics.functions.total}})</td>',
+        '<td data-value="{{metrics.functions.total}}" class="abs {{reportClasses.functions}}">{{metrics.functions.covered}}/{{metrics.functions.total}}</td>',
         '<td data-value="{{metrics.lines.pct}}" class="pct {{reportClasses.lines}}">{{metrics.lines.pct}}%</td>',
-        '<td data-value="{{metrics.lines.total}}" class="abs {{reportClasses.lines}}">({{metrics.lines.covered}}&nbsp;/&nbsp;{{metrics.lines.total}})</td>',
+        '<td data-value="{{metrics.lines.total}}" class="abs {{reportClasses.lines}}">{{metrics.lines.covered}}/{{metrics.lines.total}}</td>',
         '</tr>\n'
@@ -88,4 +87,4 @@ ].join('\n\t')),
         rest = 100 - num;
-        return '<span class="cover-fill' + cls + '" style="width: ' + num + 'px;"></span>' +
-            '<span class="cover-empty" style="width:' + rest + 'px;"></span>';
+        return '<div class="cover-fill' + cls + '" style="width: ' + num + '%;"></div>' +
+            '<div class="cover-empty" style="width:' + rest + '%;"></div>';
     } else {
@@ -96,2 +95,8 @@ return '';
 
+handlebars.registerHelper('if_has_ignores', function (metrics, opts) {
+    return (metrics.statements.skipped +
+        metrics.functions.skipped +
+        metrics.branches.skipped) === 0 ? '' : opts.fn(this);
+});
+
 handlebars.registerHelper('show_ignores', function (metrics) {
@@ -142,3 +147,3 @@ var statements = metrics.statements.skipped,
                 covered = 'yes';
-                value = lines[lineNumber];
+                value = lines[lineNumber] + '×';
             } else {
@@ -380,7 +385,7 @@ covered = 'no';
             linkPath.push('<a href="' + linkMapper.ancestor(node, i + 1) + '">' +
-                (cleanPath(nodePath[i].relativeName) || 'All files') + '</a>');
+                (cleanPath(nodePath[i].relativeName) || 'all files') + '</a>');
         }
         linkPath.reverse();
-        return linkPath.length > 0 ? linkPath.join(' &#187; ') + ' &#187; ' +
-            cleanPath(node.displayShortName()) : '';
+        return linkPath.length > 0 ? linkPath.join(' / ') + ' ' +
+            cleanPath(node.displayShortName()) : '/';
     },
@@ -395,3 +400,3 @@
         templateData.reportClass = getReportClass(node.metrics.statements, opts.watermarks.statements);
-        templateData.pathHtml = pathTemplate({ html: this.getPathHtml(node, linkMapper) });
+        templateData.pathHtml = this.getPathHtml(node, linkMapper);
         templateData.base = {
@@ -398,0 +403,0 @@ css: linkMapper.asset(node, 'base.css')

lib/report/templates/foot.txt

@@ -1,5 +0,7 @@
-
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at {{datetime}}
 </div>
-<div class="footer">
-    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at {{datetime}}</div>
 </div>
@@ -6,0 +8,0 @@ {{#if prettify}}

lib/report/templates/head.txt

@@ -5,9 +5,10 @@ <!doctype html>
     <title>Code coverage report for {{entity}}</title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
 {{#if prettify}}
-    <link rel="stylesheet" href="{{prettify.css}}">
+    <link rel="stylesheet" href="{{prettify.css}}" />
 {{/if}}
-    <link rel="stylesheet" href="{{base.css}}">
+    <link rel="stylesheet" href="{{base.css}}" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <style type='text/css'>
-        div.coverage-summary .sorter {
+        .coverage-summary .sorter {
             background-image: url({{sorter.image}});
@@ -18,21 +19,44 @@ }
 <body>
-<div class="header {{reportClass}}">
-    <h1>Code coverage report for <span class="entity">{{entity}}</span></h1>
-    <h2>
-        {{#with metrics.statements}}
-        Statements: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.branches}}
-        Branches: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.functions}}
-        Functions: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        {{#with metrics.lines}}
-        Lines: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        {{/with}}
-        Ignored: <span class="metric">{{#show_ignores metrics}}{{/show_ignores}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
-    </h2>
-    {{{pathHtml}}}
-</div>
-<div class="body">
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      {{{pathHtml}}}
+    </h1>
+    <div class='clearfix'>
+      {{#with metrics.statements}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.branches}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.functions}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#with metrics.lines}}
+      <div class='fl pad1y space-right2'>
+        <span class="strong">{{pct}}% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>{{covered}}/{{total}}</span>
+      </div>
+      {{/with}}
+      {{#if_has_ignores metrics}}
+      <div class='fl pad1y'>
+        <span class="strong">{{#show_ignores metrics}}{{/show_ignores}}</span>
+        <span class="quiet">Ignored</span>  &nbsp;&nbsp;&nbsp;&nbsp;
+      </div>
+      {{/if_has_ignores}}
+    </div>
+  </div>
+  <div class='status-line {{reportClass}}'></div>

package.json

 {
   "name": "istanbul",
-  "version": "0.3.22",
+  "version": "0.4.0",
   "description": "Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale",
@@ -74,3 +74,6 @@ "keywords": [
     "@sterlinghw",
-    "Gord Tanner <[e-mail]>"
+    "Gord Tanner <[e-mail]>",
+    "Tom MacWright @tmcw <[e-mail]>",
+    "Kitson Kelly @kitsonk",
+    "@asa-git"
   ],
@@ -77,0 +80,0 @@ "scripts": {

README.md

@@ -10,2 +10,4 @@ ## Istanbul - a JS code coverage tool written in JS
 
+**New** `v0.4.0` now has beautiful HTML reports. Props to Tom MacWright @tmcw for a fantastic job!
+
 * [Features and use cases](#features)
@@ -12,0 +14,0 @@ * [Getting started and configuration](#getting-started)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

300183

increased by0.53%

Lines of code

6592

increased by0.55%

Number of lines in readme file

272

increased by0.74%

No dependency changes