Unit-test: the Last Reporter

.travis.yml

@@ -11,12 +11,13 @@ env:
     # phantomjs hosts binaries @ bitbucket, which has fairly restrictive
     # rate-limiting.  pull it from this sketchy site in China instead.
     - PHANTOMJS_CDNURL='https://cnpmjs.org/downloads'
+      COVERAGE=true
 
 matrix:
   fast_finish: true
   include:
     - node_js: '8'
-      env: TARGET=test-node COVERAGE=true
+      env: TARGET=test-node
     - node_js: '7'
       env: TARGET=test-node
     - node_js: '6'

Makefile

@@ -7,25 +7,42 @@ ifdef COVERAGE
 define test_node
 	$(NYC) --report-dir coverage/reports/$(1) $(MOCHA)
 endef
+	instrument_browser := -t ./instrumentBrowserEntry
 else
 	test_node := $(MOCHA)
 endif
 
-TM_BUNDLE = JavaScript\ mocha.tmbundle
-SRC = $(shell find lib -name "*.js" -type f | LC_ALL=C sort)
-TESTS = $(shell find test -name "*.js" -type f | sort)
-
-all: mocha.js
-
-mocha.js BUILDTMP/mocha.js: $(SRC) browser-entry.js
-	@printf "==> [Browser :: build]\n"
-	mkdir -p ${@D}
+define bundle_command
 	$(BROWSERIFY) ./browser-entry \
+		$(1) \
 		--plugin ./scripts/dedefine \
 		--ignore 'fs' \
 		--ignore 'glob' \
 		--ignore 'path' \
 		--ignore 'supports-color' > $@
+endef
+
+TM_BUNDLE = JavaScript\ mocha.tmbundle
+SRC = $(shell find lib -name "*.js" -type f | LC_ALL=C sort)
+TESTS = $(shell find test -name "*.js" -type f | sort)
+
+all: mocha.js
+
+mocha.js: $(SRC) browser-entry.js
+	@printf "==> [Browser :: Build]\n"
+	$(call bundle_command)
+
+BUILDTMP/mocha.js: $(SRC) browser-entry.js BUILDTMP BUILDTMP/mocha.css
+	@printf "==> [Browser :: Build :: Test :: Bundle]\n"
+	$(call bundle_command,$(instrument_browser))
+
+BUILDTMP/mocha.css: BUILDTMP
+	@printf "==> [Browser :: Build :: Test :: CSS]\n"
+	cp mocha.css $@
+
+BUILDTMP:
+	@printf "==> [Browser :: Build :: Test :: Temporary Directory]\n"
+	mkdir -p $@
 
 clean:
 	@printf "==> [Clean]\n"

README.md

@@ -9,13 +9,14 @@
 *Thank you* :kissing_heart: to all of you interested in helping.  These are Mocha's immediate needs:
 
 1. Increase test coverage on Node.js and browser
-  - Increase integration coverage for all reporters
-    - `html` reporter must be tested in browser
+  - ~~Increase integration coverage for all reporters~~
+    - ~~`html` reporter must be tested in browser~~
     - ~~Basic console reporters (*not* `nyan`, `landing`, etc.) must be tested in **both** browser and Node.js contexts; PhantomJS can consume all console reporters~~
     - ~~Filesystem-based reporters must be tested in Node.js context~~
-    - **UPDATE - May 24 2017**: Thanks to [community contributions](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#mag-coverage), the coverage on most reporters has increased dramatically!  The `html` reporter is still in [dire need of coverage](https://coveralls.io/builds/11674428/source?filename=lib%2Freporters%2Fhtml.js).
+    - **UPDATE - May 24 2017**: Thanks to [community contributions](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#mag-coverage), the coverage on most reporters has increased dramatically! ~~The `html` reporter is still in dire need of coverage.~~
   - Increase coverage against all interfaces (`exports` in particular).  Ideally this becomes a "matrix" where we repeat sets of integration tests across all interfaces.
   - Refactor non-Node.js-specific tests to allow them to run in a browser context.  Node.js-specific tests include those which *require* the CLI or filesystem.  Most everything else is fair game.
+  - In general, anything with relatively low coverage percentage could use a little more attention; but also feel free to look for files with a low but non-zero number of uncovered branches or functions, which may not need much to test the other branch and/or the function in question.
 2.  Review current open pull requests
   - We need individuals familiar with Mocha's codebase. Got questions?  Ask them in [our chat room](https://gitter.im/mochajs/mocha).
   - Pull requests **must** have supporting tests.  The only exceptions are pure cosmetic or non-functional changes.

instrumentBrowserEntry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var browserifyIstanbul = require('browserify-istanbul');
+
+var nyc = require('./nycInstrumenter');
+
+var overrideOptions = { ignore: ['**/lib/**', '**/node_modules/**', '**/test/**'], instrumenter: nyc };
+
+module.exports = function (file, options) {
+  return browserifyIstanbul(file, Object.assign({}, options, overrideOptions));
+};

karma.conf.js

@@ -5,9 +5,16 @@ var path = require('path');
 var mkdirp = require('mkdirp');
 var baseBundleDirpath = path.join(__dirname, '.karma');
 var osName = require('os-name');
+var workaroundMultiplePreprocessorIncompatibility = require('browserify-istanbul');
+var nyc = require('./nycInstrumenter');
 
 module.exports = function (config) {
   var bundleDirpath;
+  var filesBase = [
+    // make browserify bundle these properly (if nothing else, this is necessary for coverage transform; unclear whether it makes a difference as to how browserify gets them otherwise, as it doesn't print any debug logs about them without it)
+    { pattern: 'browser-entry.js', included: false, served: false },
+    { pattern: 'lib/**/*.js', included: false, served: false }
+  ];
   var cfg = {
     frameworks: [
       'browserify',
@@ -23,12 +30,14 @@ module.exports = function (config) {
       'karma-spec-reporter',
       require('@coderbyheart/karma-sauce-launcher')
     ],
-    files: [
+    files: filesBase.concat([
       // we use the BDD interface for all of the tests that
       // aren't interface-specific.
       'test/browser-fixtures/bdd.fixture.js',
-      'test/unit/*.spec.js'
-    ],
+      'test/unit/*.spec.js',
+      'test/browser-unit/*.spec.js',
+      'test/browser-reporters/*.spec.js'
+    ]),
     preprocessors: {
       'test/**/*.js': ['browserify']
     },
@@ -128,14 +137,31 @@ module.exports = function (config) {
     if (cfg.sauceLabs) {
       cfg.sauceLabs.testName = 'Interface "' + ui + '" integration tests';
     }
-    cfg.files = [
+    cfg.files = filesBase.concat([
       'test/browser-fixtures/' + ui + '.fixture.js',
       'test/interfaces/' + ui + '.spec.js'
-    ];
+    ]);
   } else if (cfg.sauceLabs) {
     cfg.sauceLabs.testName = 'Unit Tests';
   }
 
+  if (env.COVERAGE) {
+    cfg.plugins.push('karma-coverage');
+    filesBase.forEach(function (file) {
+      cfg.preprocessors[file.pattern] = ['browserify'];
+    });
+    cfg.reporters.push('coverage');
+    cfg.coverageReporter = {
+      instrumenters: { istanbul: nyc },
+      reporters: [ { type: 'json' }, { type: 'text-summary' } ],
+      dir: 'coverage/reports/browser' + (ui ? '-' + ui : ''),
+      subdir: '.',
+      includeAllSources: true
+    };
+    cfg.browserify.transform = [ workaroundMultiplePreprocessorIncompatibility({ ignore: ['**/node_modules/**', '**/test/**'], instrumenter: nyc }) ];
+    console.error('Reporting coverage to ' + cfg.coverageReporter.dir);
+  }
+
   config.set(cfg);
 };
 

lib/reporters/html.js

@@ -86,22 +86,22 @@ function HTML (runner) {
   // pass toggle
   on(passesLink, 'click', function (evt) {
     evt.preventDefault();
-    unhide();
+    unhide(report);
     var name = (/pass/).test(report.className) ? '' : ' pass';
     report.className = report.className.replace(/fail|pass/g, '') + name;
     if (report.className.trim()) {
-      hideSuitesWithout('test pass');
+      hideSuitesWithout(report, 'test pass');
     }
   });
 
   // failure toggle
   on(failuresLink, 'click', function (evt) {
     evt.preventDefault();
-    unhide();
+    unhide(report);
     var name = (/fail/).test(report.className) ? '' : ' fail';
     report.className = report.className.replace(/fail|pass/g, '') + name;
     if (report.className.trim()) {
-      hideSuitesWithout('test fail');
+      hideSuitesWithout(report, 'test fail');
     }
   });
 
@@ -302,8 +302,8 @@ function fragment (html) {
  *
  * @param {text} classname
  */
-function hideSuitesWithout (classname) {
-  var suites = document.getElementsByClassName('suite');
+function hideSuitesWithout (root, classname) {
+  var suites = root.getElementsByClassName('suite');
   for (var i = 0; i < suites.length; i++) {
     var els = suites[i].getElementsByClassName(classname);
     if (!els.length) {
@@ -315,9 +315,9 @@ function hideSuitesWithout (classname) {
 /**
  * Unhide .hidden suites.
  */
-function unhide () {
-  var els = document.getElementsByClassName('suite hidden');
-  for (var i = 0; i < els.length; ++i) {
+function unhide (root) {
+  var els = root.getElementsByClassName('suite hidden');
+  for (var i = els.length - 1; i >= 0; --i) {
     els[i].className = els[i].className.replace('suite hidden', 'suite');
   }
 }

nycInstrumenter.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var defaultOptions = {
+  autoWrap: true,
+  embedSource: true,
+  produceSourceMap: true,
+  noCompact: false
+};
+
+var istanbulLib;
+try {
+  istanbulLib = require('nyc/node_modules/istanbul-lib-instrument');
+} catch (ignore) {
+  istanbulLib = require('istanbul-lib-instrument');
+}
+module.exports = { Instrumenter: function (options) { return istanbulLib.createInstrumenter(Object.assign({}, defaultOptions, options)); } };

package.json

@@ -323,6 +323,7 @@
     "@coderbyheart/karma-sauce-launcher": "coderbyheart/karma-sauce-launcher#5259942cd6d40090eaa13ceeef5b0b8738c7710f",
     "assert": "^1.4.1",
     "browserify": "^13.0.0",
+    "browserify-istanbul": "^2.0.0",
     "coffee-script": "^1.10.0",
     "coveralls": "^2.11.15",
     "eslint": "^3.11.1",
@@ -335,6 +336,7 @@
     "karma": "1.3.0",
     "karma-browserify": "^5.0.5",
     "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
     "karma-expect": "^1.1.2",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "0.2.3",

test/browser-fixtures/bdd.fixture.js

@@ -4,5 +4,5 @@
 
 process.stdout = require('browser-stdout')();
 
-window.mocha.timeout(200)
+window.mocha.timeout(500)
   .ui('bdd');

test/browser-fixtures/exports.fixture.js

@@ -4,5 +4,5 @@
 
 process.stdout = require('browser-stdout')();
 
-window.mocha.timeout(200)
+window.mocha.timeout(500)
   .ui('exports');

test/browser-fixtures/qunit.fixture.js

@@ -4,5 +4,5 @@
 
 process.stdout = require('browser-stdout')();
 
-window.mocha.timeout(200)
+window.mocha.timeout(500)
   .ui('qunit');

test/browser-fixtures/tdd.fixture.js

@@ -4,5 +4,5 @@
 
 process.stdout = require('browser-stdout')();
 
-window.mocha.timeout(200)
+window.mocha.timeout(500)
   .ui('tdd');