chore: Basic test setup for html-spa (#433)

istanbuljs · Aug 3, 2019 · 025e8af · 025e8af
1 parent f6bb0b4
commit 025e8af
Show file tree

Hide file tree

Showing 14 changed files with 135 additions and 86 deletions.
diff --git a/packages/istanbul-reports/lib/html-spa/.babelrc b/packages/istanbul-reports/lib/html-spa/.babelrc
@@ -1,3 +1,3 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
+    "presets": [["@babel/preset-env", { "modules": "commonjs" }], "@babel/preset-react"]
 }
diff --git a/packages/istanbul-reports/lib/html-spa/rollup.config.js b/packages/istanbul-reports/lib/html-spa/rollup.config.js
diff --git a/packages/istanbul-reports/lib/html-spa/src/fileBreadcrumbs.js b/packages/istanbul-reports/lib/html-spa/src/fileBreadcrumbs.js
@@ -1,6 +1,6 @@
-import React from 'react';
+const React = require('react');
 
-export default function FileBreadcrumbs({ fileFilter = '', setFileFilter }) {
+module.exports = function FileBreadcrumbs({ fileFilter = '', setFileFilter }) {
     const parts = fileFilter.split('/');
     const breadcrumbs = [
         {
@@ -28,4 +28,4 @@ export default function FileBreadcrumbs({ fileFilter = '', setFileFilter }) {
             </>
         )
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/filterToggle.js b/packages/istanbul-reports/lib/html-spa/src/filterToggle.js
@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 function ToggleOption({ children, filter, activeFilters, setFilters }) {
     return (
@@ -18,7 +18,7 @@ function ToggleOption({ children, filter, activeFilters, setFilters }) {
     );
 }
 
-export default function FilterToggle({ activeFilters, setFilters }) {
+module.exports = function FilterToggle({ activeFilters, setFilters }) {
     return (
         <div className="toggle">
             <div className="toggle__label">Filter:</div>
@@ -47,4 +47,4 @@ export default function FilterToggle({ activeFilters, setFilters }) {
             </div>
         </div>
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/flattenToggle.js b/packages/istanbul-reports/lib/html-spa/src/flattenToggle.js
@@ -1,6 +1,6 @@
-import React from 'react';
+const React = require('react');
 
-export default function FlattenButton({ setIsFlat, isFlat }) {
+module.exports = function FlattenButton({ setIsFlat, isFlat }) {
     return (
         <div className="toggle">
             <div className="toggle__label">Files:</div>
@@ -22,4 +22,4 @@ export default function FlattenButton({ setIsFlat, isFlat }) {
             </div>{' '}
         </div>
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/getChildData.js b/packages/istanbul-reports/lib/html-spa/src/getChildData.js
@@ -125,7 +125,7 @@ function filter(nodes, metricsMap, activeFilters) {
     return children;
 }
 
-export default function getChildData(
+module.exports = function getChildData(
     sourceData,
     metricsToShow,
     activeSort,
@@ -152,4 +152,4 @@ export default function getChildData(
         childData = sort(childData, activeSort);
     }
     return childData;
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/index.js b/packages/istanbul-reports/lib/html-spa/src/index.js
@@ -1,14 +1,16 @@
 // 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 FlattenToggle from './flattenToggle';
-import FilterToggle from './filterToggle';
-import FileBreadcrumbs from './fileBreadcrumbs';
-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;
 const metricsToShow = {};

diff --git a/packages/istanbul-reports/lib/html-spa/src/routing.js b/packages/istanbul-reports/lib/html-spa/src/routing.js
@@ -1,4 +1,4 @@
-export function setLocation(
+exports.setLocation = function setLocation(
     isReplace,
     activeSort,
     isFlat,
@@ -23,9 +23,9 @@ export function setLocation(
     }
 
     window.history[isReplace ? 'replaceState' : 'pushState'](null, '', newUrl);
-}
+};
 
-export function decodeLocation() {
+exports.decodeLocation = function decodeLocation() {
     const items = location.hash.substr(1).split('/');
     if (items.length !== 8) {
         return null;
@@ -49,4 +49,4 @@ export function decodeLocation() {
     } catch (e) {
         return null;
     }
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/summaryHeader.js b/packages/istanbul-reports/lib/html-spa/src/summaryHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 function Ignores({ metrics, metricsToShow }) {
     const metricKeys = Object.keys(metricsToShow);
@@ -42,7 +42,7 @@ function StatusMetric({ data, name }) {
     );
 }
 
-export default function SummaryHeader({ metrics, metricsToShow }) {
+module.exports = function SummaryHeader({ metrics, metricsToShow }) {
     return (
         <div className="toolbar">
             {metricsToShow.statements && (
@@ -60,4 +60,4 @@ export default function SummaryHeader({ metrics, metricsToShow }) {
             <Ignores metrics={metrics} metricsToShow={metricsToShow} />
         </div>
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/summaryTableHeader.js b/packages/istanbul-reports/lib/html-spa/src/summaryTableHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 function getSortDetails(sortKey, activeSort) {
     let newSort = { sortKey, order: 'desc' };
@@ -74,7 +74,7 @@ function SubHeadings({ sortKeyPrefix, onSort, activeSort }) {
     );
 }
 
-export default function SummaryTableHeader({
+module.exports = function SummaryTableHeader({
     onSort,
     activeSort,
     metricsToShow
@@ -121,4 +121,4 @@ export default function SummaryTableHeader({
             </tr>
         </thead>
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/src/summaryTableLine.js b/packages/istanbul-reports/lib/html-spa/src/summaryTableLine.js
@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 function MetricCells({ metrics }) {
     const { classForPercent, pct, covered, total } = metrics;
@@ -60,7 +60,7 @@ function FileCell({
     }
 }
 
-export default function SummaryTableLine({
+module.exports = function SummaryTableLine({
     prefix,
     metrics,
     file,
@@ -123,4 +123,4 @@ export default function SummaryTableLine({
                 ))}
         </>
     );
-}
+};
diff --git a/packages/istanbul-reports/lib/html-spa/webpack.config.js b/packages/istanbul-reports/lib/html-spa/webpack.config.js
@@ -0,0 +1,22 @@
+'use strict';
+
+const path = require('path');
+
+module.exports = {
+    entry: path.resolve(__dirname, 'src/index.js'),
+    output: {
+        path: path.resolve(__dirname, 'assets'),
+        filename: 'bundle.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            }
+        ]
+    }
+};
diff --git a/packages/istanbul-reports/package.json b/packages/istanbul-reports/package.json
@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "test": "nyc --nycrc-path=../../monorepo-per-package-nycrc.json mocha --recursive",
-    "prepare": "rollup --config lib/html-spa/rollup.config.js",
-    "prepare:watch": "rollup -w --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"
@@ -20,6 +20,7 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@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",
@@ -28,12 +29,8 @@
     "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"
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.5"
   },
   "license": "BSD-3-Clause",
   "repository": {
@@ -53,7 +50,6 @@
     "exclude": [
       "lib/html/assets/**",
       "lib/html-spa/assets/**",
-      "lib/html-spa/src/**",
       "lib/html-spa/rollup.config.js",
       "test/**"
     ]

diff --git a/packages/istanbul-reports/test/html-spa/src/getChildData.js b/packages/istanbul-reports/test/html-spa/src/getChildData.js
@@ -0,0 +1,71 @@
+'use strict';
+/* globals describe, it */
+const assert = require('chai').assert;
+const getChildData = require('../../../lib/html-spa/src/getChildData');
+
+const mediumMetrics = {
+    statements: {
+        total: 2100,
+        covered: 1337,
+        skipped: 0,
+        pct: 63.67,
+        classForPercent: 'medium'
+    },
+    branches: {
+        total: 983,
+        covered: 606,
+        skipped: 0,
+        pct: 61.65,
+        classForPercent: 'medium'
+    },
+    functions: {
+        total: 476,
+        covered: 312,
+        skipped: 0,
+        pct: 65.55,
+        classForPercent: 'medium'
+    },
+    lines: {
+        total: 2044,
+        covered: 1313,
+        skipped: 0,
+        pct: 64.24,
+        classForPercent: 'medium'
+    }
+};
+
+const simpleSourceData = {
+    file: '',
+    isEmpty: false,
+    metrics: mediumMetrics,
+    children: [
+        {
+            file: 'istanbul-lib-coverage',
+            isEmpty: false,
+            metrics: mediumMetrics,
+            children: [
+                {
+                    file: 'index.js',
+                    isEmpty: false,
+                    metrics: mediumMetrics
+                }
+            ]
+        }
+    ]
+};
+
+describe('getChildData', () => {
+    it('does nothing if not asked to', () => {
+        assert.deepEqual(
+            getChildData(
+                simpleSourceData,
+                { lines: true, branches: true },
+                null,
+                false,
+                { low: true, medium: true, high: true },
+                null
+            ),
+            simpleSourceData.children
+        );
+    });
+});