HTML Reporter: Internally use runStart and runEnd events

Switch from `QUnit.begin()` to `QUnit.done()` to the `runStart` and
`runEnd` events, as well as the data these provide, such as the
test counts and runtime.

As part of making the interface less cluttered, I'm proposing we
remove the runtime and status-specific counts from the realtime
progress text, as these were rapidly changing and are hard to read.

These changes, together, would allow removal of a number of things:

* Remove internal dependency on Test class (in favour of runStart data).
* Remove local counting of test by status (in favour of runEnd data).
* Remove local time measuring.

I've moved the progress line from being the third line in the
testresult-display element, to be the first line. This way, the number
of completed tests will be in the same place as where it is displayed
when the run has ended.

I've also removed the line break between "Running" and the name of
the currently running tests. This way the testresult display will
generally have the same visual height during and after the test run.
(Previously, there was jump ump after the test run, since there are
only two lines in the final state, but with the linebreak we had
three lines when tests are running.)

Ref #1486.

src/html-reporter/html.js

@@ -1,17 +1,13 @@
 import QUnit from "../core";
 import Logger from "../logger";
-import Test from "../test";
-import { now, extend, errorString } from "../core/utilities";
+import { extend, errorString } from "../core/utilities";
 import { window, document, navigator, console } from "../globals";
 import "./urlparams";
 import fuzzysort from "fuzzysort";
 
-// TODO: Remove adhoc counting in favour of stats from QUnit.done() or "runEnd" event.
 const stats = {
-	passedTests: 0,
-	failedTests: 0,
-	skippedTests: 0,
-	todoTests: 0
+	defined: 0,
+	completed: 0
 };
 
 // Escape text for attribute or text content.
@@ -169,7 +165,7 @@ export function escapeText( s ) {
 				": </label><select id='qunit-urlconfig-" + escaped +
 				"' name='" + escaped + "' title='" + escapedTooltip + "'><option></option>";
 
-				if ( QUnit.is( "array", val.value ) ) {
+				if ( Array.isArray( val.value ) ) {
 					for ( j = 0; j < val.value.length; j++ ) {
 						escaped = escapeText( val.value[ j ] );
 						urlConfigHtml += "<option value='" + escaped + "'" +
@@ -679,37 +675,36 @@ export function escapeText( s ) {
 	}
 
 	// HTML Reporter initialization and load
-	QUnit.begin( function() {
+	QUnit.on( "runStart", function( runStart ) {
+
+		stats.defined = runStart.testCounts.total;
 
 		// Initialize QUnit elements
 		appendInterface();
 	} );
 
-	QUnit.done( function( details ) {
+	QUnit.on( "runEnd", function( runEnd ) {
 		var banner = id( "qunit-banner" ),
 			tests = id( "qunit-tests" ),
 			abortButton = id( "qunit-abort-tests-button" ),
-			totalTests = stats.passedTests +
-				stats.skippedTests +
-				stats.todoTests +
-				stats.failedTests,
+			assertPassed = config.stats.all - config.stats.bad,
 			html = [
-				totalTests,
+				runEnd.testCounts.total,
 				" tests completed in ",
-				details.runtime,
+				runEnd.runtime,
 				" milliseconds, with ",
-				stats.failedTests,
+				runEnd.testCounts.failed,
 				" failed, ",
-				stats.skippedTests,
+				runEnd.testCounts.skipped,
 				" skipped, and ",
-				stats.todoTests,
+				runEnd.testCounts.todo,
 				" todo.<br />",
 				"<span class='passed'>",
-				details.passed,
+				assertPassed,
 				"</span> assertions of <span class='total'>",
-				details.total,
+				config.stats.all,
 				"</span> passed, <span class='failed'>",
-				details.failed,
+				config.stats.bad,
 				"</span> failed."
 			].join( "" ),
 			test,
@@ -718,7 +713,7 @@ export function escapeText( s ) {
 
 		// Update remaining tests to aborted
 		if ( abortButton && abortButton.disabled ) {
-			html = "Tests aborted after " + details.runtime + " milliseconds.";
+			html = "Tests aborted after " + runEnd.runtime + " milliseconds.";
 
 			for ( var i = 0; i < tests.children.length; i++ ) {
 				test = tests.children[ i ];
@@ -734,7 +729,7 @@ export function escapeText( s ) {
 		}
 
 		if ( banner && ( !abortButton || abortButton.disabled === false ) ) {
-			banner.className = stats.failedTests ? "qunit-fail" : "qunit-pass";
+			banner.className = runEnd.status === "failed" ? "qunit-fail" : "qunit-pass";
 		}
 
 		if ( abortButton ) {
@@ -751,7 +746,7 @@ export function escapeText( s ) {
 			// use escape sequences in case file gets loaded with non-utf-8
 			// charset
 			document.title = [
-				( stats.failedTests ? "\u2716" : "\u2714" ),
+				( runEnd.status === "failed" ? "\u2716" : "\u2714" ),
 				document.title.replace( /^[\u2714\u2716] /i, "" )
 			].join( " " );
 		}
@@ -774,26 +769,12 @@ export function escapeText( s ) {
 		return nameHtml;
 	}
 
-	function getProgressHtml( runtime, stats, total ) {
-		var completed = stats.passedTests +
-			stats.skippedTests +
-			stats.todoTests +
-			stats.failedTests;
-
+	function getProgressHtml( stats ) {
 		return [
-			"<br />",
-			completed,
+			stats.completed,
 			" / ",
-			total,
-			" tests completed in ",
-			runtime,
-			" milliseconds, with ",
-			stats.failedTests,
-			" failed, ",
-			stats.skippedTests,
-			" skipped, and ",
-			stats.todoTests,
-			" todo."
+			stats.defined,
+			" tests completed.<br />"
 		].join( "" );
 	}
 
@@ -810,11 +791,11 @@ export function escapeText( s ) {
 			bad = QUnit.config.reorder && details.previousFailure;
 
 			running.innerHTML = [
+				getProgressHtml( stats ),
 				bad ?
 					"Rerunning previously failed test: <br />" :
-					"Running: <br />",
-				getNameHtml( details.name, details.module ),
-				getProgressHtml( now() - config.started, stats, Test.count )
+					"Running: ",
+				getNameHtml( details.name, details.module )
 			].join( "" );
 		}
 
@@ -974,9 +955,9 @@ export function escapeText( s ) {
 		testTitle.innerHTML += " <b class='counts'>(" + testCounts +
 		details.assertions.length + ")</b>";
 
-		if ( details.skipped ) {
-			stats.skippedTests++;
+		stats.completed++;
 
+		if ( details.skipped ) {
 			testItem.className = "skipped";
 			skipped = document.createElement( "em" );
 			skipped.className = "qunit-skipped-label";
@@ -1001,14 +982,6 @@ export function escapeText( s ) {
 			time.className = "runtime";
 			time.innerHTML = details.runtime + " ms";
 			testItem.insertBefore( time, assertList );
-
-			if ( !testPassed ) {
-				stats.failedTests++;
-			} else if ( details.todo ) {
-				stats.todoTests++;
-			} else {
-				stats.passedTests++;
-			}
 		}
 
 		// Show the source of the test when showing assertions
@@ -1035,8 +1008,6 @@ export function escapeText( s ) {
 	} );
 
 	QUnit.on( "error", ( error ) => {
-		stats.failedTests++;
-
 		const testItem = appendTest( "global failure" );
 		if ( !testItem ) {
 

test/reporter-html/reporter-html.js

@@ -46,7 +46,7 @@ QUnit.module( "HTML Reporter", function() {
 	QUnit.test( "run progress", function( assert ) {
 		var display = document.getElementById( "qunit-testresult" );
 
-		var expected = /\d+ \/ \d+ tests completed in \d+ milliseconds, with \d+ failed, \d+ skipped, and \d+ todo./;
+		var expected = /\d+ \/ \d+ tests completed/;
 		assert.true(
 			expected.test( display.innerHTML ),
 			"progress found in displayed text"