Add a slowest specs list to HTMLReporterV2

src/html/HtmlReporterV2.js

@@ -5,6 +5,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
   const specListTabId = 'jasmine-specListTab';
   const failuresTabId = 'jasmine-failuresTab';
+  const perfTabId = 'jasmine-perfTab';
 
   /**
    * @class HtmlReporterV2
@@ -76,13 +77,16 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.#tabBar = new j$.private.TabBar(
         [
           { id: specListTabId, label: 'Spec List' },
-          { id: failuresTabId, label: 'Failures' }
+          { id: failuresTabId, label: 'Failures' },
+          { id: perfTabId, label: 'Performance' }
         ],
         tabId => {
           if (tabId === specListTabId) {
             this.#setMenuModeTo('jasmine-spec-list');
-          } else {
+          } else if (tabId === failuresTabId) {
             this.#setMenuModeTo('jasmine-failure-list');
+          } else {
+            this.#setMenuModeTo('jasmine-performance');
           }
         }
       );
@@ -178,9 +182,13 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       );
       summary.addResults(this.#stateBuilder.topResults);
       results.appendChild(summary.rootEl);
+      const perf = new j$.private.PerformanceView();
+      perf.addResults(this.#stateBuilder.topResults);
+      results.appendChild(perf.rootEl);
+      this.#tabBar.showTab(specListTabId);
+      this.#tabBar.showTab(perfTabId);
 
       if (this.#stateBuilder.anyNonTopSuiteFailures) {
-        this.#tabBar.showTab(specListTabId);
         this.#tabBar.showTab(failuresTabId);
         this.#tabBar.selectTab(failuresTabId);
       } else {

src/html/PerformanceView.js

@@ -0,0 +1,72 @@
+jasmineRequire.PerformanceView = function(j$) {
+  const createDom = j$.private.htmlReporterUtils.createDom;
+  const MAX_SLOW_SPECS = 20;
+
+  class PerformanceView {
+    #tbody;
+
+    constructor() {
+      this.#tbody = document.createElement('tbody');
+      this.rootEl = createDom(
+        'div',
+        { className: 'jasmine-performance-view' },
+        createDom('h2', {}, 'Performance'),
+        createDom('h3', {}, 'Slowest Specs'),
+        createDom(
+          'table',
+          {},
+          createDom(
+            'thead',
+            {},
+            createDom(
+              'tr',
+              {},
+              createDom('th', {}, 'Duration'),
+              createDom('th', {}, 'Spec Name')
+            )
+          ),
+          this.#tbody
+        )
+      );
+    }
+
+    addResults(resultsTree) {
+      let specResults = [];
+      getSpecResults(resultsTree, specResults);
+
+      specResults.sort(function(a, b) {
+        if (a.duration < b.duration) {
+          return 1;
+        } else if (a.duration > b.duration) {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+      specResults = specResults.slice(0, MAX_SLOW_SPECS);
+
+      for (const r of specResults) {
+        this.#tbody.appendChild(
+          createDom(
+            'tr',
+            {},
+            createDom('td', {}, `${r.duration}ms`),
+            createDom('td', {}, r.fullName)
+          )
+        );
+      }
+    }
+  }
+
+  function getSpecResults(resultsTree, dest) {
+    for (const node of resultsTree.children) {
+      if (node.type === 'suite') {
+        getSpecResults(node, dest);
+      } else if (node.result.status !== 'excluded') {
+        dest.push(node.result);
+      }
+    }
+  }
+
+  return PerformanceView;
+};

src/html/_HTMLReporter.scss

@@ -280,15 +280,25 @@ body {
   }
 
   // simplify toggle control between the two menu bars
+  // TODO: clean this up once HtmlReporter is removed
   &.jasmine-spec-list {
     .jasmine-bar.jasmine-menu.jasmine-failure-list,
-    .jasmine-results .jasmine-failures {
+    .jasmine-results .jasmine-failures,
+    .jasmine-performance-view {
       display: none;
     }
   }
 
   &.jasmine-failure-list {
     .jasmine-bar.jasmine-menu.jasmine-spec-list,
+    .jasmine-summary,
+    .jasmine-performance-view {
+      display: none;
+    }
+  }
+
+  &.jasmine-performance {
+    .jasmine-results .jasmine-failures,
     .jasmine-summary {
       display: none;
     }

src/html/requireHtml.js

@@ -11,6 +11,7 @@ jasmineRequire.html = function(j$) {
   j$.private.SymbolsView = jasmineRequire.SymbolsView(j$);
   j$.private.SummaryTreeView = jasmineRequire.SummaryTreeView(j$);
   j$.private.FailuresView = jasmineRequire.FailuresView(j$);
+  j$.private.PerformanceView = jasmineRequire.PerformanceView(j$);
   j$.private.TabBar = jasmineRequire.TabBar(j$);
   j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
   j$.HtmlReporterV2Urls = jasmineRequire.HtmlReporterV2Urls(j$);