HtmlReporterV2: Show a non-color indication of status while running

lib/jasmine-core/jasmine-html.js

@@ -978,6 +978,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     // Sub-views
     #alerts;
+    #statusBar;
     #progress;
     #banner;
     #failures;
@@ -1012,6 +1013,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.#stateBuilder = new j$.private.ResultsStateBuilder();
 
       this.#alerts = new j$.private.AlertsView(this.#urlBuilder);
+      this.#statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
+      this.#statusBar.showRunning();
+      this.#alerts.addBar(this.#statusBar.rootEl);
       this.#progress = new ProgressView();
       this.#banner = new j$.private.Banner(
         this.#queryString.navigateWithNewParam.bind(this.#queryString),
@@ -1044,6 +1048,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
       if (result.status === 'failed') {
         this.#failures.append(result, this.#stateBuilder.currentParent);
+        this.#statusBar.showFailing();
       }
     }
 
@@ -1064,6 +1069,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
       if (result.status === 'failed') {
         this.#failures.append(result, this.#stateBuilder.currentParent);
+        this.#statusBar.showFailing();
       }
     }
 
@@ -1082,9 +1088,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         );
       }
 
-      const statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
-      statusBar.showDone(doneResult, this.#stateBuilder);
-      this.#alerts.addBar(statusBar.rootEl);
+      this.#statusBar.showDone(doneResult, this.#stateBuilder);
 
       if (doneResult.failedExpectations) {
         for (const f of doneResult.failedExpectations) {
@@ -1327,6 +1331,7 @@ jasmineRequire.OverallStatusBar = function(j$) {
   'use strict';
 
   const { createDom } = j$.private.htmlReporterUtils;
+  const staticClassNames = 'jasmine-overall-result jasmine-bar';
 
   class OverallStatusBar {
     #urlBuilder;
@@ -1334,11 +1339,25 @@ jasmineRequire.OverallStatusBar = function(j$) {
     constructor(urlBuilder) {
       this.#urlBuilder = urlBuilder;
       this.rootEl = createDom('span', {
-        className: 'jasmine-overall-result jasmine-bar'
+        className: staticClassNames,
+        'aria-live': 'polite'
       });
     }
 
+    showRunning() {
+      this.rootEl.textContent = 'Running...';
+      this.rootEl.classList.add('jasmine-in-progress');
+    }
+
+    showFailing() {
+      this.rootEl.textContent = 'Failing...';
+      this.rootEl.classList.add('jasmine-failed');
+    }
+
     showDone(doneResult, stateBuilder) {
+      // Clear any classes added to represent in-progress state
+      this.rootEl.className = staticClassNames;
+
       let statusBarMessage = '';
       const globalFailures =
         (doneResult && doneResult.failedExpectations) || [];

lib/jasmine-core/jasmine.css

@@ -162,8 +162,12 @@ body {
   display: block;
   color: #eee;
 }
+.jasmine_html-reporter .jasmine-bar.jasmine-in-progress {
+  color: #333;
+}
 .jasmine_html-reporter .jasmine-bar.jasmine-failed, .jasmine_html-reporter .jasmine-bar.jasmine-errored {
   background-color: #ca3a11;
+  color: #eee;
   border-bottom: 1px solid #eee;
 }
 .jasmine_html-reporter .jasmine-bar.jasmine-passed {