admin/jasmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Turn DomContext class back into a function

Browse Source
This commit is contained in:
Steve Gravrock
2025-10-07 20:01:38 -07:00
parent de44e909f2
commit 01f050eeaa
5 changed files with 235 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
lib/jasmine-core/jasmine-html.js
View File

@@ -27,7 +27,7 @@ var jasmineRequire = window.jasmineRequire || require('./jasmine.js');
jasmineRequire.html = function(j$) { jasmineRequire.html = function(j$) {
j$.private.ResultsNode = jasmineRequire.ResultsNode(); j$.private.ResultsNode = jasmineRequire.ResultsNode();
j$.private.DomContext = jasmineRequire.DomContext(j$); j$.private.createDom = jasmineRequire.createDom(j$);
j$.HtmlReporter = jasmineRequire.HtmlReporter(j$); j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
j$.QueryString = jasmineRequire.QueryString(); j$.QueryString = jasmineRequire.QueryString();
j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter(); j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter();
@@ -121,7 +121,6 @@ jasmineRequire.HtmlReporter = function(j$) {
class HtmlReporter { class HtmlReporter {
#env; #env;
#getContainer; #getContainer;
#domContext;
#navigateWithNewParam; #navigateWithNewParam;
#urlBuilder; #urlBuilder;
#filterSpecs; #filterSpecs;
@@ -139,7 +138,6 @@ jasmineRequire.HtmlReporter = function(j$) {
this.#env = options.env; this.#env = options.env;
this.#getContainer = options.getContainer; this.#getContainer = options.getContainer;
this.#domContext = new j$.private.DomContext();
this.#navigateWithNewParam = this.#navigateWithNewParam =
options.navigateWithNewParam || function() {}; options.navigateWithNewParam || function() {};
this.#urlBuilder = new UrlBuilder( this.#urlBuilder = new UrlBuilder(
@@ -159,11 +157,11 @@ jasmineRequire.HtmlReporter = function(j$) {
this.#stateBuilder = new ResultsStateBuilder(); this.#stateBuilder = new ResultsStateBuilder();
this.#alerts = new AlertsView(this.#domContext, this.#urlBuilder); this.#alerts = new AlertsView(this.#urlBuilder);
this.#symbols = new SymbolsView(this.#domContext); this.#symbols = new SymbolsView();
this.#banner = new Banner(this.#domContext, this.#navigateWithNewParam); this.#banner = new Banner(this.#navigateWithNewParam);
this.#failures = new FailuresView(this.#domContext, this.#urlBuilder); this.#failures = new FailuresView(this.#urlBuilder);
this.#htmlReporterMain = this.#domContext.create( this.#htmlReporterMain = j$.private.createDom(
'div', 'div',
{ className: 'jasmine_html-reporter' }, { className: 'jasmine_html-reporter' },
this.#banner.rootEl, this.#banner.rootEl,
@@ -239,11 +237,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
const results = this.#find('.jasmine-results'); const results = this.#find('.jasmine-results');
const summary = new SummaryTreeView( const summary = new SummaryTreeView(this.#urlBuilder, this.#filterSpecs);
this.#domContext,
this.#urlBuilder,
this.#filterSpecs
);
summary.addResults(this.#stateBuilder.topResults); summary.addResults(this.#stateBuilder.topResults);
results.appendChild(summary.rootEl); results.appendChild(summary.rootEl);
@@ -315,13 +309,11 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class AlertsView { class AlertsView {
#domContext;
#urlBuilder; #urlBuilder;
constructor(domContext, urlBuilder) { constructor(urlBuilder) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.rootEl = domContext.create('div', { className: 'jasmine-alert' }); this.rootEl = j$.private.createDom('div', { className: 'jasmine-alert' });
} }
addDuration(ms) { addDuration(ms) {
@@ -332,7 +324,7 @@ jasmineRequire.HtmlReporter = function(j$) {
// TODO: backfill tests for this // TODO: backfill tests for this
this.add( this.add(
'jasmine-bar jasmine-skipped', 'jasmine-bar jasmine-skipped',
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.runAllHref(), title: 'Run all specs' }, { href: this.#urlBuilder.runAllHref(), title: 'Run all specs' },
`Ran ${numExecuted} of ${numDefined} specs - run all` `Ran ${numExecuted} of ${numDefined} specs - run all`
@@ -341,12 +333,12 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
addFailureToggle(onClickFailures, onClickSpecList) { addFailureToggle(onClickFailures, onClickSpecList) {
const failuresLink = this.#domContext.create( const failuresLink = j$.private.createDom(
'a', 'a',
{ className: 'jasmine-failures-menu', href: '#' }, { className: 'jasmine-failures-menu', href: '#' },
'Failures' 'Failures'
); );
let specListLink = this.#domContext.create( let specListLink = j$.private.createDom(
'a', 'a',
{ className: 'jasmine-spec-list-menu', href: '#' }, { className: 'jasmine-spec-list-menu', href: '#' },
'Spec List' 'Spec List'
@@ -363,12 +355,12 @@ jasmineRequire.HtmlReporter = function(j$) {
}; };
this.add('jasmine-menu jasmine-bar jasmine-spec-list', [ this.add('jasmine-menu jasmine-bar jasmine-spec-list', [
this.#domContext.create('span', {}, 'Spec List | '), j$.private.createDom('span', {}, 'Spec List | '),
failuresLink failuresLink
]); ]);
this.add('jasmine-menu jasmine-bar jasmine-failure-list', [ this.add('jasmine-menu jasmine-bar jasmine-failure-list', [
specListLink, specListLink,
this.#domContext.create('span', {}, ' | Failures ') j$.private.createDom('span', {}, ' | Failures ')
]); ]);
} }
@@ -410,11 +402,11 @@ jasmineRequire.HtmlReporter = function(j$) {
let seedBar; let seedBar;
if (order && order.random) { if (order && order.random) {
seedBar = this.#domContext.create( seedBar = j$.private.createDom(
'span', 'span',
{ className: 'jasmine-seed-bar' }, { className: 'jasmine-seed-bar' },
', randomized with seed ', ', randomized with seed ',
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ {
title: 'randomized with seed ' + order.seed, title: 'randomized with seed ' + order.seed,
@@ -462,7 +454,7 @@ jasmineRequire.HtmlReporter = function(j$) {
for (const line of dw.message.split('\n')) { for (const line of dw.message.split('\n')) {
children.push(line); children.push(line);
children.push(this.#domContext.create('br')); children.push(j$.private.createDom('br'));
} }
children[0] = 'DEPRECATION: ' + children[0]; children[0] = 'DEPRECATION: ' + children[0];
@@ -478,21 +470,21 @@ jasmineRequire.HtmlReporter = function(j$) {
// TODO private? // TODO private?
add(className, children) { add(className, children) {
this.rootEl.appendChild( this.rootEl.appendChild(
this.#domContext.create('span', { className }, children) j$.private.createDom('span', { className }, children)
); );
} }
#createExpander(stackTrace) { #createExpander(stackTrace) {
const expandLink = this.#domContext.create( const expandLink = j$.private.createDom(
'a', 'a',
{ href: '#' }, { href: '#' },
'Show stack trace' 'Show stack trace'
); );
const root = this.#domContext.create( const root = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-expander' }, { className: 'jasmine-expander' },
expandLink, expandLink,
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-expander-contents jasmine-stack-trace' }, { className: 'jasmine-expander-contents jasmine-stack-trace' },
stackTrace stackTrace
@@ -516,21 +508,23 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class Banner { class Banner {
#domContext;
#navigateWithNewParam; #navigateWithNewParam;
constructor(domContext, navigateWithNewParam) { constructor(navigateWithNewParam) {
this.#domContext = domContext;
this.#navigateWithNewParam = navigateWithNewParam; this.#navigateWithNewParam = navigateWithNewParam;
this.rootEl = domContext.create( this.rootEl = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-banner' }, { className: 'jasmine-banner' },
domContext.create('a', { j$.private.createDom('a', {
className: 'jasmine-title', className: 'jasmine-title',
href: 'http://jasmine.github.io/', href: 'http://jasmine.github.io/',
target: '_blank' 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) { #optionsMenu(config) {
const optionsMenuDom = this.#domContext.create( const optionsMenuDom = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-run-options' }, { className: 'jasmine-run-options' },
this.#domContext.create( j$.private.createDom(
'span', 'span',
{ className: 'jasmine-trigger' }, { className: 'jasmine-trigger' },
'Options' 'Options'
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-payload' }, { className: 'jasmine-payload' },
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-stop-on-failure' }, { className: 'jasmine-stop-on-failure' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-fail-fast', className: 'jasmine-fail-fast',
id: 'jasmine-fail-fast', id: 'jasmine-fail-fast',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-fail-fast' }, { className: 'jasmine-label', for: 'jasmine-fail-fast' },
'stop execution on spec failure' 'stop execution on spec failure'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-throw-failures' }, { className: 'jasmine-throw-failures' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-throw', className: 'jasmine-throw',
id: 'jasmine-throw-failures', id: 'jasmine-throw-failures',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-throw-failures' }, { className: 'jasmine-label', for: 'jasmine-throw-failures' },
'stop spec on expectation failure' 'stop spec on expectation failure'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-random-order' }, { className: 'jasmine-random-order' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-random', className: 'jasmine-random',
id: 'jasmine-random-order', id: 'jasmine-random-order',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-random-order' }, { className: 'jasmine-label', for: 'jasmine-random-order' },
'run tests in random order' 'run tests in random order'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-hide-disabled' }, { className: 'jasmine-hide-disabled' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-disabled', className: 'jasmine-disabled',
id: 'jasmine-hide-disabled', id: 'jasmine-hide-disabled',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-hide-disabled' }, { className: 'jasmine-label', for: 'jasmine-hide-disabled' },
'hide disabled tests' 'hide disabled tests'
@@ -668,18 +662,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class SymbolsView { class SymbolsView {
#domContext; constructor() {
this.rootEl = j$.private.createDom('ul', {
constructor(domContext) {
this.#domContext = domContext;
this.rootEl = domContext.create('ul', {
className: 'jasmine-symbol-summary' className: 'jasmine-symbol-summary'
}); });
} }
append(result, config) { append(result, config) {
this.rootEl.appendChild( this.rootEl.appendChild(
this.#domContext.create('li', { j$.private.createDom('li', {
className: this.#className(result, config), className: this.#className(result, config),
id: 'spec_' + result.id, id: 'spec_' + result.id,
title: result.fullName title: result.fullName
@@ -703,15 +694,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class SummaryTreeView { class SummaryTreeView {
#domContext;
#urlBuilder; #urlBuilder;
#filterSpecs; #filterSpecs;
constructor(domContext, urlBuilder, filterSpecs) { constructor(urlBuilder, filterSpecs) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.#filterSpecs = filterSpecs; this.#filterSpecs = filterSpecs;
this.rootEl = domContext.create('div', { className: 'jasmine-summary' }); this.rootEl = j$.private.createDom('div', {
className: 'jasmine-summary'
});
} }
addResults(resultsTree) { addResults(resultsTree) {
@@ -726,16 +717,16 @@ jasmineRequire.HtmlReporter = function(j$) {
continue; continue;
} }
if (resultNode.type === 'suite') { if (resultNode.type === 'suite') {
const suiteListNode = this.#domContext.create( const suiteListNode = j$.private.createDom(
'ul', 'ul',
{ className: 'jasmine-suite', id: 'suite-' + resultNode.result.id }, { className: 'jasmine-suite', id: 'suite-' + resultNode.result.id },
this.#domContext.create( j$.private.createDom(
'li', 'li',
{ {
className: className:
'jasmine-suite-detail jasmine-' + resultNode.result.status 'jasmine-suite-detail jasmine-' + resultNode.result.status
}, },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.specHref(resultNode.result) }, { href: this.#urlBuilder.specHref(resultNode.result) },
resultNode.result.description resultNode.result.description
@@ -748,7 +739,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
if (resultNode.type === 'spec') { if (resultNode.type === 'spec') {
if (domParent.getAttribute('class') !== 'jasmine-specs') { if (domParent.getAttribute('class') !== 'jasmine-specs') {
specListNode = this.#domContext.create('ul', { specListNode = j$.private.createDom('ul', {
className: 'jasmine-specs' className: 'jasmine-specs'
}); });
domParent.appendChild(specListNode); domParent.appendChild(specListNode);
@@ -766,18 +757,18 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
} }
specListNode.appendChild( specListNode.appendChild(
this.#domContext.create( j$.private.createDom(
'li', 'li',
{ {
className: 'jasmine-' + resultNode.result.status, className: 'jasmine-' + resultNode.result.status,
id: 'spec-' + resultNode.result.id id: 'spec-' + resultNode.result.id
}, },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.specHref(resultNode.result) }, { href: this.#urlBuilder.specHref(resultNode.result) },
specDescription specDescription
), ),
this.#domContext.create( j$.private.createDom(
'span', 'span',
{ className: 'jasmine-spec-duration' }, { className: 'jasmine-spec-duration' },
'(' + resultNode.result.duration + 'ms)' '(' + resultNode.result.duration + 'ms)'
@@ -790,18 +781,16 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class FailuresView { class FailuresView {
#domContext;
#urlBuilder; #urlBuilder;
#failureEls; #failureEls;
constructor(domContext, urlBuilder) { constructor(urlBuilder) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.#failureEls = []; this.#failureEls = [];
this.rootEl = domContext.create( this.rootEl = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-results' }, { 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) { #makeFailureEl(result, parent) {
const failure = this.#domContext.create( const failure = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-spec-detail jasmine-failed' }, { className: 'jasmine-spec-detail jasmine-failed' },
this.#failureDescription(result, parent), this.#failureDescription(result, parent),
this.#domContext.create('div', { className: 'jasmine-messages' }) j$.private.createDom('div', { className: 'jasmine-messages' })
); );
const messages = failure.childNodes[1]; const messages = failure.childNodes[1];
for (let i = 0; i < result.failedExpectations.length; i++) { for (let i = 0; i < result.failedExpectations.length; i++) {
const expectation = result.failedExpectations[i]; const expectation = result.failedExpectations[i];
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-result-message' }, { className: 'jasmine-result-message' },
expectation.message expectation.message
) )
); );
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-stack-trace' }, { className: 'jasmine-stack-trace' },
expectation.stack expectation.stack
@@ -852,7 +841,7 @@ jasmineRequire.HtmlReporter = function(j$) {
if (result.failedExpectations.length === 0) { if (result.failedExpectations.length === 0) {
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-result-message' }, { className: 'jasmine-result-message' },
'Spec has no expectations' 'Spec has no expectations'
@@ -868,10 +857,10 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
#failureDescription(result, suite) { #failureDescription(result, suite) {
const wrapper = this.#domContext.create( const wrapper = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-description' }, { className: 'jasmine-description' },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ {
title: result.description, title: result.description,
@@ -887,7 +876,7 @@ jasmineRequire.HtmlReporter = function(j$) {
document.createTextNode(' > '), document.createTextNode(' > '),
wrapper.firstChild wrapper.firstChild
); );
suiteLink = this.#domContext.create( suiteLink = j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.suiteHref(suite) }, { href: this.#urlBuilder.suiteHref(suite) },
suite.result.description suite.result.description
@@ -901,15 +890,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
#debugLogTable(debugLogs) { #debugLogTable(debugLogs) {
const tbody = this.#domContext.create('tbody'); const tbody = j$.private.createDom('tbody');
for (const entry of debugLogs) { for (const entry of debugLogs) {
tbody.appendChild( tbody.appendChild(
this.#domContext.create( j$.private.createDom(
'tr', 'tr',
{}, {},
this.#domContext.create('td', {}, entry.timestamp.toString()), j$.private.createDom('td', {}, entry.timestamp.toString()),
this.#domContext.create( j$.private.createDom(
'td', 'td',
{ className: 'jasmine-debug-log-msg' }, { className: 'jasmine-debug-log-msg' },
entry.message entry.message
@@ -918,25 +907,25 @@ jasmineRequire.HtmlReporter = function(j$) {
); );
} }
return this.#domContext.create( return j$.private.createDom(
'div', 'div',
{ className: 'jasmine-debug-log' }, { className: 'jasmine-debug-log' },
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-debug-log-header' }, { className: 'jasmine-debug-log-header' },
'Debug logs' 'Debug logs'
), ),
this.#domContext.create( j$.private.createDom(
'table', 'table',
{}, {},
this.#domContext.create( j$.private.createDom(
'thead', 'thead',
{}, {},
this.#domContext.create( j$.private.createDom(
'tr', 'tr',
{}, {},
this.#domContext.create('th', {}, 'Time (ms)'), j$.private.createDom('th', {}, 'Time (ms)'),
this.#domContext.create('th', {}, 'Message') j$.private.createDom('th', {}, 'Message')
) )
), ),
tbody tbody
@@ -1121,48 +1110,45 @@ jasmineRequire.QueryString = function() {
return QueryString; return QueryString;
}; };
jasmineRequire.DomContext = function(j$) { jasmineRequire.createDom = function(j$) {
'use strict'; 'use strict';
//TODO maybe rename function createDom(type, attrs, childrenArrayOrVarArgs) {
class DomContext { const el = document.createElement(type);
create(type, attrs, childrenArrayOrVarArgs) { let children;
const el = document.createElement(type);
let children;
if (j$.private.isArray(childrenArrayOrVarArgs)) { if (j$.private.isArray(childrenArrayOrVarArgs)) {
children = childrenArrayOrVarArgs; children = childrenArrayOrVarArgs;
} else { } else {
children = []; children = [];
for (let i = 2; i < arguments.length; i++) { for (let i = 2; i < arguments.length; i++) {
children.push(arguments[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;
}; };

45
src/html/DomContext.js
View File

@@ -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;
};

169
src/html/HtmlReporter.js
View File

@@ -86,7 +86,6 @@ jasmineRequire.HtmlReporter = function(j$) {
class HtmlReporter { class HtmlReporter {
#env; #env;
#getContainer; #getContainer;
#domContext;
#navigateWithNewParam; #navigateWithNewParam;
#urlBuilder; #urlBuilder;
#filterSpecs; #filterSpecs;
@@ -104,7 +103,6 @@ jasmineRequire.HtmlReporter = function(j$) {
this.#env = options.env; this.#env = options.env;
this.#getContainer = options.getContainer; this.#getContainer = options.getContainer;
this.#domContext = new j$.private.DomContext();
this.#navigateWithNewParam = this.#navigateWithNewParam =
options.navigateWithNewParam || function() {}; options.navigateWithNewParam || function() {};
this.#urlBuilder = new UrlBuilder( this.#urlBuilder = new UrlBuilder(
@@ -124,11 +122,11 @@ jasmineRequire.HtmlReporter = function(j$) {
this.#stateBuilder = new ResultsStateBuilder(); this.#stateBuilder = new ResultsStateBuilder();
this.#alerts = new AlertsView(this.#domContext, this.#urlBuilder); this.#alerts = new AlertsView(this.#urlBuilder);
this.#symbols = new SymbolsView(this.#domContext); this.#symbols = new SymbolsView();
this.#banner = new Banner(this.#domContext, this.#navigateWithNewParam); this.#banner = new Banner(this.#navigateWithNewParam);
this.#failures = new FailuresView(this.#domContext, this.#urlBuilder); this.#failures = new FailuresView(this.#urlBuilder);
this.#htmlReporterMain = this.#domContext.create( this.#htmlReporterMain = j$.private.createDom(
'div', 'div',
{ className: 'jasmine_html-reporter' }, { className: 'jasmine_html-reporter' },
this.#banner.rootEl, this.#banner.rootEl,
@@ -204,11 +202,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
const results = this.#find('.jasmine-results'); const results = this.#find('.jasmine-results');
const summary = new SummaryTreeView( const summary = new SummaryTreeView(this.#urlBuilder, this.#filterSpecs);
this.#domContext,
this.#urlBuilder,
this.#filterSpecs
);
summary.addResults(this.#stateBuilder.topResults); summary.addResults(this.#stateBuilder.topResults);
results.appendChild(summary.rootEl); results.appendChild(summary.rootEl);
@@ -280,13 +274,11 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class AlertsView { class AlertsView {
#domContext;
#urlBuilder; #urlBuilder;
constructor(domContext, urlBuilder) { constructor(urlBuilder) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.rootEl = domContext.create('div', { className: 'jasmine-alert' }); this.rootEl = j$.private.createDom('div', { className: 'jasmine-alert' });
} }
addDuration(ms) { addDuration(ms) {
@@ -297,7 +289,7 @@ jasmineRequire.HtmlReporter = function(j$) {
// TODO: backfill tests for this // TODO: backfill tests for this
this.add( this.add(
'jasmine-bar jasmine-skipped', 'jasmine-bar jasmine-skipped',
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.runAllHref(), title: 'Run all specs' }, { href: this.#urlBuilder.runAllHref(), title: 'Run all specs' },
`Ran ${numExecuted} of ${numDefined} specs - run all` `Ran ${numExecuted} of ${numDefined} specs - run all`
@@ -306,12 +298,12 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
addFailureToggle(onClickFailures, onClickSpecList) { addFailureToggle(onClickFailures, onClickSpecList) {
const failuresLink = this.#domContext.create( const failuresLink = j$.private.createDom(
'a', 'a',
{ className: 'jasmine-failures-menu', href: '#' }, { className: 'jasmine-failures-menu', href: '#' },
'Failures' 'Failures'
); );
let specListLink = this.#domContext.create( let specListLink = j$.private.createDom(
'a', 'a',
{ className: 'jasmine-spec-list-menu', href: '#' }, { className: 'jasmine-spec-list-menu', href: '#' },
'Spec List' 'Spec List'
@@ -328,12 +320,12 @@ jasmineRequire.HtmlReporter = function(j$) {
}; };
this.add('jasmine-menu jasmine-bar jasmine-spec-list', [ this.add('jasmine-menu jasmine-bar jasmine-spec-list', [
this.#domContext.create('span', {}, 'Spec List | '), j$.private.createDom('span', {}, 'Spec List | '),
failuresLink failuresLink
]); ]);
this.add('jasmine-menu jasmine-bar jasmine-failure-list', [ this.add('jasmine-menu jasmine-bar jasmine-failure-list', [
specListLink, specListLink,
this.#domContext.create('span', {}, ' | Failures ') j$.private.createDom('span', {}, ' | Failures ')
]); ]);
} }
@@ -375,11 +367,11 @@ jasmineRequire.HtmlReporter = function(j$) {
let seedBar; let seedBar;
if (order && order.random) { if (order && order.random) {
seedBar = this.#domContext.create( seedBar = j$.private.createDom(
'span', 'span',
{ className: 'jasmine-seed-bar' }, { className: 'jasmine-seed-bar' },
', randomized with seed ', ', randomized with seed ',
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ {
title: 'randomized with seed ' + order.seed, title: 'randomized with seed ' + order.seed,
@@ -427,7 +419,7 @@ jasmineRequire.HtmlReporter = function(j$) {
for (const line of dw.message.split('\n')) { for (const line of dw.message.split('\n')) {
children.push(line); children.push(line);
children.push(this.#domContext.create('br')); children.push(j$.private.createDom('br'));
} }
children[0] = 'DEPRECATION: ' + children[0]; children[0] = 'DEPRECATION: ' + children[0];
@@ -443,21 +435,21 @@ jasmineRequire.HtmlReporter = function(j$) {
// TODO private? // TODO private?
add(className, children) { add(className, children) {
this.rootEl.appendChild( this.rootEl.appendChild(
this.#domContext.create('span', { className }, children) j$.private.createDom('span', { className }, children)
); );
} }
#createExpander(stackTrace) { #createExpander(stackTrace) {
const expandLink = this.#domContext.create( const expandLink = j$.private.createDom(
'a', 'a',
{ href: '#' }, { href: '#' },
'Show stack trace' 'Show stack trace'
); );
const root = this.#domContext.create( const root = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-expander' }, { className: 'jasmine-expander' },
expandLink, expandLink,
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-expander-contents jasmine-stack-trace' }, { className: 'jasmine-expander-contents jasmine-stack-trace' },
stackTrace stackTrace
@@ -481,21 +473,23 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class Banner { class Banner {
#domContext;
#navigateWithNewParam; #navigateWithNewParam;
constructor(domContext, navigateWithNewParam) { constructor(navigateWithNewParam) {
this.#domContext = domContext;
this.#navigateWithNewParam = navigateWithNewParam; this.#navigateWithNewParam = navigateWithNewParam;
this.rootEl = domContext.create( this.rootEl = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-banner' }, { className: 'jasmine-banner' },
domContext.create('a', { j$.private.createDom('a', {
className: 'jasmine-title', className: 'jasmine-title',
href: 'http://jasmine.github.io/', href: 'http://jasmine.github.io/',
target: '_blank' 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) { #optionsMenu(config) {
const optionsMenuDom = this.#domContext.create( const optionsMenuDom = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-run-options' }, { className: 'jasmine-run-options' },
this.#domContext.create( j$.private.createDom(
'span', 'span',
{ className: 'jasmine-trigger' }, { className: 'jasmine-trigger' },
'Options' 'Options'
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-payload' }, { className: 'jasmine-payload' },
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-stop-on-failure' }, { className: 'jasmine-stop-on-failure' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-fail-fast', className: 'jasmine-fail-fast',
id: 'jasmine-fail-fast', id: 'jasmine-fail-fast',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-fail-fast' }, { className: 'jasmine-label', for: 'jasmine-fail-fast' },
'stop execution on spec failure' 'stop execution on spec failure'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-throw-failures' }, { className: 'jasmine-throw-failures' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-throw', className: 'jasmine-throw',
id: 'jasmine-throw-failures', id: 'jasmine-throw-failures',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-throw-failures' }, { className: 'jasmine-label', for: 'jasmine-throw-failures' },
'stop spec on expectation failure' 'stop spec on expectation failure'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-random-order' }, { className: 'jasmine-random-order' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-random', className: 'jasmine-random',
id: 'jasmine-random-order', id: 'jasmine-random-order',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-random-order' }, { className: 'jasmine-label', for: 'jasmine-random-order' },
'run tests in random order' 'run tests in random order'
) )
), ),
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-hide-disabled' }, { className: 'jasmine-hide-disabled' },
this.#domContext.create('input', { j$.private.createDom('input', {
className: 'jasmine-disabled', className: 'jasmine-disabled',
id: 'jasmine-hide-disabled', id: 'jasmine-hide-disabled',
type: 'checkbox' type: 'checkbox'
}), }),
this.#domContext.create( j$.private.createDom(
'label', 'label',
{ className: 'jasmine-label', for: 'jasmine-hide-disabled' }, { className: 'jasmine-label', for: 'jasmine-hide-disabled' },
'hide disabled tests' 'hide disabled tests'
@@ -633,18 +627,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class SymbolsView { class SymbolsView {
#domContext; constructor() {
this.rootEl = j$.private.createDom('ul', {
constructor(domContext) {
this.#domContext = domContext;
this.rootEl = domContext.create('ul', {
className: 'jasmine-symbol-summary' className: 'jasmine-symbol-summary'
}); });
} }
append(result, config) { append(result, config) {
this.rootEl.appendChild( this.rootEl.appendChild(
this.#domContext.create('li', { j$.private.createDom('li', {
className: this.#className(result, config), className: this.#className(result, config),
id: 'spec_' + result.id, id: 'spec_' + result.id,
title: result.fullName title: result.fullName
@@ -668,15 +659,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class SummaryTreeView { class SummaryTreeView {
#domContext;
#urlBuilder; #urlBuilder;
#filterSpecs; #filterSpecs;
constructor(domContext, urlBuilder, filterSpecs) { constructor(urlBuilder, filterSpecs) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.#filterSpecs = filterSpecs; this.#filterSpecs = filterSpecs;
this.rootEl = domContext.create('div', { className: 'jasmine-summary' }); this.rootEl = j$.private.createDom('div', {
className: 'jasmine-summary'
});
} }
addResults(resultsTree) { addResults(resultsTree) {
@@ -691,16 +682,16 @@ jasmineRequire.HtmlReporter = function(j$) {
continue; continue;
} }
if (resultNode.type === 'suite') { if (resultNode.type === 'suite') {
const suiteListNode = this.#domContext.create( const suiteListNode = j$.private.createDom(
'ul', 'ul',
{ className: 'jasmine-suite', id: 'suite-' + resultNode.result.id }, { className: 'jasmine-suite', id: 'suite-' + resultNode.result.id },
this.#domContext.create( j$.private.createDom(
'li', 'li',
{ {
className: className:
'jasmine-suite-detail jasmine-' + resultNode.result.status 'jasmine-suite-detail jasmine-' + resultNode.result.status
}, },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.specHref(resultNode.result) }, { href: this.#urlBuilder.specHref(resultNode.result) },
resultNode.result.description resultNode.result.description
@@ -713,7 +704,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
if (resultNode.type === 'spec') { if (resultNode.type === 'spec') {
if (domParent.getAttribute('class') !== 'jasmine-specs') { if (domParent.getAttribute('class') !== 'jasmine-specs') {
specListNode = this.#domContext.create('ul', { specListNode = j$.private.createDom('ul', {
className: 'jasmine-specs' className: 'jasmine-specs'
}); });
domParent.appendChild(specListNode); domParent.appendChild(specListNode);
@@ -731,18 +722,18 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
} }
specListNode.appendChild( specListNode.appendChild(
this.#domContext.create( j$.private.createDom(
'li', 'li',
{ {
className: 'jasmine-' + resultNode.result.status, className: 'jasmine-' + resultNode.result.status,
id: 'spec-' + resultNode.result.id id: 'spec-' + resultNode.result.id
}, },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.specHref(resultNode.result) }, { href: this.#urlBuilder.specHref(resultNode.result) },
specDescription specDescription
), ),
this.#domContext.create( j$.private.createDom(
'span', 'span',
{ className: 'jasmine-spec-duration' }, { className: 'jasmine-spec-duration' },
'(' + resultNode.result.duration + 'ms)' '(' + resultNode.result.duration + 'ms)'
@@ -755,18 +746,16 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
class FailuresView { class FailuresView {
#domContext;
#urlBuilder; #urlBuilder;
#failureEls; #failureEls;
constructor(domContext, urlBuilder) { constructor(urlBuilder) {
this.#domContext = domContext;
this.#urlBuilder = urlBuilder; this.#urlBuilder = urlBuilder;
this.#failureEls = []; this.#failureEls = [];
this.rootEl = domContext.create( this.rootEl = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-results' }, { 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) { #makeFailureEl(result, parent) {
const failure = this.#domContext.create( const failure = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-spec-detail jasmine-failed' }, { className: 'jasmine-spec-detail jasmine-failed' },
this.#failureDescription(result, parent), this.#failureDescription(result, parent),
this.#domContext.create('div', { className: 'jasmine-messages' }) j$.private.createDom('div', { className: 'jasmine-messages' })
); );
const messages = failure.childNodes[1]; const messages = failure.childNodes[1];
for (let i = 0; i < result.failedExpectations.length; i++) { for (let i = 0; i < result.failedExpectations.length; i++) {
const expectation = result.failedExpectations[i]; const expectation = result.failedExpectations[i];
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-result-message' }, { className: 'jasmine-result-message' },
expectation.message expectation.message
) )
); );
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-stack-trace' }, { className: 'jasmine-stack-trace' },
expectation.stack expectation.stack
@@ -817,7 +806,7 @@ jasmineRequire.HtmlReporter = function(j$) {
if (result.failedExpectations.length === 0) { if (result.failedExpectations.length === 0) {
messages.appendChild( messages.appendChild(
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-result-message' }, { className: 'jasmine-result-message' },
'Spec has no expectations' 'Spec has no expectations'
@@ -833,10 +822,10 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
#failureDescription(result, suite) { #failureDescription(result, suite) {
const wrapper = this.#domContext.create( const wrapper = j$.private.createDom(
'div', 'div',
{ className: 'jasmine-description' }, { className: 'jasmine-description' },
this.#domContext.create( j$.private.createDom(
'a', 'a',
{ {
title: result.description, title: result.description,
@@ -852,7 +841,7 @@ jasmineRequire.HtmlReporter = function(j$) {
document.createTextNode(' > '), document.createTextNode(' > '),
wrapper.firstChild wrapper.firstChild
); );
suiteLink = this.#domContext.create( suiteLink = j$.private.createDom(
'a', 'a',
{ href: this.#urlBuilder.suiteHref(suite) }, { href: this.#urlBuilder.suiteHref(suite) },
suite.result.description suite.result.description
@@ -866,15 +855,15 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
#debugLogTable(debugLogs) { #debugLogTable(debugLogs) {
const tbody = this.#domContext.create('tbody'); const tbody = j$.private.createDom('tbody');
for (const entry of debugLogs) { for (const entry of debugLogs) {
tbody.appendChild( tbody.appendChild(
this.#domContext.create( j$.private.createDom(
'tr', 'tr',
{}, {},
this.#domContext.create('td', {}, entry.timestamp.toString()), j$.private.createDom('td', {}, entry.timestamp.toString()),
this.#domContext.create( j$.private.createDom(
'td', 'td',
{ className: 'jasmine-debug-log-msg' }, { className: 'jasmine-debug-log-msg' },
entry.message entry.message
@@ -883,25 +872,25 @@ jasmineRequire.HtmlReporter = function(j$) {
); );
} }
return this.#domContext.create( return j$.private.createDom(
'div', 'div',
{ className: 'jasmine-debug-log' }, { className: 'jasmine-debug-log' },
this.#domContext.create( j$.private.createDom(
'div', 'div',
{ className: 'jasmine-debug-log-header' }, { className: 'jasmine-debug-log-header' },
'Debug logs' 'Debug logs'
), ),
this.#domContext.create( j$.private.createDom(
'table', 'table',
{}, {},
this.#domContext.create( j$.private.createDom(
'thead', 'thead',
{}, {},
this.#domContext.create( j$.private.createDom(
'tr', 'tr',
{}, {},
this.#domContext.create('th', {}, 'Time (ms)'), j$.private.createDom('th', {}, 'Time (ms)'),
this.#domContext.create('th', {}, 'Message') j$.private.createDom('th', {}, 'Message')
) )
), ),
tbody tbody

42
src/html/createDom.js Normal file
View File

@@ -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;
};

2
src/html/requireHtml.js
View File

@@ -3,7 +3,7 @@ var jasmineRequire = window.jasmineRequire || require('./jasmine.js');
jasmineRequire.html = function(j$) { jasmineRequire.html = function(j$) {
j$.private.ResultsNode = jasmineRequire.ResultsNode(); j$.private.ResultsNode = jasmineRequire.ResultsNode();
j$.private.DomContext = jasmineRequire.DomContext(j$); j$.private.createDom = jasmineRequire.createDom(j$);
j$.HtmlReporter = jasmineRequire.HtmlReporter(j$); j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
j$.QueryString = jasmineRequire.QueryString(); j$.QueryString = jasmineRequire.QueryString();
j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter(); j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter();