istanbul-reports - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [3.0.0-alpha.2](https://github.com/istanbuljs/istanbuljs/compare/istanbul-reports@3.0.0-alpha.1...istanbul-reports@3.0.0-alpha.2) (2019-10-06)
+
+
+### Bug Fixes
+
+* Use path.posix.relative to generate URL's for html reports ([#472](https://github.com/istanbuljs/istanbuljs/issues/472)) ([05dc22c](https://github.com/istanbuljs/istanbuljs/commit/05dc22c))
+* **html-spa:** Filter only exact paths ([#431](https://github.com/istanbuljs/istanbuljs/issues/431)) ([bbc85f6](https://github.com/istanbuljs/istanbuljs/commit/bbc85f6)), closes [#426](https://github.com/istanbuljs/istanbuljs/issues/426)
+
+
+
+
+
 # [3.0.0-alpha.1](https://github.com/istanbuljs/istanbuljs/compare/istanbul-reports@3.0.0-alpha.0...istanbul-reports@3.0.0-alpha.1) (2019-06-20)
@@ -8,0 +20,0 @@

lib/html-spa/index.js

@@ -42,3 +42,6 @@ 'use strict';
     constructor(opts = {}) {
-        super();
+        super({
+            // force the summarizer to nested for html-spa
+            summarizer: 'nested'
+        });
 
@@ -94,3 +97,4 @@ this.verbose = opts.verbose || false;
 
-    getMetric(metric, type, isEmpty, context) {
+    getMetric(metric, type, context) {
+        const isEmpty = metric.total === 0;
         return {
@@ -109,3 +113,2 @@ total: metric.total,
         const coverageSummary = node.getCoverageSummary();
-        const isEmpty = coverageSummary.isEmpty();
         const metrics = {
@@ -115,3 +118,2 @@ statements: this.getMetric(
                 'statements',
-                isEmpty,
                 context
@@ -122,3 +124,2 @@ ),
                 'branches',
-                isEmpty,
                 context
@@ -129,11 +130,5 @@ ),
                 'functions',
-                isEmpty,
                 context
             ),
-            lines: this.getMetric(
-                coverageSummary.lines,
-                'lines',
-                isEmpty,
-                context
-            )
+            lines: this.getMetric(coverageSummary.lines, 'lines', context)
         };
@@ -143,3 +138,3 @@
             file: node.getRelativeName(),
-            isEmpty,
+            isEmpty: coverageSummary.isEmpty(),
             metrics,
@@ -146,0 +141,0 @@ children:

lib/html-spa/src/getChildData.js

@@ -33,14 +33,17 @@ function addPath(node, parentPath) {
         const childFullPath = (parentPath ? parentPath + '/' : '') + child.file;
-        if (
-            childFullPath === fileFilter ||
-            childFullPath.indexOf(fileFilter) < 0
-        ) {
-            if (fileFilter.indexOf(childFullPath) === 0) {
-                // flatten
-                children = [
-                    ...children,
-                    ...filterByFile(child.children, fileFilter, childFullPath)
-                ];
-            }
-        } else {
+
+        const isChildUnderFilter =
+            fileFilter === childFullPath ||
+            fileFilter.indexOf(childFullPath + '/') === 0;
+        const isChildAboveFilter =
+            childFullPath.indexOf(fileFilter + '/') === 0;
+
+        if (isChildUnderFilter) {
+            // flatten and continue looking underneath
+            children = [
+                ...children,
+                ...filterByFile(child.children, fileFilter, childFullPath)
+            ];
+        } else if (isChildAboveFilter) {
+            // remove the parent path and add everything underneath
             const charsToRemoveFromFile =
@@ -126,3 +129,3 @@ fileFilter.length - (parentPath ? parentPath.length : 0);
 
-export default function getChildData(
+module.exports = function getChildData(
     sourceData,
@@ -154,2 +157,2 @@ metricsToShow,
     return childData;
-}
+};

lib/html-spa/src/index.js

 // The index file for the spa running on the summary page
-import React, { useState, useMemo, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import SummaryTableHeader from './summaryTableHeader';
-import SummaryTableLine from './summaryTableLine';
-import SummaryHeader from './summaryHeader';
-import getChildData from './getChildData';
-import FlattenButton from './flattenButton';
-import FilterButtons from './filterButtons';
-import { setLocation, decodeLocation } from './routing';
+const React = require('react');
+const ReactDOM = require('react-dom');
+const SummaryTableHeader = require('./summaryTableHeader');
+const SummaryTableLine = require('./summaryTableLine');
+const SummaryHeader = require('./summaryHeader');
+const getChildData = require('./getChildData');
+const FlattenToggle = require('./flattenToggle');
+const FilterToggle = require('./filterToggle');
+const FileBreadcrumbs = require('./fileBreadcrumbs');
+const { setLocation, decodeLocation } = require('./routing');
 
+const { useState, useMemo, useEffect } = React;
+
 const sourceData = window.data;
@@ -90,4 +93,4 @@ const metricsToShow = {};
     return (
-        <>
-            <div className="body">
+        <div className="layout">
+            <div className="layout__section">
                 <SummaryHeader
@@ -97,49 +100,49 @@ metrics={overallMetrics}
                 />
-                {Boolean(fileFilter) && (
-                    <div className="pad1">
-                        <h1>
-                            {fileFilter} (
-                            <a
-                                href="javascript:void()"
-                                onClick={() => setFileFilter('')}
-                            >
-                                Clear
-                            </a>
-                            )
-                        </h1>
+            </div>
+            <div className="layout__section">
+                <div className="toolbar">
+                    <div className="toolbar__item">
+                        <FlattenToggle setIsFlat={setIsFlat} isFlat={isFlat} />
                     </div>
-                )}
-                <div className="pad1">
-                    <FlattenButton setIsFlat={setIsFlat} isFlat={isFlat} />
-                    <FilterButtons
-                        activeFilters={activeFilters}
-                        setFilters={setFilters}
-                    />
-                </div>
-                <div className="pad1">
-                    <table className="coverage-summary">
-                        <SummaryTableHeader
-                            onSort={newSort => {
-                                setSort(newSort);
-                            }}
-                            activeSort={activeSort}
-                            metricsToShow={metricsToShow}
+                    <div className="toolbar__item">
+                        <FilterToggle
+                            activeFilters={activeFilters}
+                            setFilters={setFilters}
                         />
-                        <tbody>
-                            {childData.map(child => (
-                                <SummaryTableLine
-                                    {...child}
-                                    key={child.file}
-                                    metricsToShow={metricsToShow}
-                                    expandedLines={expandedLines}
-                                    setExpandedLines={setExpandedLines}
-                                    fileFilter={fileFilter}
-                                    setFileFilter={setFileFilter}
-                                />
-                            ))}
-                        </tbody>
-                    </table>
+                    </div>
                 </div>
             </div>
-            <div className="footer quiet pad2 space-top1 center small">
+            <div className="layout__section">
+                <h1>
+                    <FileBreadcrumbs
+                        fileFilter={fileFilter}
+                        setFileFilter={setFileFilter}
+                    />
+                </h1>
+            </div>
+            <div className="layout__section layout__section--fill">
+                <table className="coverage-summary">
+                    <SummaryTableHeader
+                        onSort={newSort => {
+                            setSort(newSort);
+                        }}
+                        activeSort={activeSort}
+                        metricsToShow={metricsToShow}
+                    />
+                    <tbody>
+                        {childData.map(child => (
+                            <SummaryTableLine
+                                {...child}
+                                key={child.file}
+                                metricsToShow={metricsToShow}
+                                expandedLines={expandedLines}
+                                setExpandedLines={setExpandedLines}
+                                fileFilter={fileFilter}
+                                setFileFilter={setFileFilter}
+                            />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div className="layout__section center small quiet">
                 Code coverage generated by{' '}
@@ -151,3 +154,3 @@ <a href="https://istanbul.js.org/" target="_blank">
             </div>
-        </>
+        </div>
     );
@@ -154,0 +157,0 @@ }

lib/html-spa/src/routing.js

@@ -1,2 +0,2 @@
-export function setLocation(
+exports.setLocation = function setLocation(
     isReplace,
@@ -26,5 +26,5 @@ activeSort,
     window.history[isReplace ? 'replaceState' : 'pushState'](null, '', newUrl);
-}
+};
 
-export function decodeLocation() {
+exports.decodeLocation = function decodeLocation() {
     const items = location.hash.substr(1).split('/');
@@ -53,2 +53,2 @@ if (items.length !== 8) {
     }
-}
+};

lib/html-spa/src/summaryHeader.js

@@ -1,2 +0,2 @@
-import React from 'react';
+const React = require('react');
 
@@ -26,3 +26,3 @@ function Ignores({ metrics, metricsToShow }) {
     return (
-        <div className="fl pad1y">
+        <div className="toolbar__item">
             <span className="strong">{result.join(', ')}</span>
@@ -36,4 +36,4 @@ <span className="quiet">Ignored</span>
     return (
-        <div className="fl pad1y space-right2">
-            <span className="strong">{data.pct}% </span>
+        <div className="toolbar__item">
+            <span className="strong">{data.pct}%</span>{' '}
             <span className="quiet">{name}</span>{' '}
@@ -47,24 +47,20 @@ <span className={'fraction ' + data.classForPercent}>
 
-export default function SummaryHeader({ metrics, metricsToShow }) {
+module.exports = function SummaryHeader({ metrics, metricsToShow }) {
     return (
-        <div className="pad1">
-            {/* TODO - <h1>All Files</h1> - this doesn't add useful info any more. if anything it should be the name of the project - coverage*/}
-            <div className="clearfix">
-                {metricsToShow.statements && (
-                    <StatusMetric data={metrics.statements} name="Statements" />
-                )}
-                {metricsToShow.branches && (
-                    <StatusMetric data={metrics.branches} name="Branches" />
-                )}
-                {metricsToShow.functions && (
-                    <StatusMetric data={metrics.functions} name="Functions" />
-                )}
-                {metricsToShow.lines && (
-                    <StatusMetric data={metrics.lines} name="Lines" />
-                )}
-
-                <Ignores metrics={metrics} metricsToShow={metricsToShow} />
-            </div>
+        <div className="toolbar">
+            {metricsToShow.statements && (
+                <StatusMetric data={metrics.statements} name="Statements" />
+            )}
+            {metricsToShow.branches && (
+                <StatusMetric data={metrics.branches} name="Branches" />
+            )}
+            {metricsToShow.functions && (
+                <StatusMetric data={metrics.functions} name="Functions" />
+            )}
+            {metricsToShow.lines && (
+                <StatusMetric data={metrics.lines} name="Lines" />
+            )}
+            <Ignores metrics={metrics} metricsToShow={metricsToShow} />
         </div>
     );
-}
+};

lib/html-spa/src/summaryTableHeader.js

@@ -1,2 +0,2 @@
-import React from 'react';
+const React = require('react');
 
@@ -60,2 +60,3 @@ function getSortDetails(sortKey, activeSort) {
             />
+            <th className="headercell"></th>
             <SummaryTableHeaderCell
@@ -77,3 +78,3 @@ name="Covered"
 
-export default function SummaryTableHeader({
+module.exports = function SummaryTableHeader({
     onSort,
@@ -86,10 +87,10 @@ activeSort,
             <tr className="topheading">
-                <FileHeaderCell onSort={onSort} activeSort={activeSort} />
-                {metricsToShow.statements && <th colSpan={3}>Statements</th>}
-                {metricsToShow.branches && <th colSpan={3}>Branches</th>}
-                {metricsToShow.functions && <th colSpan={3}>Functions</th>}
-                {metricsToShow.lines && <th colSpan={3}>Lines</th>}
+                <th></th>
+                {metricsToShow.statements && <th colSpan={4}>Statements</th>}
+                {metricsToShow.branches && <th colSpan={4}>Branches</th>}
+                {metricsToShow.functions && <th colSpan={4}>Functions</th>}
+                {metricsToShow.lines && <th colSpan={4}>Lines</th>}
             </tr>
             <tr className="subheading">
-                <th />
+                <FileHeaderCell onSort={onSort} activeSort={activeSort} />
                 {metricsToShow.statements && (
@@ -126,2 +127,2 @@ <SubHeadings
     );
-}
+};

lib/html-spa/src/summaryTableLine.js

@@ -1,36 +0,19 @@
-import React from 'react';
+const React = require('react');
 
-function ShowPicture({ num }) {
-    let rest;
-    let cls = '';
-    if (isFinite(num)) {
-        if (num === 100) {
-            cls = ' cover-full';
-        }
-        num = Math.floor(num);
-        rest = 100 - num;
-        return (
-            <>
-                <div
-                    className={'cover-fill' + cls}
-                    style={{ width: num + '%' }}
-                />
-                <div className="cover-empty" style={{ width: rest + '%' }} />
-            </>
-        );
-    } else {
-        return false;
-    }
-}
+function MetricCells({ metrics }) {
+    const { classForPercent, pct, covered, total } = metrics;
 
-function MetricCells({ metrics }) {
     return (
         <>
-            <td className={'pct ' + metrics.classForPercent}>{metrics.pct}%</td>
-            <td className={'abs ' + metrics.classForPercent}>
-                {metrics.covered}
+            <td className={'pct ' + classForPercent}>{Math.round(pct)}% </td>
+            <td className={classForPercent}>
+                <div className="bar">
+                    <div
+                        className={`bar__data ${classForPercent} ${classForPercent}--dark`}
+                        style={{ width: pct + '%' }}
+                    ></div>
+                </div>
             </td>
-            <td className={'abs ' + metrics.classForPercent}>
-                {metrics.total}
-            </td>
+            <td className={'abs ' + classForPercent}>{covered}</td>
+            <td className={'abs ' + classForPercent}>{total}</td>
         </>
@@ -80,3 +63,30 @@ );
 
-export default function SummaryTableLine({
+function getWorstMetricClassForPercent(metricsToShow, metrics) {
+    let classForPercent = 'none';
+    for (const metricToShow in metricsToShow) {
+        if (metricsToShow[metricToShow]) {
+            const metricClassForPercent = metrics[metricToShow].classForPercent;
+
+            // ignore none metrics so they don't change whats shown
+            if (metricClassForPercent === 'none') {
+                continue;
+            }
+
+            // if the metric low or lower than whats currently being used, replace it
+            if (
+                metricClassForPercent == 'low' ||
+                (metricClassForPercent === 'medium' &&
+                    classForPercent !== 'low') ||
+                (metricClassForPercent === 'high' &&
+                    classForPercent !== 'low' &&
+                    classForPercent !== 'medium')
+            ) {
+                classForPercent = metricClassForPercent;
+            }
+        }
+    }
+    return classForPercent;
+}
+
+module.exports = function SummaryTableLine({
     prefix,
@@ -103,4 +113,6 @@ metrics,
                 <td
-                    className={'file ' + metrics.statements.classForPercent}
-                    rowSpan={2}
+                    className={
+                        'file ' +
+                        getWorstMetricClassForPercent(metricsToShow, metrics)
+                    }
                 >
@@ -132,44 +144,2 @@ {/* eslint-disable-line prefer-spread */ Array.apply(null, {
             </tr>
-            <tr>
-                {metricsToShow.statements && (
-                    <td
-                        className={'pic ' + metrics.statements.classForPercent}
-                        colSpan={3}
-                    >
-                        <div className="chart">
-                            <ShowPicture num={metrics.statements.pct} />
-                        </div>
-                    </td>
-                )}
-                {metricsToShow.branches && (
-                    <td
-                        className={'pic ' + metrics.branches.classForPercent}
-                        colSpan={3}
-                    >
-                        <div className="chart">
-                            <ShowPicture num={metrics.branches.pct} />
-                        </div>
-                    </td>
-                )}
-                {metricsToShow.functions && (
-                    <td
-                        className={'pic ' + metrics.functions.classForPercent}
-                        colSpan={3}
-                    >
-                        <div className="chart">
-                            <ShowPicture num={metrics.functions.pct} />
-                        </div>
-                    </td>
-                )}
-                {metricsToShow.lines && (
-                    <td
-                        className={'pic ' + metrics.lines.classForPercent}
-                        colSpan={3}
-                    >
-                        <div className="chart">
-                            <ShowPicture num={metrics.lines.pct} />
-                        </div>
-                    </td>
-                )}
-            </tr>
             {children &&
@@ -191,2 +161,2 @@ expandedLines.indexOf(prefix + file) >= 0 &&
     );
-}
+};

lib/html/index.js

@@ -97,3 +97,3 @@ 'use strict';
         const sourcePath = path.dirname(this.getPath(source));
-        return path.relative(sourcePath, targetPath);
+        return path.posix.relative(sourcePath, targetPath);
     },
@@ -100,0 +100,0 @@

package.json

 {
   "name": "istanbul-reports",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "istanbul reports",
@@ -13,25 +13,23 @@ "author": "Krishnan Anantheswaran <[e-mail]>",
     "test": "nyc --nycrc-path=../../monorepo-per-package-nycrc.json mocha --recursive",
-    "prepare": "rollup --config lib/html-spa/rollup.config.js"
+    "prepare": "webpack --config lib/html-spa/webpack.config.js --mode production",
+    "prepare:watch": "webpack --config lib/html-spa/webpack.config.js --watch --mode development"
   },
   "dependencies": {
-    "handlebars": "^4.1.2"
+    "handlebars": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
     "chai": "^4.2.0",
     "is-windows": "^1.0.2",
-    "istanbul-lib-coverage": "^3.0.0-alpha.0",
-    "istanbul-lib-report": "^3.0.0-alpha.0",
-    "mocha": "^6.1.4",
+    "istanbul-lib-coverage": "^3.0.0-alpha.1",
+    "istanbul-lib-report": "^3.0.0-alpha.1",
+    "mocha": "^6.2.1",
     "nyc": "^14.1.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "rollup": "^1.15.6",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.0.3",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.0.0"
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9"
   },
@@ -41,3 +39,4 @@ "license": "BSD-3-Clause",
     "type": "git",
-    "url": "[e-mail]:istanbuljs/istanbuljs"
+    "url": "git+ssh://[e-mail]/istanbuljs/istanbuljs.git",
+    "directory": "packages/istanbul-reports"
   },
@@ -56,3 +55,2 @@ "keywords": [
       "lib/html-spa/assets/**",
-      "lib/html-spa/src/**",
       "lib/html-spa/rollup.config.js",
@@ -65,3 +63,3 @@ "test/**"
   },
-  "gitHead": "371adb154f0189b793e636b5bbcc63f183d36c2b"
+  "gitHead": "4d5e777a9bc4847d178ad31f379307124cdd1e4f"
 }

No alert changes

Improved metrics

Total package byte prevSize

282685

increased by4.34%

Dev dependency count

14

decreased by-17.65%

Number of package files

43

increased by2.38%

Worsened metrics

Lines of code

3746

decreased by-0.74%

Dependency changes

• Updatedhandlebars@^4.4.2