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

src/html/HtmlReporterV2.js

@@ -30,6 +30,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     // Sub-views
     #alerts;
+    #statusBar;
     #progress;
     #banner;
     #failures;
@@ -64,6 +65,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),
@@ -96,6 +100,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
       if (result.status === 'failed') {
         this.#failures.append(result, this.#stateBuilder.currentParent);
+        this.#statusBar.showFailing();
       }
     }
 
@@ -116,6 +121,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
       if (result.status === 'failed') {
         this.#failures.append(result, this.#stateBuilder.currentParent);
+        this.#statusBar.showFailing();
       }
     }
 
@@ -134,9 +140,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) {

src/html/OverallStatusBar.js

@@ -2,6 +2,7 @@ jasmineRequire.OverallStatusBar = function(j$) {
   'use strict';
 
   const { createDom } = j$.private.htmlReporterUtils;
+  const staticClassNames = 'jasmine-overall-result jasmine-bar';
 
   class OverallStatusBar {
     #urlBuilder;
@@ -9,11 +10,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) || [];

src/html/_HTMLReporter.scss

@@ -233,8 +233,13 @@ body {
     display: block;
     color: #eee;
 
+    &.jasmine-in-progress {
+      color: $text-color;
+    }
+
     &.jasmine-failed, &.jasmine-errored {
       background-color: $failing-color;
+      color: #eee; // Override jasmine-in-progress
       border-bottom: 1px solid $page-background-color;
     }