Extract an OverallStatusBar widget

lib/jasmine-core/jasmine-html.js

@@ -30,6 +30,7 @@ jasmineRequire.html = function(j$) {
   j$.private.ResultsStateBuilder = jasmineRequire.ResultsStateBuilder(j$);
   j$.private.htmlReporterUtils = jasmineRequire.htmlReporterUtils(j$);
   j$.private.AlertsView = jasmineRequire.AlertsView(j$);
+  j$.private.OverallStatusBar = jasmineRequire.OverallStatusBar(j$);
   j$.private.Banner = jasmineRequire.Banner(j$);
   j$.private.SymbolsView = jasmineRequire.SymbolsView(j$);
   j$.private.SummaryTreeView = jasmineRequire.SummaryTreeView(j$);
@@ -164,7 +165,9 @@ jasmineRequire.HtmlReporter = function(j$) {
         );
       }
 
-      this.#alerts.addSeedBar(doneResult, this.#stateBuilder, doneResult.order);
+      const statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
+      statusBar.showDone(doneResult, this.#stateBuilder);
+      this.#alerts.addBar(statusBar.rootEl);
 
       if (doneResult.failedExpectations) {
         for (const f of doneResult.failedExpectations) {
@@ -422,11 +425,11 @@ jasmineRequire.AlertsView = function(j$) {
     }
 
     addDuration(ms) {
-      this.#add('jasmine-duration', 'finished in ' + ms / 1000 + 's');
+      this.#createAndAdd('jasmine-duration', 'finished in ' + ms / 1000 + 's');
     }
 
     addSkipped(numExecuted, numDefined) {
-      this.#add(
+      this.#createAndAdd(
         'jasmine-bar jasmine-skipped',
         createDom(
           'a',
@@ -458,69 +461,21 @@ jasmineRequire.AlertsView = function(j$) {
         return false;
       };
 
-      this.#add('jasmine-menu jasmine-bar jasmine-spec-list', [
+      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-spec-list', [
         createDom('span', {}, 'Spec List | '),
         failuresLink
       ]);
-      this.#add('jasmine-menu jasmine-bar jasmine-failure-list', [
+      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-failure-list', [
         specListLink,
         createDom('span', {}, ' | Failures ')
       ]);
     }
 
     addGlobalFailure(failure) {
-      this.#add(errorBarClassName, this.#globalFailureMessage(failure));
+      this.#createAndAdd(
-    }
+        errorBarClassName,
-
+        this.#globalFailureMessage(failure)
-    addSeedBar(doneResult, stateBuilder, order) {
+      );
-      let statusBarMessage = '';
-      let statusBarClassName = 'jasmine-overall-result jasmine-bar ';
-      const globalFailures =
-        (doneResult && doneResult.failedExpectations) || [];
-      const failed = stateBuilder.failureCount + globalFailures.length > 0;
-
-      if (stateBuilder.totalSpecsDefined > 0 || failed) {
-        statusBarMessage +=
-          pluralize('spec', stateBuilder.specsExecuted) +
-          ', ' +
-          pluralize('failure', stateBuilder.failureCount);
-        if (stateBuilder.pendingSpecCount) {
-          statusBarMessage +=
-            ', ' + pluralize('pending spec', stateBuilder.pendingSpecCount);
-        }
-      }
-
-      if (doneResult.overallStatus === 'passed') {
-        statusBarClassName += ' jasmine-passed ';
-      } else if (doneResult.overallStatus === 'incomplete') {
-        statusBarClassName += ' jasmine-incomplete ';
-        statusBarMessage =
-          'Incomplete: ' +
-          doneResult.incompleteReason +
-          ', ' +
-          statusBarMessage;
-      } else {
-        statusBarClassName += ' jasmine-failed ';
-      }
-
-      let seedBar;
-      if (order && order.random) {
-        seedBar = createDom(
-          'span',
-          { className: 'jasmine-seed-bar' },
-          ', randomized with seed ',
-          createDom(
-            'a',
-            {
-              title: 'randomized with seed ' + order.seed,
-              href: this.#urlBuilder.seedHref(order.seed)
-            },
-            order.seed
-          )
-        );
-      }
-
-      this.#add(statusBarClassName, [statusBarMessage, seedBar]);
     }
 
     #globalFailureMessage(failure) {
@@ -566,10 +521,14 @@ jasmineRequire.AlertsView = function(j$) {
         children.push(this.#createExpander(dw.stack));
       }
 
-      this.#add('jasmine-bar jasmine-warning', children);
+      this.#createAndAdd('jasmine-bar jasmine-warning', children);
     }
 
-    #add(className, children) {
+    addBar(el) {
+      this.rootEl.appendChild(el);
+    }
+
+    #createAndAdd(className, children) {
       this.rootEl.appendChild(createDom('span', { className }, children));
     }
 
@@ -602,12 +561,6 @@ jasmineRequire.AlertsView = function(j$) {
     }
   }
 
-  function pluralize(singular, count) {
-    const word = count == 1 ? singular : singular + 's';
-
-    return '' + count + ' ' + word;
-  }
-
   return AlertsView;
 };
 
@@ -1129,7 +1082,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         );
       }
 
-      this.#alerts.addSeedBar(doneResult, this.#stateBuilder, doneResult.order);
+      const statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
+      statusBar.showDone(doneResult, this.#stateBuilder);
+      this.#alerts.addBar(statusBar.rootEl);
 
       if (doneResult.failedExpectations) {
         for (const f of doneResult.failedExpectations) {
@@ -1368,6 +1323,82 @@ jasmineRequire.HtmlSpecFilterV2 = function() {
   return HtmlSpecFilterV2;
 };
 
+jasmineRequire.OverallStatusBar = function(j$) {
+  'use strict';
+
+  const { createDom } = j$.private.htmlReporterUtils;
+
+  class OverallStatusBar {
+    #urlBuilder;
+
+    constructor(urlBuilder) {
+      this.#urlBuilder = urlBuilder;
+      this.rootEl = createDom('span', {
+        className: 'jasmine-overall-result jasmine-bar'
+      });
+    }
+
+    showDone(doneResult, stateBuilder) {
+      let statusBarMessage = '';
+      const globalFailures =
+        (doneResult && doneResult.failedExpectations) || [];
+      const failed = stateBuilder.failureCount + globalFailures.length > 0;
+
+      if (stateBuilder.totalSpecsDefined > 0 || failed) {
+        statusBarMessage +=
+          pluralize('spec', stateBuilder.specsExecuted) +
+          ', ' +
+          pluralize('failure', stateBuilder.failureCount);
+        if (stateBuilder.pendingSpecCount) {
+          statusBarMessage +=
+            ', ' + pluralize('pending spec', stateBuilder.pendingSpecCount);
+        }
+      }
+
+      if (doneResult.overallStatus === 'passed') {
+        this.rootEl.classList.add('jasmine-passed');
+      } else if (doneResult.overallStatus === 'incomplete') {
+        this.rootEl.classList.add('jasmine-incomplete');
+        statusBarMessage =
+          'Incomplete: ' +
+          doneResult.incompleteReason +
+          ', ' +
+          statusBarMessage;
+      } else {
+        this.rootEl.classList.add('jasmine-failed');
+      }
+
+      this.rootEl.textContent = statusBarMessage;
+
+      const order = doneResult.order;
+      if (order && order.random) {
+        this.rootEl.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-seed-bar' },
+            ', randomized with seed ',
+            createDom(
+              'a',
+              {
+                title: 'randomized with seed ' + order.seed,
+                href: this.#urlBuilder.seedHref(order.seed)
+              },
+              order.seed
+            )
+          )
+        );
+      }
+    }
+  }
+
+  function pluralize(singular, count) {
+    const word = count === 1 ? singular : singular + 's';
+    return '' + count + ' ' + word;
+  }
+
+  return OverallStatusBar;
+};
+
 jasmineRequire.ResultsStateBuilder = function(j$) {
   'use strict';
 

src/html/AlertsView.js

@@ -14,11 +14,11 @@ jasmineRequire.AlertsView = function(j$) {
     }
 
     addDuration(ms) {
-      this.#add('jasmine-duration', 'finished in ' + ms / 1000 + 's');
+      this.#createAndAdd('jasmine-duration', 'finished in ' + ms / 1000 + 's');
     }
 
     addSkipped(numExecuted, numDefined) {
-      this.#add(
+      this.#createAndAdd(
         'jasmine-bar jasmine-skipped',
         createDom(
           'a',
@@ -50,69 +50,21 @@ jasmineRequire.AlertsView = function(j$) {
         return false;
       };
 
-      this.#add('jasmine-menu jasmine-bar jasmine-spec-list', [
+      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-spec-list', [
         createDom('span', {}, 'Spec List | '),
         failuresLink
       ]);
-      this.#add('jasmine-menu jasmine-bar jasmine-failure-list', [
+      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-failure-list', [
         specListLink,
         createDom('span', {}, ' | Failures ')
       ]);
     }
 
     addGlobalFailure(failure) {
-      this.#add(errorBarClassName, this.#globalFailureMessage(failure));
+      this.#createAndAdd(
-    }
+        errorBarClassName,
-
+        this.#globalFailureMessage(failure)
-    addSeedBar(doneResult, stateBuilder, order) {
+      );
-      let statusBarMessage = '';
-      let statusBarClassName = 'jasmine-overall-result jasmine-bar ';
-      const globalFailures =
-        (doneResult && doneResult.failedExpectations) || [];
-      const failed = stateBuilder.failureCount + globalFailures.length > 0;
-
-      if (stateBuilder.totalSpecsDefined > 0 || failed) {
-        statusBarMessage +=
-          pluralize('spec', stateBuilder.specsExecuted) +
-          ', ' +
-          pluralize('failure', stateBuilder.failureCount);
-        if (stateBuilder.pendingSpecCount) {
-          statusBarMessage +=
-            ', ' + pluralize('pending spec', stateBuilder.pendingSpecCount);
-        }
-      }
-
-      if (doneResult.overallStatus === 'passed') {
-        statusBarClassName += ' jasmine-passed ';
-      } else if (doneResult.overallStatus === 'incomplete') {
-        statusBarClassName += ' jasmine-incomplete ';
-        statusBarMessage =
-          'Incomplete: ' +
-          doneResult.incompleteReason +
-          ', ' +
-          statusBarMessage;
-      } else {
-        statusBarClassName += ' jasmine-failed ';
-      }
-
-      let seedBar;
-      if (order && order.random) {
-        seedBar = createDom(
-          'span',
-          { className: 'jasmine-seed-bar' },
-          ', randomized with seed ',
-          createDom(
-            'a',
-            {
-              title: 'randomized with seed ' + order.seed,
-              href: this.#urlBuilder.seedHref(order.seed)
-            },
-            order.seed
-          )
-        );
-      }
-
-      this.#add(statusBarClassName, [statusBarMessage, seedBar]);
     }
 
     #globalFailureMessage(failure) {
@@ -158,10 +110,14 @@ jasmineRequire.AlertsView = function(j$) {
         children.push(this.#createExpander(dw.stack));
       }
 
-      this.#add('jasmine-bar jasmine-warning', children);
+      this.#createAndAdd('jasmine-bar jasmine-warning', children);
     }
 
-    #add(className, children) {
+    addBar(el) {
+      this.rootEl.appendChild(el);
+    }
+
+    #createAndAdd(className, children) {
       this.rootEl.appendChild(createDom('span', { className }, children));
     }
 
@@ -194,11 +150,5 @@ jasmineRequire.AlertsView = function(j$) {
     }
   }
 
-  function pluralize(singular, count) {
-    const word = count == 1 ? singular : singular + 's';
-
-    return '' + count + ' ' + word;
-  }
-
   return AlertsView;
 };

src/html/HtmlReporter.js

@@ -120,7 +120,9 @@ jasmineRequire.HtmlReporter = function(j$) {
         );
       }
 
-      this.#alerts.addSeedBar(doneResult, this.#stateBuilder, doneResult.order);
+      const statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
+      statusBar.showDone(doneResult, this.#stateBuilder);
+      this.#alerts.addBar(statusBar.rootEl);
 
       if (doneResult.failedExpectations) {
         for (const f of doneResult.failedExpectations) {

src/html/HtmlReporterV2.js

@@ -134,7 +134,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         );
       }
 
-      this.#alerts.addSeedBar(doneResult, this.#stateBuilder, doneResult.order);
+      const statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
+      statusBar.showDone(doneResult, this.#stateBuilder);
+      this.#alerts.addBar(statusBar.rootEl);
 
       if (doneResult.failedExpectations) {
         for (const f of doneResult.failedExpectations) {

src/html/OverallStatusBar.js

@@ -0,0 +1,75 @@
+jasmineRequire.OverallStatusBar = function(j$) {
+  'use strict';
+
+  const { createDom } = j$.private.htmlReporterUtils;
+
+  class OverallStatusBar {
+    #urlBuilder;
+
+    constructor(urlBuilder) {
+      this.#urlBuilder = urlBuilder;
+      this.rootEl = createDom('span', {
+        className: 'jasmine-overall-result jasmine-bar'
+      });
+    }
+
+    showDone(doneResult, stateBuilder) {
+      let statusBarMessage = '';
+      const globalFailures =
+        (doneResult && doneResult.failedExpectations) || [];
+      const failed = stateBuilder.failureCount + globalFailures.length > 0;
+
+      if (stateBuilder.totalSpecsDefined > 0 || failed) {
+        statusBarMessage +=
+          pluralize('spec', stateBuilder.specsExecuted) +
+          ', ' +
+          pluralize('failure', stateBuilder.failureCount);
+        if (stateBuilder.pendingSpecCount) {
+          statusBarMessage +=
+            ', ' + pluralize('pending spec', stateBuilder.pendingSpecCount);
+        }
+      }
+
+      if (doneResult.overallStatus === 'passed') {
+        this.rootEl.classList.add('jasmine-passed');
+      } else if (doneResult.overallStatus === 'incomplete') {
+        this.rootEl.classList.add('jasmine-incomplete');
+        statusBarMessage =
+          'Incomplete: ' +
+          doneResult.incompleteReason +
+          ', ' +
+          statusBarMessage;
+      } else {
+        this.rootEl.classList.add('jasmine-failed');
+      }
+
+      this.rootEl.textContent = statusBarMessage;
+
+      const order = doneResult.order;
+      if (order && order.random) {
+        this.rootEl.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-seed-bar' },
+            ', randomized with seed ',
+            createDom(
+              'a',
+              {
+                title: 'randomized with seed ' + order.seed,
+                href: this.#urlBuilder.seedHref(order.seed)
+              },
+              order.seed
+            )
+          )
+        );
+      }
+    }
+  }
+
+  function pluralize(singular, count) {
+    const word = count === 1 ? singular : singular + 's';
+    return '' + count + ' ' + word;
+  }
+
+  return OverallStatusBar;
+};

src/html/requireHtml.js

@@ -6,6 +6,7 @@ jasmineRequire.html = function(j$) {
   j$.private.ResultsStateBuilder = jasmineRequire.ResultsStateBuilder(j$);
   j$.private.htmlReporterUtils = jasmineRequire.htmlReporterUtils(j$);
   j$.private.AlertsView = jasmineRequire.AlertsView(j$);
+  j$.private.OverallStatusBar = jasmineRequire.OverallStatusBar(j$);
   j$.private.Banner = jasmineRequire.Banner(j$);
   j$.private.SymbolsView = jasmineRequire.SymbolsView(j$);
   j$.private.SummaryTreeView = jasmineRequire.SummaryTreeView(j$);