test: Show number of tests left to be executed (#6588)

When running tests locally on many browsers, it can be difficult to tell
which browsers are done. You need to look at the number of executed and
skipped tests, sum them, and compare that to the total number of tests.
With each browser skipping different numbers of tests and running at
different speeds, this is painful.

This modifies the test reporters to show the number of tests left. This
gives you, at a glance, which browsers are done and how close each is to
completion.

karma.conf.js

@@ -166,20 +166,32 @@ module.exports = (config) => {
       'jasmine',
     ],
 
-    // An expressjs middleware, essentially a component that handles requests
-    // in Karma's webserver.  This one is custom, and will let us take
-    // screenshots of browsers connected through WebDriver.
-    middleware: ['webdriver-screenshot'],
+    middleware: [
+      // An expressjs middleware, essentially a component that handles requests
+      // in Karma's webserver.  This one is custom, and will let us take
+      // screenshots of browsers connected through WebDriver.
+      'webdriver-screenshot',
+
+      // A "middleware" that lets us hook and augment the reporters with
+      // additional information.
+      'augment-reporters',
+    ],
 
     plugins: [
       'karma-*',  // default plugins
       '@*/karma-*', // default scoped plugins
 
-      // An inline plugin which supplies the webdriver-screenshot middleware.
       {
+        // An inline plugin which supplies the webdriver-screenshot middleware.
         'middleware:webdriver-screenshot': [
           'factory', WebDriverScreenshotMiddlewareFactory,
         ],
+
+        // An inline plugin which augments the Reporter to add additional
+        // information.
+        'middleware:augment-reporters': [
+          'factory', AugmentReportersFactory,
+        ],
       },
     ],
 
@@ -890,3 +902,39 @@ function WebDriverScreenshotMiddlewareFactory(launcher) {
   }
 }
 WebDriverScreenshotMiddlewareFactory.$inject = ['launcher'];
+
+/**
+ * This is a factory for a "middleware" component that handles requests in
+ * Karma's webserver.  We don't handle any actual requests here, but we use this
+ * plugin to get access to the reporters through dependency injection and
+ * augment them to display the number of tests left to be processed.
+ *
+ * This is useful when running tests locally on many browsers, since you can
+ * see more clearly which browsers are still working and which are done.
+ *
+ * This could have been done through a fork of Karma itself, but this plugin
+ * was clearer in some ways than using a fork of a now-extinct project.
+ *
+ * @param {karma.Launcher} launcher
+ * @return {karma.Middleware}
+ */
+function AugmentReportersFactory(reporters) {
+  // Augment each reporter in the list.
+  for (const reporter of reporters) {
+    // Shim the renderBrowser function to add the number of test cases not yet
+    // processed (passed, failed, or skipped).
+    // The source we are patching: https://github.com/karma-runner/karma/blob/d8cf806e/lib/reporters/base.js#L37
+    const orig = reporter.renderBrowser;
+    reporter.renderBrowser = (browser) => {
+      const results = browser.lastResult;
+      const processed = results.success + results.failed + results.skipped;
+      const left = results.total - processed;
+      return orig(browser) + ` (${left} left)`;
+    };
+  }
+
+  // Return a dummy middleware that does nothing and chains to the next
+  // middleware.
+  return (request, response, next) => next();
+}
+AugmentReportersFactory.$inject = ['reporter._reporters'];