From 01f050eeaaefd29b0e1efdfc13c4e0c4304ed42f Mon Sep 17 00:00:00 2001 From: Steve Gravrock Date: Tue, 7 Oct 2025 20:01:38 -0700 Subject: [PATCH] Turn DomContext class back into a function --- lib/jasmine-core/jasmine-html.js | 240 +++++++++++++++---------------- src/html/DomContext.js | 45 ------ src/html/HtmlReporter.js | 169 ++++++++++------------ src/html/createDom.js | 42 ++++++ src/html/requireHtml.js | 2 +- 5 files changed, 235 insertions(+), 263 deletions(-) delete mode 100644 src/html/DomContext.js create mode 100644 src/html/createDom.js diff --git a/lib/jasmine-core/jasmine-html.js b/lib/jasmine-core/jasmine-html.js index 0fb03251..31444823 100644 --- a/lib/jasmine-core/jasmine-html.js +++ b/lib/jasmine-core/jasmine-html.js @@ -27,7 +27,7 @@ var jasmineRequire = window.jasmineRequire || require('./jasmine.js'); jasmineRequire.html = function(j$) { j$.private.ResultsNode = jasmineRequire.ResultsNode(); - j$.private.DomContext = jasmineRequire.DomContext(j$); + j$.private.createDom = jasmineRequire.createDom(j$); j$.HtmlReporter = jasmineRequire.HtmlReporter(j$); j$.QueryString = jasmineRequire.QueryString(); j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter(); @@ -121,7 +121,6 @@ jasmineRequire.HtmlReporter = function(j$) { class HtmlReporter { #env; #getContainer; - #domContext; #navigateWithNewParam; #urlBuilder; #filterSpecs; @@ -139,7 +138,6 @@ jasmineRequire.HtmlReporter = function(j$) { this.#env = options.env; this.#getContainer = options.getContainer; - this.#domContext = new j$.private.DomContext(); this.#navigateWithNewParam = options.navigateWithNewParam || function() {}; this.#urlBuilder = new UrlBuilder( @@ -159,11 +157,11 @@ jasmineRequire.HtmlReporter = function(j$) { this.#stateBuilder = new ResultsStateBuilder(); - this.#alerts = new AlertsView(this.#domContext, this.#urlBuilder); - this.#symbols = new SymbolsView(this.#domContext); - this.#banner = new Banner(this.#domContext, this.#navigateWithNewParam); - this.#failures = new FailuresView(this.#domContext, this.#urlBuilder); - this.#htmlReporterMain = this.#domContext.create( + this.#alerts = new AlertsView(this.#urlBuilder); + this.#symbols = new SymbolsView(); + this.#banner = new Banner(this.#navigateWithNewParam); + this.#failures = new FailuresView(this.#urlBuilder); + this.#htmlReporterMain = j$.private.createDom( 'div', { className: 'jasmine_html-reporter' }, this.#banner.rootEl, @@ -239,11 +237,7 @@ jasmineRequire.HtmlReporter = function(j$) { } const results = this.#find('.jasmine-results'); - const summary = new SummaryTreeView( - this.#domContext, - this.#urlBuilder, - this.#filterSpecs - ); + const summary = new SummaryTreeView(this.#urlBuilder, this.#filterSpecs); summary.addResults(this.#stateBuilder.topResults); results.appendChild(summary.rootEl); @@ -315,13 +309,11 @@ jasmineRequire.HtmlReporter = function(j$) { } class AlertsView { - #domContext; #urlBuilder; - constructor(domContext, urlBuilder) { - this.#domContext = domContext; + constructor(urlBuilder) { this.#urlBuilder = urlBuilder; - this.rootEl = domContext.create('div', { className: 'jasmine-alert' }); + this.rootEl = j$.private.createDom('div', { className: 'jasmine-alert' }); } addDuration(ms) { @@ -332,7 +324,7 @@ jasmineRequire.HtmlReporter = function(j$) { // TODO: backfill tests for this this.add( 'jasmine-bar jasmine-skipped', - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.runAllHref(), title: 'Run all specs' }, `Ran ${numExecuted} of ${numDefined} specs - run all` @@ -341,12 +333,12 @@ jasmineRequire.HtmlReporter = function(j$) { } addFailureToggle(onClickFailures, onClickSpecList) { - const failuresLink = this.#domContext.create( + const failuresLink = j$.private.createDom( 'a', { className: 'jasmine-failures-menu', href: '#' }, 'Failures' ); - let specListLink = this.#domContext.create( + let specListLink = j$.private.createDom( 'a', { className: 'jasmine-spec-list-menu', href: '#' }, 'Spec List' @@ -363,12 +355,12 @@ jasmineRequire.HtmlReporter = function(j$) { }; this.add('jasmine-menu jasmine-bar jasmine-spec-list', [ - this.#domContext.create('span', {}, 'Spec List | '), + j$.private.createDom('span', {}, 'Spec List | '), failuresLink ]); this.add('jasmine-menu jasmine-bar jasmine-failure-list', [ specListLink, - this.#domContext.create('span', {}, ' | Failures ') + j$.private.createDom('span', {}, ' | Failures ') ]); } @@ -410,11 +402,11 @@ jasmineRequire.HtmlReporter = function(j$) { let seedBar; if (order && order.random) { - seedBar = this.#domContext.create( + seedBar = j$.private.createDom( 'span', { className: 'jasmine-seed-bar' }, ', randomized with seed ', - this.#domContext.create( + j$.private.createDom( 'a', { title: 'randomized with seed ' + order.seed, @@ -462,7 +454,7 @@ jasmineRequire.HtmlReporter = function(j$) { for (const line of dw.message.split('\n')) { children.push(line); - children.push(this.#domContext.create('br')); + children.push(j$.private.createDom('br')); } children[0] = 'DEPRECATION: ' + children[0]; @@ -478,21 +470,21 @@ jasmineRequire.HtmlReporter = function(j$) { // TODO private? add(className, children) { this.rootEl.appendChild( - this.#domContext.create('span', { className }, children) + j$.private.createDom('span', { className }, children) ); } #createExpander(stackTrace) { - const expandLink = this.#domContext.create( + const expandLink = j$.private.createDom( 'a', { href: '#' }, 'Show stack trace' ); - const root = this.#domContext.create( + const root = j$.private.createDom( 'div', { className: 'jasmine-expander' }, expandLink, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-expander-contents jasmine-stack-trace' }, stackTrace @@ -516,21 +508,23 @@ jasmineRequire.HtmlReporter = function(j$) { } class Banner { - #domContext; #navigateWithNewParam; - constructor(domContext, navigateWithNewParam) { - this.#domContext = domContext; + constructor(navigateWithNewParam) { this.#navigateWithNewParam = navigateWithNewParam; - this.rootEl = domContext.create( + this.rootEl = j$.private.createDom( 'div', { className: 'jasmine-banner' }, - domContext.create('a', { + j$.private.createDom('a', { className: 'jasmine-title', href: 'http://jasmine.github.io/', target: '_blank' }), - domContext.create('span', { className: 'jasmine-version' }, j$.version) + j$.private.createDom( + 'span', + { className: 'jasmine-version' }, + j$.version + ) ); } @@ -539,68 +533,68 @@ jasmineRequire.HtmlReporter = function(j$) { } #optionsMenu(config) { - const optionsMenuDom = this.#domContext.create( + const optionsMenuDom = j$.private.createDom( 'div', { className: 'jasmine-run-options' }, - this.#domContext.create( + j$.private.createDom( 'span', { className: 'jasmine-trigger' }, 'Options' ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-payload' }, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-stop-on-failure' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-fail-fast', id: 'jasmine-fail-fast', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-fail-fast' }, 'stop execution on spec failure' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-throw-failures' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-throw', id: 'jasmine-throw-failures', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-throw-failures' }, 'stop spec on expectation failure' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-random-order' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-random', id: 'jasmine-random-order', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-random-order' }, 'run tests in random order' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-hide-disabled' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-disabled', id: 'jasmine-hide-disabled', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-hide-disabled' }, 'hide disabled tests' @@ -668,18 +662,15 @@ jasmineRequire.HtmlReporter = function(j$) { } class SymbolsView { - #domContext; - - constructor(domContext) { - this.#domContext = domContext; - this.rootEl = domContext.create('ul', { + constructor() { + this.rootEl = j$.private.createDom('ul', { className: 'jasmine-symbol-summary' }); } append(result, config) { this.rootEl.appendChild( - this.#domContext.create('li', { + j$.private.createDom('li', { className: this.#className(result, config), id: 'spec_' + result.id, title: result.fullName @@ -703,15 +694,15 @@ jasmineRequire.HtmlReporter = function(j$) { } class SummaryTreeView { - #domContext; #urlBuilder; #filterSpecs; - constructor(domContext, urlBuilder, filterSpecs) { - this.#domContext = domContext; + constructor(urlBuilder, filterSpecs) { this.#urlBuilder = urlBuilder; this.#filterSpecs = filterSpecs; - this.rootEl = domContext.create('div', { className: 'jasmine-summary' }); + this.rootEl = j$.private.createDom('div', { + className: 'jasmine-summary' + }); } addResults(resultsTree) { @@ -726,16 +717,16 @@ jasmineRequire.HtmlReporter = function(j$) { continue; } if (resultNode.type === 'suite') { - const suiteListNode = this.#domContext.create( + const suiteListNode = j$.private.createDom( 'ul', { className: 'jasmine-suite', id: 'suite-' + resultNode.result.id }, - this.#domContext.create( + j$.private.createDom( 'li', { className: 'jasmine-suite-detail jasmine-' + resultNode.result.status }, - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.specHref(resultNode.result) }, resultNode.result.description @@ -748,7 +739,7 @@ jasmineRequire.HtmlReporter = function(j$) { } if (resultNode.type === 'spec') { if (domParent.getAttribute('class') !== 'jasmine-specs') { - specListNode = this.#domContext.create('ul', { + specListNode = j$.private.createDom('ul', { className: 'jasmine-specs' }); domParent.appendChild(specListNode); @@ -766,18 +757,18 @@ jasmineRequire.HtmlReporter = function(j$) { } } specListNode.appendChild( - this.#domContext.create( + j$.private.createDom( 'li', { className: 'jasmine-' + resultNode.result.status, id: 'spec-' + resultNode.result.id }, - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.specHref(resultNode.result) }, specDescription ), - this.#domContext.create( + j$.private.createDom( 'span', { className: 'jasmine-spec-duration' }, '(' + resultNode.result.duration + 'ms)' @@ -790,18 +781,16 @@ jasmineRequire.HtmlReporter = function(j$) { } class FailuresView { - #domContext; #urlBuilder; #failureEls; - constructor(domContext, urlBuilder) { - this.#domContext = domContext; + constructor(urlBuilder) { this.#urlBuilder = urlBuilder; this.#failureEls = []; - this.rootEl = domContext.create( + this.rootEl = j$.private.createDom( 'div', { className: 'jasmine-results' }, - domContext.create('div', { className: 'jasmine-failures' }) + j$.private.createDom('div', { className: 'jasmine-failures' }) ); } @@ -824,25 +813,25 @@ jasmineRequire.HtmlReporter = function(j$) { } #makeFailureEl(result, parent) { - const failure = this.#domContext.create( + const failure = j$.private.createDom( 'div', { className: 'jasmine-spec-detail jasmine-failed' }, this.#failureDescription(result, parent), - this.#domContext.create('div', { className: 'jasmine-messages' }) + j$.private.createDom('div', { className: 'jasmine-messages' }) ); const messages = failure.childNodes[1]; for (let i = 0; i < result.failedExpectations.length; i++) { const expectation = result.failedExpectations[i]; messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-result-message' }, expectation.message ) ); messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-stack-trace' }, expectation.stack @@ -852,7 +841,7 @@ jasmineRequire.HtmlReporter = function(j$) { if (result.failedExpectations.length === 0) { messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-result-message' }, 'Spec has no expectations' @@ -868,10 +857,10 @@ jasmineRequire.HtmlReporter = function(j$) { } #failureDescription(result, suite) { - const wrapper = this.#domContext.create( + const wrapper = j$.private.createDom( 'div', { className: 'jasmine-description' }, - this.#domContext.create( + j$.private.createDom( 'a', { title: result.description, @@ -887,7 +876,7 @@ jasmineRequire.HtmlReporter = function(j$) { document.createTextNode(' > '), wrapper.firstChild ); - suiteLink = this.#domContext.create( + suiteLink = j$.private.createDom( 'a', { href: this.#urlBuilder.suiteHref(suite) }, suite.result.description @@ -901,15 +890,15 @@ jasmineRequire.HtmlReporter = function(j$) { } #debugLogTable(debugLogs) { - const tbody = this.#domContext.create('tbody'); + const tbody = j$.private.createDom('tbody'); for (const entry of debugLogs) { tbody.appendChild( - this.#domContext.create( + j$.private.createDom( 'tr', {}, - this.#domContext.create('td', {}, entry.timestamp.toString()), - this.#domContext.create( + j$.private.createDom('td', {}, entry.timestamp.toString()), + j$.private.createDom( 'td', { className: 'jasmine-debug-log-msg' }, entry.message @@ -918,25 +907,25 @@ jasmineRequire.HtmlReporter = function(j$) { ); } - return this.#domContext.create( + return j$.private.createDom( 'div', { className: 'jasmine-debug-log' }, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-debug-log-header' }, 'Debug logs' ), - this.#domContext.create( + j$.private.createDom( 'table', {}, - this.#domContext.create( + j$.private.createDom( 'thead', {}, - this.#domContext.create( + j$.private.createDom( 'tr', {}, - this.#domContext.create('th', {}, 'Time (ms)'), - this.#domContext.create('th', {}, 'Message') + j$.private.createDom('th', {}, 'Time (ms)'), + j$.private.createDom('th', {}, 'Message') ) ), tbody @@ -1121,48 +1110,45 @@ jasmineRequire.QueryString = function() { return QueryString; }; -jasmineRequire.DomContext = function(j$) { +jasmineRequire.createDom = function(j$) { 'use strict'; - //TODO maybe rename - class DomContext { - create(type, attrs, childrenArrayOrVarArgs) { - const el = document.createElement(type); - let children; + function createDom(type, attrs, childrenArrayOrVarArgs) { + const el = document.createElement(type); + let children; - if (j$.private.isArray(childrenArrayOrVarArgs)) { - children = childrenArrayOrVarArgs; - } else { - children = []; + if (j$.private.isArray(childrenArrayOrVarArgs)) { + children = childrenArrayOrVarArgs; + } else { + children = []; - for (let i = 2; i < arguments.length; i++) { - children.push(arguments[i]); - } + for (let i = 2; i < arguments.length; i++) { + children.push(arguments[i]); } - - for (let i = 0; i < children.length; i++) { - const child = children[i]; - - if (typeof child === 'string') { - el.appendChild(document.createTextNode(child)); - } else { - if (child) { - el.appendChild(child); - } - } - } - - for (const attr in attrs) { - if (attr === 'className') { - el[attr] = attrs[attr]; - } else { - el.setAttribute(attr, attrs[attr]); - } - } - - return el; } + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + + if (typeof child === 'string') { + el.appendChild(document.createTextNode(child)); + } else { + if (child) { + el.appendChild(child); + } + } + } + + for (const attr in attrs) { + if (attr === 'className') { + el[attr] = attrs[attr]; + } else { + el.setAttribute(attr, attrs[attr]); + } + } + + return el; } - return DomContext; + return createDom; }; diff --git a/src/html/DomContext.js b/src/html/DomContext.js deleted file mode 100644 index b4b205ae..00000000 --- a/src/html/DomContext.js +++ /dev/null @@ -1,45 +0,0 @@ -jasmineRequire.DomContext = function(j$) { - 'use strict'; - - //TODO maybe rename - class DomContext { - create(type, attrs, childrenArrayOrVarArgs) { - const el = document.createElement(type); - let children; - - if (j$.private.isArray(childrenArrayOrVarArgs)) { - children = childrenArrayOrVarArgs; - } else { - children = []; - - for (let i = 2; i < arguments.length; i++) { - children.push(arguments[i]); - } - } - - for (let i = 0; i < children.length; i++) { - const child = children[i]; - - if (typeof child === 'string') { - el.appendChild(document.createTextNode(child)); - } else { - if (child) { - el.appendChild(child); - } - } - } - - for (const attr in attrs) { - if (attr === 'className') { - el[attr] = attrs[attr]; - } else { - el.setAttribute(attr, attrs[attr]); - } - } - - return el; - } - } - - return DomContext; -}; diff --git a/src/html/HtmlReporter.js b/src/html/HtmlReporter.js index 369f3194..3fc6f423 100644 --- a/src/html/HtmlReporter.js +++ b/src/html/HtmlReporter.js @@ -86,7 +86,6 @@ jasmineRequire.HtmlReporter = function(j$) { class HtmlReporter { #env; #getContainer; - #domContext; #navigateWithNewParam; #urlBuilder; #filterSpecs; @@ -104,7 +103,6 @@ jasmineRequire.HtmlReporter = function(j$) { this.#env = options.env; this.#getContainer = options.getContainer; - this.#domContext = new j$.private.DomContext(); this.#navigateWithNewParam = options.navigateWithNewParam || function() {}; this.#urlBuilder = new UrlBuilder( @@ -124,11 +122,11 @@ jasmineRequire.HtmlReporter = function(j$) { this.#stateBuilder = new ResultsStateBuilder(); - this.#alerts = new AlertsView(this.#domContext, this.#urlBuilder); - this.#symbols = new SymbolsView(this.#domContext); - this.#banner = new Banner(this.#domContext, this.#navigateWithNewParam); - this.#failures = new FailuresView(this.#domContext, this.#urlBuilder); - this.#htmlReporterMain = this.#domContext.create( + this.#alerts = new AlertsView(this.#urlBuilder); + this.#symbols = new SymbolsView(); + this.#banner = new Banner(this.#navigateWithNewParam); + this.#failures = new FailuresView(this.#urlBuilder); + this.#htmlReporterMain = j$.private.createDom( 'div', { className: 'jasmine_html-reporter' }, this.#banner.rootEl, @@ -204,11 +202,7 @@ jasmineRequire.HtmlReporter = function(j$) { } const results = this.#find('.jasmine-results'); - const summary = new SummaryTreeView( - this.#domContext, - this.#urlBuilder, - this.#filterSpecs - ); + const summary = new SummaryTreeView(this.#urlBuilder, this.#filterSpecs); summary.addResults(this.#stateBuilder.topResults); results.appendChild(summary.rootEl); @@ -280,13 +274,11 @@ jasmineRequire.HtmlReporter = function(j$) { } class AlertsView { - #domContext; #urlBuilder; - constructor(domContext, urlBuilder) { - this.#domContext = domContext; + constructor(urlBuilder) { this.#urlBuilder = urlBuilder; - this.rootEl = domContext.create('div', { className: 'jasmine-alert' }); + this.rootEl = j$.private.createDom('div', { className: 'jasmine-alert' }); } addDuration(ms) { @@ -297,7 +289,7 @@ jasmineRequire.HtmlReporter = function(j$) { // TODO: backfill tests for this this.add( 'jasmine-bar jasmine-skipped', - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.runAllHref(), title: 'Run all specs' }, `Ran ${numExecuted} of ${numDefined} specs - run all` @@ -306,12 +298,12 @@ jasmineRequire.HtmlReporter = function(j$) { } addFailureToggle(onClickFailures, onClickSpecList) { - const failuresLink = this.#domContext.create( + const failuresLink = j$.private.createDom( 'a', { className: 'jasmine-failures-menu', href: '#' }, 'Failures' ); - let specListLink = this.#domContext.create( + let specListLink = j$.private.createDom( 'a', { className: 'jasmine-spec-list-menu', href: '#' }, 'Spec List' @@ -328,12 +320,12 @@ jasmineRequire.HtmlReporter = function(j$) { }; this.add('jasmine-menu jasmine-bar jasmine-spec-list', [ - this.#domContext.create('span', {}, 'Spec List | '), + j$.private.createDom('span', {}, 'Spec List | '), failuresLink ]); this.add('jasmine-menu jasmine-bar jasmine-failure-list', [ specListLink, - this.#domContext.create('span', {}, ' | Failures ') + j$.private.createDom('span', {}, ' | Failures ') ]); } @@ -375,11 +367,11 @@ jasmineRequire.HtmlReporter = function(j$) { let seedBar; if (order && order.random) { - seedBar = this.#domContext.create( + seedBar = j$.private.createDom( 'span', { className: 'jasmine-seed-bar' }, ', randomized with seed ', - this.#domContext.create( + j$.private.createDom( 'a', { title: 'randomized with seed ' + order.seed, @@ -427,7 +419,7 @@ jasmineRequire.HtmlReporter = function(j$) { for (const line of dw.message.split('\n')) { children.push(line); - children.push(this.#domContext.create('br')); + children.push(j$.private.createDom('br')); } children[0] = 'DEPRECATION: ' + children[0]; @@ -443,21 +435,21 @@ jasmineRequire.HtmlReporter = function(j$) { // TODO private? add(className, children) { this.rootEl.appendChild( - this.#domContext.create('span', { className }, children) + j$.private.createDom('span', { className }, children) ); } #createExpander(stackTrace) { - const expandLink = this.#domContext.create( + const expandLink = j$.private.createDom( 'a', { href: '#' }, 'Show stack trace' ); - const root = this.#domContext.create( + const root = j$.private.createDom( 'div', { className: 'jasmine-expander' }, expandLink, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-expander-contents jasmine-stack-trace' }, stackTrace @@ -481,21 +473,23 @@ jasmineRequire.HtmlReporter = function(j$) { } class Banner { - #domContext; #navigateWithNewParam; - constructor(domContext, navigateWithNewParam) { - this.#domContext = domContext; + constructor(navigateWithNewParam) { this.#navigateWithNewParam = navigateWithNewParam; - this.rootEl = domContext.create( + this.rootEl = j$.private.createDom( 'div', { className: 'jasmine-banner' }, - domContext.create('a', { + j$.private.createDom('a', { className: 'jasmine-title', href: 'http://jasmine.github.io/', target: '_blank' }), - domContext.create('span', { className: 'jasmine-version' }, j$.version) + j$.private.createDom( + 'span', + { className: 'jasmine-version' }, + j$.version + ) ); } @@ -504,68 +498,68 @@ jasmineRequire.HtmlReporter = function(j$) { } #optionsMenu(config) { - const optionsMenuDom = this.#domContext.create( + const optionsMenuDom = j$.private.createDom( 'div', { className: 'jasmine-run-options' }, - this.#domContext.create( + j$.private.createDom( 'span', { className: 'jasmine-trigger' }, 'Options' ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-payload' }, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-stop-on-failure' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-fail-fast', id: 'jasmine-fail-fast', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-fail-fast' }, 'stop execution on spec failure' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-throw-failures' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-throw', id: 'jasmine-throw-failures', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-throw-failures' }, 'stop spec on expectation failure' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-random-order' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-random', id: 'jasmine-random-order', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-random-order' }, 'run tests in random order' ) ), - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-hide-disabled' }, - this.#domContext.create('input', { + j$.private.createDom('input', { className: 'jasmine-disabled', id: 'jasmine-hide-disabled', type: 'checkbox' }), - this.#domContext.create( + j$.private.createDom( 'label', { className: 'jasmine-label', for: 'jasmine-hide-disabled' }, 'hide disabled tests' @@ -633,18 +627,15 @@ jasmineRequire.HtmlReporter = function(j$) { } class SymbolsView { - #domContext; - - constructor(domContext) { - this.#domContext = domContext; - this.rootEl = domContext.create('ul', { + constructor() { + this.rootEl = j$.private.createDom('ul', { className: 'jasmine-symbol-summary' }); } append(result, config) { this.rootEl.appendChild( - this.#domContext.create('li', { + j$.private.createDom('li', { className: this.#className(result, config), id: 'spec_' + result.id, title: result.fullName @@ -668,15 +659,15 @@ jasmineRequire.HtmlReporter = function(j$) { } class SummaryTreeView { - #domContext; #urlBuilder; #filterSpecs; - constructor(domContext, urlBuilder, filterSpecs) { - this.#domContext = domContext; + constructor(urlBuilder, filterSpecs) { this.#urlBuilder = urlBuilder; this.#filterSpecs = filterSpecs; - this.rootEl = domContext.create('div', { className: 'jasmine-summary' }); + this.rootEl = j$.private.createDom('div', { + className: 'jasmine-summary' + }); } addResults(resultsTree) { @@ -691,16 +682,16 @@ jasmineRequire.HtmlReporter = function(j$) { continue; } if (resultNode.type === 'suite') { - const suiteListNode = this.#domContext.create( + const suiteListNode = j$.private.createDom( 'ul', { className: 'jasmine-suite', id: 'suite-' + resultNode.result.id }, - this.#domContext.create( + j$.private.createDom( 'li', { className: 'jasmine-suite-detail jasmine-' + resultNode.result.status }, - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.specHref(resultNode.result) }, resultNode.result.description @@ -713,7 +704,7 @@ jasmineRequire.HtmlReporter = function(j$) { } if (resultNode.type === 'spec') { if (domParent.getAttribute('class') !== 'jasmine-specs') { - specListNode = this.#domContext.create('ul', { + specListNode = j$.private.createDom('ul', { className: 'jasmine-specs' }); domParent.appendChild(specListNode); @@ -731,18 +722,18 @@ jasmineRequire.HtmlReporter = function(j$) { } } specListNode.appendChild( - this.#domContext.create( + j$.private.createDom( 'li', { className: 'jasmine-' + resultNode.result.status, id: 'spec-' + resultNode.result.id }, - this.#domContext.create( + j$.private.createDom( 'a', { href: this.#urlBuilder.specHref(resultNode.result) }, specDescription ), - this.#domContext.create( + j$.private.createDom( 'span', { className: 'jasmine-spec-duration' }, '(' + resultNode.result.duration + 'ms)' @@ -755,18 +746,16 @@ jasmineRequire.HtmlReporter = function(j$) { } class FailuresView { - #domContext; #urlBuilder; #failureEls; - constructor(domContext, urlBuilder) { - this.#domContext = domContext; + constructor(urlBuilder) { this.#urlBuilder = urlBuilder; this.#failureEls = []; - this.rootEl = domContext.create( + this.rootEl = j$.private.createDom( 'div', { className: 'jasmine-results' }, - domContext.create('div', { className: 'jasmine-failures' }) + j$.private.createDom('div', { className: 'jasmine-failures' }) ); } @@ -789,25 +778,25 @@ jasmineRequire.HtmlReporter = function(j$) { } #makeFailureEl(result, parent) { - const failure = this.#domContext.create( + const failure = j$.private.createDom( 'div', { className: 'jasmine-spec-detail jasmine-failed' }, this.#failureDescription(result, parent), - this.#domContext.create('div', { className: 'jasmine-messages' }) + j$.private.createDom('div', { className: 'jasmine-messages' }) ); const messages = failure.childNodes[1]; for (let i = 0; i < result.failedExpectations.length; i++) { const expectation = result.failedExpectations[i]; messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-result-message' }, expectation.message ) ); messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-stack-trace' }, expectation.stack @@ -817,7 +806,7 @@ jasmineRequire.HtmlReporter = function(j$) { if (result.failedExpectations.length === 0) { messages.appendChild( - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-result-message' }, 'Spec has no expectations' @@ -833,10 +822,10 @@ jasmineRequire.HtmlReporter = function(j$) { } #failureDescription(result, suite) { - const wrapper = this.#domContext.create( + const wrapper = j$.private.createDom( 'div', { className: 'jasmine-description' }, - this.#domContext.create( + j$.private.createDom( 'a', { title: result.description, @@ -852,7 +841,7 @@ jasmineRequire.HtmlReporter = function(j$) { document.createTextNode(' > '), wrapper.firstChild ); - suiteLink = this.#domContext.create( + suiteLink = j$.private.createDom( 'a', { href: this.#urlBuilder.suiteHref(suite) }, suite.result.description @@ -866,15 +855,15 @@ jasmineRequire.HtmlReporter = function(j$) { } #debugLogTable(debugLogs) { - const tbody = this.#domContext.create('tbody'); + const tbody = j$.private.createDom('tbody'); for (const entry of debugLogs) { tbody.appendChild( - this.#domContext.create( + j$.private.createDom( 'tr', {}, - this.#domContext.create('td', {}, entry.timestamp.toString()), - this.#domContext.create( + j$.private.createDom('td', {}, entry.timestamp.toString()), + j$.private.createDom( 'td', { className: 'jasmine-debug-log-msg' }, entry.message @@ -883,25 +872,25 @@ jasmineRequire.HtmlReporter = function(j$) { ); } - return this.#domContext.create( + return j$.private.createDom( 'div', { className: 'jasmine-debug-log' }, - this.#domContext.create( + j$.private.createDom( 'div', { className: 'jasmine-debug-log-header' }, 'Debug logs' ), - this.#domContext.create( + j$.private.createDom( 'table', {}, - this.#domContext.create( + j$.private.createDom( 'thead', {}, - this.#domContext.create( + j$.private.createDom( 'tr', {}, - this.#domContext.create('th', {}, 'Time (ms)'), - this.#domContext.create('th', {}, 'Message') + j$.private.createDom('th', {}, 'Time (ms)'), + j$.private.createDom('th', {}, 'Message') ) ), tbody diff --git a/src/html/createDom.js b/src/html/createDom.js new file mode 100644 index 00000000..4f7f3a00 --- /dev/null +++ b/src/html/createDom.js @@ -0,0 +1,42 @@ +jasmineRequire.createDom = function(j$) { + 'use strict'; + + function createDom(type, attrs, childrenArrayOrVarArgs) { + const el = document.createElement(type); + let children; + + if (j$.private.isArray(childrenArrayOrVarArgs)) { + children = childrenArrayOrVarArgs; + } else { + children = []; + + for (let i = 2; i < arguments.length; i++) { + children.push(arguments[i]); + } + } + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + + if (typeof child === 'string') { + el.appendChild(document.createTextNode(child)); + } else { + if (child) { + el.appendChild(child); + } + } + } + + for (const attr in attrs) { + if (attr === 'className') { + el[attr] = attrs[attr]; + } else { + el.setAttribute(attr, attrs[attr]); + } + } + + return el; + } + + return createDom; +}; diff --git a/src/html/requireHtml.js b/src/html/requireHtml.js index 2e7a2f13..4e2a470e 100644 --- a/src/html/requireHtml.js +++ b/src/html/requireHtml.js @@ -3,7 +3,7 @@ var jasmineRequire = window.jasmineRequire || require('./jasmine.js'); jasmineRequire.html = function(j$) { j$.private.ResultsNode = jasmineRequire.ResultsNode(); - j$.private.DomContext = jasmineRequire.DomContext(j$); + j$.private.createDom = jasmineRequire.createDom(j$); j$.HtmlReporter = jasmineRequire.HtmlReporter(j$); j$.QueryString = jasmineRequire.QueryString(); j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter();