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

Introduce a tab bar

Browse Source 
This will make it easier to add a third tab to HtmlReporterV2.
This commit is contained in:
Steve Gravrock
2025-10-26 12:50:42 -07:00
parent 85322d1877
commit d31d33aeb3
10 changed files with 646 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,6 +35,7 @@ jasmineRequire.html = function(j$) {
j$.private.SymbolsView = jasmineRequire.SymbolsView(j$);
j$.private.SummaryTreeView = jasmineRequire.SummaryTreeView(j$);
j$.private.FailuresView = jasmineRequire.FailuresView(j$);
j$.private.TabBar = jasmineRequire.TabBar(j$);
j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
j$.HtmlReporterV2Urls = jasmineRequire.HtmlReporterV2Urls(j$);
j$.HtmlReporterV2 = jasmineRequire.HtmlReporterV2(j$);
@@ -187,16 +188,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
@@ -434,6 +471,7 @@ jasmineRequire.AlertsView = function(j$) {
);
}
// TODO: remove this once HtmlReporterV2 doesn't use it
addFailureToggle(onClickFailures, onClickSpecList) {
const failuresLink = createDom(
'a',
@@ -456,14 +494,20 @@ jasmineRequire.AlertsView = function(j$) {
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 ')
]);
this.rootEl.appendChild(
createDom(
'span',
{ className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
[createDom('span', {}, 'Spec List | '), failuresLink]
)
);
this.rootEl.appendChild(
createDom(
'span',
{ className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
[specListLink, createDom('span', {}, ' | Failures ')]
)
);
}
addGlobalFailure(failure) {
@@ -946,6 +990,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
const { createDom, noExpectations } = j$.private.htmlReporterUtils;
const specListTabId = 'jasmine-specListTab';
const failuresTabId = 'jasmine-failuresTab';
/**
* @class HtmlReporterV2
* @classdesc Displays results and allows re-running individual specs and suites.
@@ -974,6 +1021,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
// Sub-views
#alerts;
#statusBar;
#tabBar;
#progress;
#banner;
#failures;
@@ -1011,6 +1059,22 @@ 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' }
],
tabId => {
if (tabId === specListTabId) {
this.#setMenuModeTo('jasmine-spec-list');
} else {
this.#setMenuModeTo('jasmine-failure-list');
}
}
);
this.#alerts.addBar(this.#tabBar.rootEl);
this.#progress = new ProgressView();
this.#banner = new j$.private.Banner(
this.#queryString.navigateWithNewParam.bind(this.#queryString),
@@ -1103,13 +1167,11 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
results.appendChild(summary.rootEl);
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(specListTabId);
this.#tabBar.showTab(failuresTabId);
this.#tabBar.selectTab(failuresTabId);
} else {
this.#tabBar.selectTab(specListTabId);
}
}
@@ -1148,7 +1210,6 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
this.rootEl.value = this.rootEl.value + 1;
if (result.status === 'failed') {
// TODO: also a non-color indicator
this.rootEl.classList.add('failed');
}
}
@@ -1665,3 +1726,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;
};

8
lib/jasmine-core/jasmine.css
View File

@@ -323,4 +323,12 @@ body {
}
.jasmine_html-reporter .jasmine-debug-log .jasmine-debug-log-msg {
white-space: pre;
}
.jasmine-hidden {
display: none;
}
.jasmine-tab + .jasmine-tab:before {
content: " | ";
}

261
spec/html/HtmlReporterV2Spec.js
View File

@@ -167,18 +167,18 @@ describe('HtmlReporterV2', function() {
'.jasmine-alert .jasmine-bar'
);
expect(alertBars.length).toEqual(4);
expect(alertBars[1].innerHTML).toMatch(
expect(alertBars.length).toEqual(5);
expect(alertBars[2].innerHTML).toMatch(
/spec deprecation.*\(in spec: a spec with a deprecation\)/
);
expect(alertBars[1].getAttribute('class')).toEqual(
expect(alertBars[2].getAttribute('class')).toEqual(
'jasmine-bar jasmine-warning'
);
expect(alertBars[2].innerHTML).toMatch(
expect(alertBars[3].innerHTML).toMatch(
/suite deprecation.*\(in suite: a suite with a deprecation\)/
);
expect(alertBars[3].innerHTML).toMatch(/global deprecation/);
expect(alertBars[3].innerHTML).not.toMatch(/in /);
expect(alertBars[4].innerHTML).toMatch(/global deprecation/);
expect(alertBars[4].innerHTML).not.toMatch(/in /);
});
it('displays expandable stack traces', function() {
@@ -259,6 +259,193 @@ describe('HtmlReporterV2', function() {
});
});
describe('The tab bar', function() {
function checkHidden(tabs, expected) {
const actual = Array.from(tabs).map(t =>
t.classList.contains('jasmine-hidden')
);
expect(actual)
.withContext('tab hiddenness')
.toEqual(expected);
}
describe('while Jasmine is running', function() {
it('hides all tabs', function() {
const reporter = setup();
reporter.initialize();
reporter.jasmineStarted({ totalSpecsDefined: 0 });
const tabs = container.querySelectorAll('.jasmine-tab');
expect(tabs.length).toEqual(2);
expect(tabs[0].textContent).toEqual('Spec List');
expect(tabs[1].textContent).toEqual('Failures');
checkHidden(tabs, [true, true]);
// Results, even failures, should not show any tabs
reporter.specDone({
id: 1,
description: 'a failing spec',
fullName: 'a failing spec',
status: 'failed',
failedExpectations: [{}],
passedExpectations: []
});
checkHidden(tabs, [true, true]);
});
});
describe('when Jasmine is done', function() {
function hasSpecOrSuiteFailureBehavior(reportEvents) {
let reporter;
beforeEach(function() {
reporter = setup();
reporter.initialize();
reportEvents(reporter);
});
it('shows the Spec List and Failures tabs', function() {
const tabs = container.querySelectorAll('.jasmine-tab');
checkHidden(tabs, [false, false]);
});
it('selects the Failures tab', function() {
const reporterNode = container.querySelector(
'.jasmine_html-reporter'
);
expect(reporterNode).toHaveClass('jasmine-failure-list');
});
it('switches between failure details and the spec summary', function() {
const tabs = container.querySelectorAll('.jasmine-tab');
let specListLink = () => tabs[0].querySelector('a');
let failuresLink = () => tabs[1].querySelector('a');
const reporterNode = container.querySelector(
'.jasmine_html-reporter'
);
expect(specListLink().textContent).toEqual('Spec List');
expect(failuresLink())
.withContext('failures link')
.toBeFalsy();
specListLink().click();
expect(reporterNode).toHaveClass('jasmine-spec-list');
expect(reporterNode).not.toHaveClass('jasmine-failure-list');
expect(specListLink())
.withContext('spec list link')
.toBeFalsy();
expect(failuresLink().textContent).toEqual('Failures');
failuresLink().click();
expect(reporterNode.getAttribute('class')).toMatch(
'jasmine-failure-list'
);
expect(failuresLink())
.withContext('failures link')
.toBeFalsy();
expect(specListLink().textContent).toEqual('Spec List');
expect(reporterNode).toHaveClass('jasmine-failure-list');
expect(reporterNode).not.toHaveClass('jasmine-spec-list');
});
}
function hasSpecAndSuiteSuccessBehavior(reportEvents) {
let reporter;
beforeEach(function() {
reporter = setup();
reporter.initialize();
reportEvents(reporter);
});
it('does not show any tabs', function() {
const tabs = container.querySelectorAll('.jasmine-tab');
checkHidden(tabs, [true, true]);
});
it('shows the spec list view', function() {
const reporterNode = container.querySelector(
'.jasmine_html-reporter'
);
expect(reporterNode).toHaveClass('jasmine-spec-list');
expect(reporterNode).not.toHaveClass('jasmine-failure-list');
});
}
describe('with spec failures', function() {
hasSpecOrSuiteFailureBehavior(function(reporter) {
reporter.jasmineStarted({ totalSpecsDefined: 0 });
reporter.specDone({
id: 1,
description: 'a failing spec',
fullName: 'a failing spec',
status: 'failed',
failedExpectations: [{}],
passedExpectations: []
});
reporter.specDone({
id: 2,
description: 'a passing spec',
fullName: 'a passing spec',
status: 'passed',
failedExpectations: [],
passedExpectations: []
});
reporter.jasmineDone({});
});
});
describe('with suite failures', function() {
hasSpecOrSuiteFailureBehavior(function(reporter) {
reporter.jasmineStarted({ totalSpecsDefined: 0 });
reporter.specDone({
id: 1,
description: 'a failing spec',
fullName: 'a failing spec',
status: 'failed',
failedExpectations: [{}],
passedExpectations: []
});
reporter.specDone({
id: 2,
description: 'a passing spec',
fullName: 'a passing spec',
status: 'passed',
failedExpectations: [],
passedExpectations: []
});
reporter.jasmineDone({});
});
});
describe('without any failures', function() {
hasSpecAndSuiteSuccessBehavior(function(reporter) {
reporter.jasmineStarted({ totalSpecsDefined: 0 });
reporter.specDone({
id: 1,
description: 'a passing spec',
fullName: 'a passing spec',
status: 'passed',
failedExpectations: [],
passedExpectations: []
});
reporter.suiteDone({ id: 1 });
reporter.jasmineDone({});
});
});
describe('with only top suite failures', function() {
// Top suite failures are displayed in their own alert bars, so they
// don't cause the failures tab to be shown.
hasSpecAndSuiteSuccessBehavior(function(reporter) {
reporter.jasmineStarted({ totalSpecsDefined: 0 });
reporter.jasmineDone({
failedExpectations: [{}]
});
});
});
});
});
describe('when Jasmine is done', function() {
it('adds a warning to the link title of specs that have no expectations', function() {
const reporter = setup();
@@ -449,21 +636,18 @@ describe('HtmlReporterV2', function() {
]
});
const alertBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar'
const errorBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar.jasmine-errored'
);
expect(alertBars.length).toEqual(3);
expect(alertBars[1].getAttribute('class')).toEqual(
'jasmine-bar jasmine-errored'
);
expect(alertBars[1].innerHTML).toMatch(
expect(errorBars.length).toEqual(2);
expect(errorBars[0].innerHTML).toMatch(
/AfterAll Global After All Failure/
);
expect(alertBars[2].innerHTML).toMatch(
expect(errorBars[1].innerHTML).toMatch(
/Error during loading: Your JS is borken/
);
expect(alertBars[2].innerHTML).not.toMatch(/line/);
expect(errorBars[1].innerHTML).not.toMatch(/line/);
});
it('does not display the "AfterAll" prefix for other error types', function() {
@@ -482,16 +666,16 @@ describe('HtmlReporterV2', function() {
]
});
const alertBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar'
const errorBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar.jasmine-errored'
);
expect(alertBars.length).toEqual(4);
expect(alertBars[1].textContent).toContain('load error');
expect(alertBars[2].textContent).toContain('lateExpectation error');
expect(alertBars[3].textContent).toContain('lateError error');
expect(errorBars.length).toEqual(3);
expect(errorBars[0].textContent).toContain('load error');
expect(errorBars[1].textContent).toContain('lateExpectation error');
expect(errorBars[2].textContent).toContain('lateError error');
for (let bar of alertBars) {
for (let bar of errorBars) {
expect(bar.textContent).not.toContain('AfterAll');
}
});
@@ -512,12 +696,12 @@ describe('HtmlReporterV2', function() {
]
});
const alertBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar'
const alertBar = container.querySelector(
'.jasmine-alert .jasmine-bar.jasmine-errored'
);
expect(alertBars.length).toEqual(2);
expect(alertBars[1].innerHTML).toMatch(
expect(alertBar).toBeTruthy();
expect(alertBar.innerHTML).toMatch(
/Error during loading: Your JS is borken in some\/file.js line 42/
);
});
@@ -758,12 +942,12 @@ describe('HtmlReporterV2', function() {
});
it('reports the specs counts', function() {
const alertBars = container.querySelectorAll(
'.jasmine-alert .jasmine-bar'
const resultBar = container.querySelector(
'.jasmine-alert .jasmine-bar.jasmine-overall-result'
);
expect(alertBars.length).toEqual(1);
expect(alertBars[0].innerHTML).toMatch(/2 specs, 0 failures/);
expect(resultBar).toBeTruthy();
expect(resultBar.innerHTML).toMatch(/2 specs, 0 failures/);
});
it('reports no failure details', function() {
@@ -1072,23 +1256,6 @@ describe('HtmlReporterV2', function() {
)}`
);
});
it('allows switching between failure details and the spec summary', function() {
const menuBar = container.querySelectorAll('.jasmine-bar')[1];
expect(menuBar.getAttribute('class')).not.toMatch(/hidden/);
const link = menuBar.querySelector('a');
expect(link.innerHTML).toEqual('Failures');
expect(link.getAttribute('href')).toEqual('#');
});
it("sets the reporter to 'Failures List' mode", function() {
const reporterNode = container.querySelector('.jasmine_html-reporter');
expect(reporterNode.getAttribute('class')).toMatch(
'jasmine-failure-list'
);
});
});
it('counts failures that are reported in the jasmineDone event', function() {

97
spec/html/TabBarSpec.js Normal file
View File

@@ -0,0 +1,97 @@
describe('TabBar', function() {
it('initially renders but hides the tabs', function() {
const subject = new privateUnderTest.TabBar([
{ id: 'tab1', label: 'tab 1' }
]);
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
expect(tabs.length).toEqual(1);
expect(tabs[0].id).toEqual('tab1');
expect(tabs[0]).toHaveClass('jasmine-hidden');
const link = tabs[0].querySelector('a');
expect(link).toBeTruthy();
expect(link.textContent).toEqual('tab 1');
});
it('does not initially call the onSelect callback', function() {
const onSelect = jasmine.createSpy('onSelect');
new privateUnderTest.TabBar([{ id: 'tab1', label: '' }], onSelect);
expect(onSelect).not.toHaveBeenCalled();
});
describe('#showTab', function() {
it('shows the specified tab', function() {
const subject = new privateUnderTest.TabBar([
{ id: 'tab1' },
{ id: 'tab2' }
]);
subject.showTab('tab2');
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
expect(tabs[0]).toHaveClass('jasmine-hidden');
expect(tabs[1]).not.toHaveClass('jasmine-hidden');
});
it('does not hide previously shown tabs', function() {
const subject = new privateUnderTest.TabBar([
{ id: 'tab1' },
{ id: 'tab2' }
]);
subject.showTab('tab1');
subject.showTab('tab2');
const tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
expect(tabs[0]).not.toHaveClass('jasmine-hidden');
});
});
describe("When a tab's link is clicked", function() {
it("calls the onSelect callback with the tab's id", function() {
const onSelect = jasmine.createSpy('onSelect');
const subject = new privateUnderTest.TabBar(
[{ id: 'tab1', label: '' }],
onSelect
);
subject.rootEl.querySelector('.jasmine-tab a').click();
expect(onSelect).toHaveBeenCalledWith('tab1');
});
it('shows links on all non-selected tabs only', function() {
const subject = new privateUnderTest.TabBar(
[
{ id: 'tab1', label: 'tab 1' },
{ id: 'tab2', label: 'tab 2' },
{ id: 'tab3', label: 'tab 3' }
],
() => {}
);
subject.rootEl.querySelectorAll('.jasmine-tab a')[1].click();
let tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
expect(tabs[0].querySelector('a'))
.withContext('tab 1')
.toBeTruthy();
expect(tabs[1].querySelector('a'))
.withContext('tab 1')
.toBeFalsy();
expect(tabs[2].querySelector('a'))
.withContext('tab 1')
.toBeTruthy();
subject.rootEl.querySelectorAll('.jasmine-tab a')[0].click();
tabs = subject.rootEl.querySelectorAll('.jasmine-tab');
expect(tabs[0].querySelector('a'))
.withContext('tab 1')
.toBeFalsy();
expect(tabs[1].querySelector('a'))
.withContext('tab 1')
.toBeTruthy();
expect(tabs[2].querySelector('a'))
.withContext('tab 1')
.toBeTruthy();
});
});
});

23
src/html/AlertsView.js
View File

@@ -24,6 +24,7 @@ jasmineRequire.AlertsView = function(j$) {
);
}
// TODO: remove this once HtmlReporterV2 doesn't use it
addFailureToggle(onClickFailures, onClickSpecList) {
const failuresLink = createDom(
'a',
@@ -46,14 +47,20 @@ jasmineRequire.AlertsView = function(j$) {
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 ')
]);
this.rootEl.appendChild(
createDom(
'span',
{ className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
[createDom('span', {}, 'Spec List | '), failuresLink]
)
);
this.rootEl.appendChild(
createDom(
'span',
{ className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
[specListLink, createDom('span', {}, ' | Failures ')]
)
);
}
addGlobalFailure(failure) {

46
src/html/HtmlReporter.js
View File

@@ -142,16 +142,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

33
src/html/HtmlReporterV2.js
View File

@@ -3,6 +3,9 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
const { createDom, noExpectations } = j$.private.htmlReporterUtils;
const specListTabId = 'jasmine-specListTab';
const failuresTabId = 'jasmine-failuresTab';
/**
* @class HtmlReporterV2
* @classdesc Displays results and allows re-running individual specs and suites.
@@ -31,6 +34,7 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
// Sub-views
#alerts;
#statusBar;
#tabBar;
#progress;
#banner;
#failures;
@@ -68,6 +72,22 @@ 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' }
],
tabId => {
if (tabId === specListTabId) {
this.#setMenuModeTo('jasmine-spec-list');
} else {
this.#setMenuModeTo('jasmine-failure-list');
}
}
);
this.#alerts.addBar(this.#tabBar.rootEl);
this.#progress = new ProgressView();
this.#banner = new j$.private.Banner(
this.#queryString.navigateWithNewParam.bind(this.#queryString),
@@ -160,13 +180,11 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
results.appendChild(summary.rootEl);
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(specListTabId);
this.#tabBar.showTab(failuresTabId);
this.#tabBar.selectTab(failuresTabId);
} else {
this.#tabBar.selectTab(specListTabId);
}
}
@@ -205,7 +223,6 @@ jasmineRequire.HtmlReporterV2 = function(j$) {
this.rootEl.value = this.rootEl.value + 1;
if (result.status === 'failed') {
// TODO: also a non-color indicator
this.rootEl.classList.add('failed');
}
}

77
src/html/TabBar.js Normal file
View File

@@ -0,0 +1,77 @@
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;
};

8
src/html/_HTMLReporter.scss
View File

@@ -464,3 +464,11 @@ body {
}
}
}
.jasmine-hidden {
display: none;
}
.jasmine-tab + .jasmine-tab:before {
content: ' | ';
}

1
src/html/requireHtml.js
View File

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