HtmlReporterV2: replace dots with progress bar

src/core/Configuration.js

@@ -73,6 +73,8 @@ getJasmineRequireObj().Configuration = function(j$) {
     specFilter: function() {
       return true;
     },
+
+    // TODO: remove hideDisabled when HtmlReporter is removed
     /**
      * Whether reporters should hide disabled specs from their output.
      * Currently only supported by Jasmine's HTMLReporter
@@ -80,6 +82,7 @@ getJasmineRequireObj().Configuration = function(j$) {
      * @since 3.3.0
      * @type Boolean
      * @default false
+     * @deprecated
      */
     hideDisabled: false,
     /**

src/html/Banner.js

@@ -5,9 +5,11 @@ jasmineRequire.Banner = function(j$) {
 
   class Banner {
     #navigateWithNewParam;
+    #omitHideDisabled;
 
-    constructor(navigateWithNewParam) {
+    constructor(navigateWithNewParam, omitHideDisabled) {
       this.#navigateWithNewParam = navigateWithNewParam;
+      this.#omitHideDisabled = omitHideDisabled;
       this.rootEl = createDom(
         'div',
         { className: 'jasmine-banner' },
@@ -25,55 +27,53 @@ jasmineRequire.Banner = function(j$) {
     }
 
     #optionsMenu(config) {
-      const optionsMenuDom = createDom(
-        'div',
-        { className: 'jasmine-run-options' },
-        createDom('span', { className: 'jasmine-trigger' }, 'Options'),
+      const items = [
         createDom(
           'div',
-          { className: 'jasmine-payload' },
+          { className: 'jasmine-stop-on-failure' },
+          createDom('input', {
+            className: 'jasmine-fail-fast',
+            id: 'jasmine-fail-fast',
+            type: 'checkbox'
+          }),
           createDom(
-            'div',
-            { className: 'jasmine-stop-on-failure' },
-            createDom('input', {
-              className: 'jasmine-fail-fast',
-              id: 'jasmine-fail-fast',
-              type: 'checkbox'
-            }),
-            createDom(
-              'label',
-              { className: 'jasmine-label', for: 'jasmine-fail-fast' },
-              'stop execution on spec failure'
-            )
-          ),
+            'label',
+            { className: 'jasmine-label', for: 'jasmine-fail-fast' },
+            'stop execution on spec failure'
+          )
+        ),
+        createDom(
+          'div',
+          { className: 'jasmine-throw-failures' },
+          createDom('input', {
+            className: 'jasmine-throw',
+            id: 'jasmine-throw-failures',
+            type: 'checkbox'
+          }),
           createDom(
-            'div',
-            { className: 'jasmine-throw-failures' },
-            createDom('input', {
-              className: 'jasmine-throw',
-              id: 'jasmine-throw-failures',
-              type: 'checkbox'
-            }),
-            createDom(
-              'label',
-              { className: 'jasmine-label', for: 'jasmine-throw-failures' },
-              'stop spec on expectation failure'
-            )
-          ),
+            'label',
+            { className: 'jasmine-label', for: 'jasmine-throw-failures' },
+            'stop spec on expectation failure'
+          )
+        ),
+        createDom(
+          'div',
+          { className: 'jasmine-random-order' },
+          createDom('input', {
+            className: 'jasmine-random',
+            id: 'jasmine-random-order',
+            type: 'checkbox'
+          }),
           createDom(
-            'div',
-            { className: 'jasmine-random-order' },
-            createDom('input', {
-              className: 'jasmine-random',
-              id: 'jasmine-random-order',
-              type: 'checkbox'
-            }),
-            createDom(
-              'label',
-              { className: 'jasmine-label', for: 'jasmine-random-order' },
-              'run tests in random order'
-            )
-          ),
+            'label',
+            { className: 'jasmine-label', for: 'jasmine-random-order' },
+            'run tests in random order'
+          )
+        )
+      ];
+
+      if (!this.#omitHideDisabled) {
+        items.push(
           createDom(
             'div',
             { className: 'jasmine-hide-disabled' },
@@ -88,7 +88,14 @@ jasmineRequire.Banner = function(j$) {
               'hide disabled tests'
             )
           )
-        )
+        );
+      }
+
+      const optionsMenuDom = createDom(
+        'div',
+        { className: 'jasmine-run-options' },
+        createDom('span', { className: 'jasmine-trigger' }, 'Options'),
+        createDom('div', { className: 'jasmine-payload' }, items)
       );
 
       const failFastCheckbox = optionsMenuDom.querySelector(
@@ -121,14 +128,16 @@ jasmineRequire.Banner = function(j$) {
         this.#navigateWithNewParam('random', !config.random);
       };
 
-      const hideDisabled = optionsMenuDom.querySelector(
-        '#jasmine-hide-disabled'
-      );
-      hideDisabled.checked = config.hideDisabled;
-      // TODO: backfill tests for this!
-      hideDisabled.onclick = () => {
-        this.#navigateWithNewParam('hideDisabled', !config.hideDisabled);
-      };
+      if (!this.#omitHideDisabled) {
+        const hideDisabled = optionsMenuDom.querySelector(
+          '#jasmine-hide-disabled'
+        );
+        hideDisabled.checked = config.hideDisabled;
+        // TODO: backfill tests for this!
+        hideDisabled.onclick = () => {
+          this.#navigateWithNewParam('hideDisabled', !config.hideDisabled);
+        };
+      }
 
       const optionsTrigger = optionsMenuDom.querySelector('.jasmine-trigger'),
         optionsPayload = optionsMenuDom.querySelector('.jasmine-payload'),

src/html/HtmlReporterV2.js

@@ -22,7 +22,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     // Sub-views
     #alerts;
-    #symbols;
+    #progress;
     #banner;
     #failures;
 
@@ -56,16 +56,17 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.#stateBuilder = new j$.private.ResultsStateBuilder();
 
       this.#alerts = new j$.private.AlertsView(this.#urlBuilder);
-      this.#symbols = new j$.private.SymbolsView();
+      this.#progress = new ProgressView();
       this.#banner = new j$.private.Banner(
-        this.#queryString.navigateWithNewParam.bind(this.#queryString)
+        this.#queryString.navigateWithNewParam.bind(this.#queryString),
+        true
       );
       this.#failures = new j$.private.FailuresView(this.#urlBuilder);
       this.#htmlReporterMain = createDom(
         'div',
         { className: 'jasmine_html-reporter' },
         this.#banner.rootEl,
-        this.#symbols.rootEl,
+        this.#progress.rootEl,
         this.#alerts.rootEl,
         this.#failures.rootEl
       );
@@ -74,6 +75,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     jasmineStarted(options) {
       this.#stateBuilder.jasmineStarted(options);
+      this.#progress.start(options.totalSpecsDefined);
     }
 
     suiteStarted(result) {
@@ -90,7 +92,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     specDone(result) {
       this.#stateBuilder.specDone(result);
-      this.#symbols.append(result, this.#config);
+      this.#progress.specDone(result, this.#config);
 
       if (noExpectations(result)) {
         const noSpecMsg = "Spec '" + result.fullName + "' has no expectations.";
@@ -110,6 +112,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
     jasmineDone(doneResult) {
       this.#stateBuilder.jasmineDone(doneResult);
+      this.#progress.rootEl.style.visibility = 'hidden';
       this.#alerts.addDuration(doneResult.totalTime);
       this.#banner.showOptionsMenu(this.#config);
 
@@ -175,6 +178,25 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
     }
   }
 
+  class ProgressView {
+    constructor() {
+      this.rootEl = createDom('progress', { value: 0 });
+    }
+
+    start(totalSpecsDefined) {
+      this.rootEl.max = totalSpecsDefined;
+    }
+
+    specDone(result) {
+      this.rootEl.value = this.rootEl.value + 1;
+
+      if (result.status === 'failed') {
+        // TODO: also a non-color indicator
+        this.rootEl.classList.add('failed');
+      }
+    }
+  }
+
   class UrlBuilder {
     #queryString;
     #getSuiteById;

src/html/HtmlReporterV2Urls.js

@@ -22,8 +22,7 @@ jasmineRequire.HtmlReporterV2Urls = function(j$) {
         stopOnSpecFailure: this.queryString.getParam('stopOnSpecFailure'),
         stopSpecOnExpectationFailure: this.queryString.getParam(
           'stopSpecOnExpectationFailure'
-        ),
-        hideDisabled: this.queryString.getParam('hideDisabled')
+        )
       };
 
       const random = this.queryString.getParam('random');

src/html/_HTMLReporter.scss

@@ -26,6 +26,26 @@ $space: "\0020";
 $font-size: 11px;
 $large-font-size: 14px;
 
+// TODO: nope
+progress {
+  width: 100%;
+}
+progress[value] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+progress[value]::-webkit-progress-value, progress[value]::-moz-progress-bar {
+  background: $passing-color;
+
+  .failed & {
+    background: $failing-color;
+  }
+}
+progress.failed[value]::-webkit-progress-value, progress.failed[value]::-moz-progress-bar {
+    background: $failing-color;
+}
+
 body {
   overflow-y: scroll;
 }