HtmlReporterV2: Show details of failures as soon as they occur

lib/jasmine-core/jasmine-html.js

@@ -782,10 +782,12 @@ jasmineRequire.FailuresView = function(j$) {
   class FailuresView {
     #urlBuilder;
     #failureEls;
+    #showing;
 
     constructor(urlBuilder) {
       this.#urlBuilder = urlBuilder;
       this.#failureEls = [];
+      this.#showing = false;
       this.rootEl = createDom(
         'div',
         { className: 'jasmine-results' },
@@ -794,8 +796,14 @@ jasmineRequire.FailuresView = function(j$) {
     }
 
     append(result, parent) {
-      // TODO: Figure out why the reuslt is wrong if we build the DOM node later
+      // TODO: Figure out why the result is wrong if we build the DOM node later
-      this.#failureEls.push(this.#makeFailureEl(result, parent));
+      const el = this.#makeFailureEl(result, parent);
+
+      if (this.#showing) {
+        this.rootEl.querySelector('.jasmine-failures').appendChild(el);
+      } else {
+        this.#failureEls.push(el);
+      }
     }
 
     show() {
@@ -804,6 +812,8 @@ jasmineRequire.FailuresView = function(j$) {
       for (const el of this.#failureEls) {
         failureNode.appendChild(el);
       }
+
+      this.#showing = true;
     }
 
     #makeFailureEl(result, parent) {
@@ -1057,6 +1067,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         this.#failures.rootEl
       );
       this.#container.appendChild(this.#htmlReporterMain);
+      this.#failures.show();
     }
 
     jasmineStarted(options) {

src/html/FailuresView.js

@@ -6,10 +6,12 @@ jasmineRequire.FailuresView = function(j$) {
   class FailuresView {
     #urlBuilder;
     #failureEls;
+    #showing;
 
     constructor(urlBuilder) {
       this.#urlBuilder = urlBuilder;
       this.#failureEls = [];
+      this.#showing = false;
       this.rootEl = createDom(
         'div',
         { className: 'jasmine-results' },
@@ -18,8 +20,14 @@ jasmineRequire.FailuresView = function(j$) {
     }
 
     append(result, parent) {
-      // TODO: Figure out why the reuslt is wrong if we build the DOM node later
+      // TODO: Figure out why the result is wrong if we build the DOM node later
-      this.#failureEls.push(this.#makeFailureEl(result, parent));
+      const el = this.#makeFailureEl(result, parent);
+
+      if (this.#showing) {
+        this.rootEl.querySelector('.jasmine-failures').appendChild(el);
+      } else {
+        this.#failureEls.push(el);
+      }
     }
 
     show() {
@@ -28,6 +36,8 @@ jasmineRequire.FailuresView = function(j$) {
       for (const el of this.#failureEls) {
         failureNode.appendChild(el);
       }
+
+      this.#showing = true;
     }
 
     #makeFailureEl(result, parent) {

src/html/HtmlReporterV2.js

@@ -71,6 +71,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         this.#failures.rootEl
       );
       this.#container.appendChild(this.#htmlReporterMain);
+      this.#failures.show();
     }
 
     jasmineStarted(options) {