jasmine-core 6.0.0-alpha.1 → 6.0.0-beta.0

package/README.md

@@ -30,7 +30,7 @@ Microsoft Edge) as well as Node.
 | Environment       | Supported versions               |
 |-------------------|----------------------------------|
 | Node              | 20, 22, 24                       |
-| Safari            | 16*, 17*                         |
+| Safari            | 16*, 17*, 26*                    |
 | Chrome            | Evergreen                        |
 | Firefox           | Evergreen, 102*, 115*, 128*, 140 |
 | Edge              | Evergreen                        |

package/lib/jasmine-core/boot1.js

@@ -42,36 +42,18 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   const urls = new jasmine.HtmlReporterV2Urls();
 
   /**
-   * ## Reporters
-   * The `HtmlReporter` builds all of the HTML UI for the runner page. This reporter paints the dots, stars, and x's for specs, as well as all spec names and all failures (if any).
+   * Configures Jasmine based on the current set of query parameters. This
+   * supports all parameters set by the HTML reporter as well as
+   * spec=partialPath, which filters out specs whose paths don't contain the
+   * parameter.
    */
-  const htmlReporter = new jasmine.HtmlReporterV2({
-    env,
-    urls,
-    getContainer() {
-      return document.body;
-    }
-  });
-
-  /**
-   * The `jsApiReporter` also receives spec results, and is used by any environment that needs to extract the results  from JavaScript.
-   */
-  env.addReporter(jsApiReporter);
-  env.addReporter(htmlReporter);
   env.configure(urls.configFromCurrentUrl());
 
-  /**
-   * ## Execution
-   *
-   * Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
-   */
-  const currentWindowOnload = window.onload;
-
-  window.onload = function() {
-    if (currentWindowOnload) {
-      currentWindowOnload();
-    }
-    htmlReporter.initialize();
+  window.addEventListener('load', function() {
+    // The HTML reporter needs to be set up here so it can access the DOM. Other
+    // reporters can be added at any time before env.execute() is called.
+    const htmlReporter = new jasmine.HtmlReporterV2({ env, urls });
+    env.addReporter(htmlReporter);
     env.execute();
-  };
+  });
 })();

package/lib/jasmine-core/jasmine-html.js

@@ -35,6 +35,8 @@ 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$);
   j$.HtmlReporterV2 = jasmineRequire.HtmlReporterV2(j$);
@@ -187,16 +189,52 @@ jasmineRequire.HtmlReporter = function(j$) {
       results.appendChild(summary.rootEl);
 
       if (this.#stateBuilder.anyNonTopSuiteFailures) {
-        this.#alerts.addFailureToggle(
-          () => this.#setMenuModeTo('jasmine-failure-list'),
-          () => this.#setMenuModeTo('jasmine-spec-list')
-        );
-
+        this.#addFailureToggle();
         this.#setMenuModeTo('jasmine-failure-list');
         this.#failures.show();
       }
     }
 
+    #addFailureToggle() {
+      const onClickFailures = () => this.#setMenuModeTo('jasmine-failure-list');
+      const onClickSpecList = () => this.#setMenuModeTo('jasmine-spec-list');
+      const failuresLink = createDom(
+        'a',
+        { className: 'jasmine-failures-menu', href: '#' },
+        'Failures'
+      );
+      let specListLink = createDom(
+        'a',
+        { className: 'jasmine-spec-list-menu', href: '#' },
+        'Spec List'
+      );
+
+      failuresLink.onclick = function() {
+        onClickFailures();
+        return false;
+      };
+
+      specListLink.onclick = function() {
+        onClickSpecList();
+        return false;
+      };
+
+      this.#alerts.addBar(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
+          [createDom('span', {}, 'Spec List | '), failuresLink]
+        )
+      );
+      this.#alerts.addBar(
+        createDom(
+          'span',
+          { className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
+          [specListLink, createDom('span', {}, ' | Failures ')]
+        )
+      );
+    }
+
     #find(selector) {
       return this.#getContainer().querySelector(
         '.jasmine_html-reporter ' + selector
@@ -271,12 +309,14 @@ jasmineRequire.HtmlSpecFilter = function(j$) {
    * @deprecated Use {@link HtmlReporterV2Urls} instead.
    */
   function HtmlSpecFilter(options) {
-    j$.getEnv().deprecated(
+    const env = options?.env ?? j$.getEnv();
+    env.deprecated(
       'HtmlReporter and HtmlSpecFilter are deprecated. Use HtmlReporterV2 instead.'
     );
 
     const filterString =
       options &&
+      options.filterString &&
       options.filterString() &&
       options.filterString().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     const filterPattern = new RegExp(filterString);
@@ -434,38 +474,6 @@ jasmineRequire.AlertsView = function(j$) {
       );
     }
 
-    addFailureToggle(onClickFailures, onClickSpecList) {
-      const failuresLink = createDom(
-        'a',
-        { className: 'jasmine-failures-menu', href: '#' },
-        'Failures'
-      );
-      let specListLink = createDom(
-        'a',
-        { className: 'jasmine-spec-list-menu', href: '#' },
-        'Spec List'
-      );
-
-      failuresLink.onclick = function() {
-        onClickFailures();
-        return false;
-      };
-
-      specListLink.onclick = function() {
-        onClickSpecList();
-        return false;
-      };
-
-      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-spec-list', [
-        createDom('span', {}, 'Spec List | '),
-        failuresLink
-      ]);
-      this.#createAndAdd('jasmine-menu jasmine-bar jasmine-failure-list', [
-        specListLink,
-        createDom('span', {}, ' | Failures ')
-      ]);
-    }
-
     addGlobalFailure(failure) {
       this.#createAndAdd(
         errorBarClassName,
@@ -895,7 +903,7 @@ jasmineRequire.htmlReporterUtils = function(j$) {
     const el = document.createElement(type);
     let children;
 
-    if (j$.private.isArray(childrenArrayOrVarArgs)) {
+    if (Array.isArray(childrenArrayOrVarArgs)) {
       children = childrenArrayOrVarArgs;
     } else {
       children = [];
@@ -946,6 +954,10 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
 
   const { createDom, noExpectations } = j$.private.htmlReporterUtils;
 
+  const specListTabId = 'jasmine-specListTab';
+  const failuresTabId = 'jasmine-failuresTab';
+  const perfTabId = 'jasmine-perfTab';
+
   /**
    * @class HtmlReporterV2
    * @classdesc Displays results and allows re-running individual specs and suites.
@@ -958,12 +970,12 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
    * const reporter = new jasmine.HtmlReporterV2({
    *    env,
    *    urls,
-   *    container: document.body
+   *    // container is optional and defaults to document.body.
+   *    container: someElement
    * });
    */
   class HtmlReporterV2 {
-    #env;
-    #getContainer;
+    #container;
     #queryString;
     #urlBuilder;
     #filterSpecs;
@@ -974,14 +986,13 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
     // Sub-views
     #alerts;
     #statusBar;
+    #tabBar;
     #progress;
     #banner;
     #failures;
 
     constructor(options) {
-      this.#env = options.env;
-
-      this.#getContainer = options.getContainer;
+      this.#container = options.container || document.body;
       this.#queryString =
         options.queryString ||
         new j$.QueryString({
@@ -994,16 +1005,8 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         getSuiteById: id => this.#stateBuilder.suitesById[id]
       });
       this.#filterSpecs = options.urls.filteringSpecs();
-    }
 
-    /**
-     * Initializes the reporter. Should be called before {@link Env#execute}.
-     * @function
-     * @name HtmlReporter#initialize
-     */
-    initialize() {
-      this.#clearPrior();
-      this.#config = this.#env ? this.#env.configuration() : {};
+      this.#config = options.env ? options.env.configuration() : {};
 
       this.#stateBuilder = new j$.private.ResultsStateBuilder();
 
@@ -1011,6 +1014,25 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
       this.#statusBar = new j$.private.OverallStatusBar(this.#urlBuilder);
       this.#statusBar.showRunning();
       this.#alerts.addBar(this.#statusBar.rootEl);
+
+      this.#tabBar = new j$.private.TabBar(
+        [
+          { id: specListTabId, label: 'Spec List' },
+          { id: failuresTabId, label: 'Failures' },
+          { id: perfTabId, label: 'Performance' }
+        ],
+        tabId => {
+          if (tabId === specListTabId) {
+            this.#setMenuModeTo('jasmine-spec-list');
+          } else if (tabId === failuresTabId) {
+            this.#setMenuModeTo('jasmine-failure-list');
+          } else {
+            this.#setMenuModeTo('jasmine-performance');
+          }
+        }
+      );
+      this.#alerts.addBar(this.#tabBar.rootEl);
+
       this.#progress = new ProgressView();
       this.#banner = new j$.private.Banner(
         this.#queryString.navigateWithNewParam.bind(this.#queryString),
@@ -1025,13 +1047,15 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
         this.#alerts.rootEl,
         this.#failures.rootEl
       );
-      this.#getContainer().appendChild(this.#htmlReporterMain);
+      this.#container.appendChild(this.#htmlReporterMain);
       this.#failures.show();
     }
 
     jasmineStarted(options) {
       this.#stateBuilder.jasmineStarted(options);
-      this.#progress.start(options.totalSpecsDefined);
+      this.#progress.start(
+        options.totalSpecsDefined - options.numExcludedSpecs
+      );
     }
 
     suiteStarted(result) {
@@ -1101,32 +1125,26 @@ 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.#alerts.addFailureToggle(
-          () => this.#setMenuModeTo('jasmine-failure-list'),
-          () => this.#setMenuModeTo('jasmine-spec-list')
-        );
-
-        this.#setMenuModeTo('jasmine-failure-list');
-        this.#failures.show();
+        this.#tabBar.showTab(failuresTabId);
+        this.#tabBar.selectTab(failuresTabId);
+      } else {
+        this.#tabBar.selectTab(specListTabId);
       }
     }
 
     #find(selector) {
-      return this.#getContainer().querySelector(
+      return this.#container.querySelector(
         '.jasmine_html-reporter ' + selector
       );
     }
 
-    #clearPrior() {
-      const oldReporter = this.#find('');
-
-      if (oldReporter) {
-        this.#getContainer().removeChild(oldReporter);
-      }
-    }
-
     #setMenuModeTo(mode) {
       this.#htmlReporterMain.setAttribute(
         'class',
@@ -1145,10 +1163,11 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
     }
 
     specDone(result) {
-      this.rootEl.value = this.rootEl.value + 1;
+      if (result.status !== 'excluded') {
+        this.rootEl.value = this.rootEl.value + 1;
+      }
 
       if (result.status === 'failed') {
-        // TODO: also a non-color indicator
         this.rootEl.classList.add('failed');
       }
     }
@@ -1233,7 +1252,10 @@ jasmineRequire.HtmlReporterV2Urls = function(j$) {
     }
 
     /**
-     * Creates a {@link Configuration} from the current page's URL.
+     * Creates a {@link Configuration} from the current page's URL. Supported
+     * query string parameters include all those set by {@link HtmlReporterV2}
+     * as well as spec=partialPath, which filters out specs whose paths don't
+     * contain partialPath.
      * @returns {Configuration}
      * @example
      * const urls = new jasmine.HtmlReporterV2Urls();
@@ -1259,9 +1281,10 @@ jasmineRequire.HtmlReporterV2Urls = function(j$) {
       }
 
       const specFilter = new j$.private.HtmlSpecFilterV2({
-        filterString: () => {
-          return this.queryString.getParam('path');
-        }
+        filterParams: () => ({
+          path: this.queryString.getParam('path'),
+          spec: this.queryString.getParam('spec')
+        })
       });
 
       config.specFilter = function(spec) {
@@ -1281,35 +1304,35 @@ jasmineRequire.HtmlReporterV2Urls = function(j$) {
 
 jasmineRequire.HtmlSpecFilterV2 = function() {
   class HtmlSpecFilterV2 {
-    #getFilterString;
+    #getFilterParams;
 
     constructor(options) {
-      this.#getFilterString = options.filterString;
+      this.#getFilterParams = options.filterParams;
     }
 
-    /**
-     * Determines whether the spec with the specified name should be executed.
-     * @name HtmlSpecFilterV2#matches
-     * @function
-     * @param {Spec} spec
-     * @returns {boolean}
-     */
     matches(spec) {
-      const filterString = this.#getFilterString();
-
-      if (!filterString) {
-        return true;
+      const params = this.#getFilterParams();
+
+      if (params.path) {
+        return this.#matchesPath(spec, JSON.parse(params.path));
+      } else if (params.spec) {
+        // Like legacy HtmlSpecFilter, retained because it's convenient for
+        // hand-constructing filter URLs
+        return spec.getFullName().includes(params.spec);
       }
 
-      const filterPath = JSON.parse(this.#getFilterString());
+      return true;
+    }
+
+    #matchesPath(spec, path) {
       const specPath = spec.getPath();
 
-      if (filterPath.length > specPath.length) {
+      if (path.length > specPath.length) {
         return false;
       }
 
-      for (let i = 0; i < filterPath.length; i++) {
-        if (specPath[i] !== filterPath[i]) {
+      for (let i = 0; i < path.length; i++) {
+        if (specPath[i] !== path[i]) {
           return false;
         }
       }
@@ -1430,6 +1453,105 @@ jasmineRequire.OverallStatusBar = function(j$) {
   return OverallStatusBar;
 };
 
+jasmineRequire.PerformanceView = function(j$) {
+  const createDom = j$.private.htmlReporterUtils.createDom;
+  const MAX_SLOW_SPECS = 20;
+
+  class PerformanceView {
+    #summary;
+    #tbody;
+
+    constructor() {
+      this.#tbody = document.createElement('tbody');
+      this.#summary = document.createElement('div');
+      this.rootEl = createDom(
+        'div',
+        { className: 'jasmine-performance-view' },
+        createDom('h2', {}, 'Performance'),
+        this.#summary,
+        createDom('h3', {}, 'Slowest Specs'),
+        createDom(
+          'table',
+          {},
+          createDom(
+            'thead',
+            {},
+            createDom(
+              'tr',
+              {},
+              createDom('th', {}, 'Duration'),
+              createDom('th', {}, 'Spec Name')
+            )
+          ),
+          this.#tbody
+        )
+      );
+    }
+
+    addResults(resultsTree) {
+      const specResults = [];
+      getSpecResults(resultsTree, specResults);
+
+      if (specResults.length === 0) {
+        return;
+      }
+
+      specResults.sort(function(a, b) {
+        if (a.duration < b.duration) {
+          return 1;
+        } else if (a.duration > b.duration) {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+
+      this.#populateSumary(specResults);
+      this.#populateTable(specResults);
+    }
+
+    #populateSumary(specResults) {
+      const total = specResults.map(r => r.duration).reduce((a, b) => a + b, 0);
+      const mean = total / specResults.length;
+      const median = specResults[Math.floor(specResults.length / 2)].duration;
+      this.#summary.appendChild(
+        document.createTextNode(`Mean spec run time: ${mean.toFixed(0)}ms`)
+      );
+      this.#summary.appendChild(document.createElement('br'));
+      this.#summary.appendChild(
+        document.createTextNode(`Median spec run time: ${median}ms`)
+      );
+    }
+
+    #populateTable(specResults) {
+      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;
+};
+
 jasmineRequire.ResultsStateBuilder = function(j$) {
   'use strict';
 
@@ -1661,3 +1783,81 @@ jasmineRequire.SymbolsView = function(j$) {
 
   return SymbolsView;
 };
+
+jasmineRequire.TabBar = function(j$) {
+  const createDom = j$.private.htmlReporterUtils.createDom;
+
+  class TabBar {
+    #tabs;
+    #onSelectTab;
+
+    // tabSpecs should be an array of {id, label}.
+    // All tabs are initially not visible and not selected.
+    constructor(tabSpecs, onSelectTab) {
+      this.#onSelectTab = onSelectTab;
+      this.#tabs = [];
+      this.#tabs = tabSpecs.map(ts => new Tab(ts, () => this.selectTab(ts.id)));
+
+      this.rootEl = createDom(
+        'span',
+        { className: 'jasmine-menu jasmine-bar' },
+        this.#tabs.map(t => t.rootEl)
+      );
+    }
+
+    showTab(id) {
+      for (const tab of this.#tabs) {
+        if (tab.rootEl.id === id) {
+          tab.setVisibility(true);
+        }
+      }
+    }
+
+    selectTab(id) {
+      for (const tab of this.#tabs) {
+        tab.setSelected(tab.rootEl.id === id);
+      }
+
+      this.#onSelectTab(id);
+    }
+  }
+
+  class Tab {
+    #spec;
+    #onClick;
+
+    constructor(spec, onClick) {
+      this.#spec = spec;
+      this.#onClick = onClick;
+      this.rootEl = createDom(
+        'span',
+        { id: spec.id, className: 'jasmine-tab jasmine-hidden' },
+        this.#createLink()
+      );
+    }
+
+    setVisibility(visible) {
+      this.rootEl.classList.toggle('jasmine-hidden', !visible);
+    }
+
+    setSelected(selected) {
+      if (selected) {
+        this.rootEl.textContent = this.#spec.label;
+      } else {
+        this.rootEl.textContent = '';
+        this.rootEl.appendChild(this.#createLink());
+      }
+    }
+
+    #createLink() {
+      const link = createDom('a', { href: '#' }, this.#spec.label);
+      link.addEventListener('click', e => {
+        e.preventDefault();
+        this.#onClick();
+      });
+      return link;
+    }
+  }
+
+  return TabBar;
+};

package/lib/jasmine-core/jasmine.css

@@ -8,7 +8,7 @@ body {
   background-color: #eee;
   padding: 5px;
   margin: -8px;
-  font-size: 11px;
+  font-size: 12px;
   font-family: Monaco, "Lucida Console", monospace;
   line-height: 14px;
   color: #333;
@@ -63,7 +63,7 @@ body {
   float: right;
   line-height: 28px;
   padding-right: 9px;
-  font-size: 11px;
+  font-size: 12px;
 }
 .jasmine_html-reporter .jasmine-symbol-summary {
   overflow: hidden;
@@ -198,11 +198,17 @@ body {
   color: white;
 }
 .jasmine_html-reporter.jasmine-spec-list .jasmine-bar.jasmine-menu.jasmine-failure-list,
-.jasmine_html-reporter.jasmine-spec-list .jasmine-results .jasmine-failures {
+.jasmine_html-reporter.jasmine-spec-list .jasmine-results .jasmine-failures,
+.jasmine_html-reporter.jasmine-spec-list .jasmine-performance-view {
   display: none;
 }
 .jasmine_html-reporter.jasmine-failure-list .jasmine-bar.jasmine-menu.jasmine-spec-list,
-.jasmine_html-reporter.jasmine-failure-list .jasmine-summary {
+.jasmine_html-reporter.jasmine-failure-list .jasmine-summary,
+.jasmine_html-reporter.jasmine-failure-list .jasmine-performance-view {
+  display: none;
+}
+.jasmine_html-reporter.jasmine-performance .jasmine-results .jasmine-failures,
+.jasmine_html-reporter.jasmine-performance .jasmine-summary {
   display: none;
 }
 .jasmine_html-reporter .jasmine-results {
@@ -323,4 +329,23 @@ body {
 }
 .jasmine_html-reporter .jasmine-debug-log .jasmine-debug-log-msg {
   white-space: pre;
+}
+
+.jasmine-hidden {
+  display: none;
+}
+
+.jasmine-tab + .jasmine-tab:before {
+  content: " | ";
+}
+
+.jasmine-performance-view h2, .jasmine-performance-view h3 {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.jasmine-performance-view table {
+  border-spacing: 5px;
+}
+.jasmine-performance-view th, .jasmine-performance-view td {
+  text-align: left;
 }