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

Make the HtmlReport CSS classes "unique enough"

Browse Source 
As described in Issue Report 844...
https://github.com/jasmine/jasmine/issues/844

...style rules in the app-being-tested may incidentally affect elements
in the Jasmine HTML Report container, as long as there is a chance that
the app-being-tested has CSS style rules for classes (or IDs) that
Jasmine uses.

This fix attempts to bring Jasmine to a state where each and every class
it uses always ends with "_jasmine-css" which should be unique enough to
ensure that CSS in the app-being-tested won't affect the Jasmine report,
because no app-being-tested is ever likely to use classes that end with
"_jasmine-css"

I'll be surpised if this commit is good enough as it is now, on the
first attempt to fix #844, because of reasons I'll explain in either
the Issue or the Pull Request.
This commit is contained in:
Matt Prather
2015-05-13 18:55:44 -07:00
parent 0b1449228f
commit c41fa7d156
3 changed files with 163 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
spec/html/HtmlReporterSpec.js
View File

@@ -14,20 +14,20 @@ describe("New HtmlReporter", function() {
// Main top-level elements // Main top-level elements
expect(container.querySelector("div.jasmine_html-reporter")).toBeTruthy(); expect(container.querySelector("div.jasmine_html-reporter")).toBeTruthy();
expect(container.querySelector("div.banner")).toBeTruthy(); expect(container.querySelector("div.banner_jasmine-css")).toBeTruthy();
expect(container.querySelector("div.alert")).toBeTruthy(); expect(container.querySelector("div.alert_jasmine-css")).toBeTruthy();
expect(container.querySelector("div.results")).toBeTruthy(); expect(container.querySelector("div.results_jasmine-css")).toBeTruthy();
expect(container.querySelector("ul.symbol-summary")).toBeTruthy(); expect(container.querySelector("ul.symbol-summary_jasmine-css")).toBeTruthy();
// title banner // title banner
var banner = container.querySelector(".banner"); var banner = container.querySelector(".banner_jasmine-css");
var title = banner.querySelector("a.title"); var title = banner.querySelector("a.title_jasmine-css");
expect(title.getAttribute('href')).toEqual('http://jasmine.github.io/'); expect(title.getAttribute('href')).toEqual('http://jasmine.github.io/');
expect(title.getAttribute('target')).toEqual('_blank'); expect(title.getAttribute('target')).toEqual('_blank');
var version = banner.querySelector(".version"), var version = banner.querySelector(".version_jasmine-css"),
versionText = 'textContent' in version ? version.textContent : version.innerText; versionText = 'textContent' in version ? version.textContent : version.innerText;
expect(versionText).toEqual(j$.version); expect(versionText).toEqual(j$.version);
}); });
@@ -90,8 +90,8 @@ describe("New HtmlReporter", function() {
failedExpectations: [] failedExpectations: []
}); });
expect(console.error).toHaveBeenCalledWith("Spec \'Some Name\' has no expectations."); expect(console.error).toHaveBeenCalledWith("Spec \'Some Name\' has no expectations.");
var specEl = container.querySelector('.symbol-summary li'); var specEl = container.querySelector('.symbol-summary_jasmine-css li');
expect(specEl.getAttribute("class")).toEqual("empty"); expect(specEl.getAttribute("class")).toEqual("empty_jasmine-css");
}); });
it("reports the status symbol of a disabled spec", function() { it("reports the status symbol of a disabled spec", function() {
@@ -108,8 +108,8 @@ describe("New HtmlReporter", function() {
reporter.specDone({id: 789, status: "disabled", fullName: "symbols should have titles", passedExpectations: [], failedExpectations: []}); reporter.specDone({id: 789, status: "disabled", fullName: "symbols should have titles", passedExpectations: [], failedExpectations: []});
var specEl = container.querySelector('.symbol-summary li'); var specEl = container.querySelector('.symbol-summary_jasmine-css li');
expect(specEl.getAttribute("class")).toEqual("disabled"); expect(specEl.getAttribute("class")).toEqual("disabled_jasmine-css");
expect(specEl.getAttribute("id")).toEqual("spec_789"); expect(specEl.getAttribute("id")).toEqual("spec_789");
expect(specEl.getAttribute("title")).toEqual("symbols should have titles"); expect(specEl.getAttribute("title")).toEqual("symbols should have titles");
}); });
@@ -128,8 +128,8 @@ describe("New HtmlReporter", function() {
reporter.specDone({id: 789, status: "pending", passedExpectations: [], failedExpectations: []}); reporter.specDone({id: 789, status: "pending", passedExpectations: [], failedExpectations: []});
var specEl = container.querySelector('.symbol-summary li'); var specEl = container.querySelector('.symbol-summary_jasmine-css li');
expect(specEl.getAttribute("class")).toEqual("pending"); expect(specEl.getAttribute("class")).toEqual("pending_jasmine-css");
expect(specEl.getAttribute("id")).toEqual("spec_789"); expect(specEl.getAttribute("id")).toEqual("spec_789");
}); });
@@ -147,9 +147,9 @@ describe("New HtmlReporter", function() {
reporter.specDone({id: 123, status: "passed", passedExpectations: [{passed: true}], failedExpectations: []}); reporter.specDone({id: 123, status: "passed", passedExpectations: [{passed: true}], failedExpectations: []});
var statuses = container.querySelector(".symbol-summary"); var statuses = container.querySelector(".symbol-summary_jasmine-css");
var specEl = statuses.querySelector("li"); var specEl = statuses.querySelector("li");
expect(specEl.getAttribute("class")).toEqual("passed"); expect(specEl.getAttribute("class")).toEqual("passed_jasmine-css");
expect(specEl.getAttribute("id")).toEqual("spec_123"); expect(specEl.getAttribute("id")).toEqual("spec_123");
}); });
@@ -173,8 +173,8 @@ describe("New HtmlReporter", function() {
passedExpectations: [] passedExpectations: []
}); });
var specEl = container.querySelector(".symbol-summary li"); var specEl = container.querySelector(".symbol-summary_jasmine-css li");
expect(specEl.getAttribute("class")).toEqual("failed"); expect(specEl.getAttribute("class")).toEqual("failed_jasmine-css");
expect(specEl.getAttribute("id")).toEqual("spec_345"); expect(specEl.getAttribute("id")).toEqual("spec_345");
}); });
}); });
@@ -198,11 +198,11 @@ describe("New HtmlReporter", function() {
reporter.suiteDone({ status: 'failed', failedExpectations: [{ message: 'My Other Exception' }] }); reporter.suiteDone({ status: 'failed', failedExpectations: [{ message: 'My Other Exception' }] });
reporter.jasmineDone({}); reporter.jasmineDone({});
var alertBars = container.querySelectorAll(".alert .bar"); var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css");
expect(alertBars.length).toEqual(3); expect(alertBars.length).toEqual(3);
expect(alertBars[1].innerHTML).toMatch(/My After All Exception/); expect(alertBars[1].innerHTML).toMatch(/My After All Exception/);
expect(alertBars[1].getAttribute("class")).toEqual('bar errored'); expect(alertBars[1].getAttribute("class")).toEqual('bar_jasmine-css errored_jasmine-css');
expect(alertBars[2].innerHTML).toMatch(/My Other Exception/); expect(alertBars[2].innerHTML).toMatch(/My Other Exception/);
}); });
}); });
@@ -238,7 +238,7 @@ describe("New HtmlReporter", function() {
reporter.suiteDone({id: 1}); reporter.suiteDone({id: 1});
reporter.jasmineDone({}); reporter.jasmineDone({});
var summary = container.querySelector('.summary'); var summary = container.querySelector('.summary_jasmine-css');
var suite = summary.childNodes[0]; var suite = summary.childNodes[0];
var specs = suite.childNodes[1]; var specs = suite.childNodes[1];
var spec = specs.childNodes[0]; var spec = specs.childNodes[0];
@@ -266,7 +266,7 @@ describe("New HtmlReporter", function() {
timer.elapsed.and.returnValue(100); timer.elapsed.and.returnValue(100);
reporter.jasmineDone(); reporter.jasmineDone();
var duration = container.querySelector(".alert .duration"); var duration = container.querySelector(".alert_jasmine-css .duration_jasmine-css");
expect(duration.innerHTML).toMatch(/finished in 0.1s/); expect(duration.innerHTML).toMatch(/finished in 0.1s/);
}); });
@@ -334,7 +334,7 @@ describe("New HtmlReporter", function() {
reporter.suiteDone({id: 1}); reporter.suiteDone({id: 1});
reporter.jasmineDone({}); reporter.jasmineDone({});
var summary = container.querySelector(".summary"); var summary = container.querySelector(".summary_jasmine-css");
expect(summary.childNodes.length).toEqual(1); expect(summary.childNodes.length).toEqual(1);
@@ -346,7 +346,7 @@ describe("New HtmlReporter", function() {
var node = outerSuite.childNodes[i]; var node = outerSuite.childNodes[i];
classes.push(node.getAttribute("class")); classes.push(node.getAttribute("class"));
} }
expect(classes).toEqual(["suite-detail", "specs", "suite", "specs"]); expect(classes).toEqual(["suite-detail_jasmine-css", "specs_jasmine-css", "suite_jasmine-css", "specs_jasmine-css"]);
var suiteDetail = outerSuite.childNodes[0]; var suiteDetail = outerSuite.childNodes[0];
var suiteLink = suiteDetail.childNodes[0]; var suiteLink = suiteDetail.childNodes[0];
@@ -355,7 +355,7 @@ describe("New HtmlReporter", function() {
var specs = outerSuite.childNodes[1]; var specs = outerSuite.childNodes[1];
var spec = specs.childNodes[0]; var spec = specs.childNodes[0];
expect(spec.getAttribute("class")).toEqual("passed"); expect(spec.getAttribute("class")).toEqual("passed_jasmine-css");
expect(spec.getAttribute("id")).toEqual("spec-123"); expect(spec.getAttribute("id")).toEqual("spec-123");
var specLink = spec.childNodes[0]; var specLink = spec.childNodes[0];
@@ -384,18 +384,18 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var trigger = container.querySelector('.run-options .trigger'), var trigger = container.querySelector('.run-options_jasmine-css .trigger_jasmine-css'),
payload = container.querySelector('.run-options .payload'); payload = container.querySelector('.run-options_jasmine-css .payload_jasmine-css');
expect(payload.className).not.toContain('open'); expect(payload.className).not.toContain('open_jasmine-css');
trigger.onclick(); trigger.onclick();
expect(payload.className).toContain('open'); expect(payload.className).toContain('open_jasmine-css');
trigger.onclick(); trigger.onclick();
expect(payload.className).not.toContain('open'); expect(payload.className).not.toContain('open_jasmine-css');
}); });
describe("UI for raising/catching exceptions", function() { describe("UI for raising/catching exceptions", function() {
@@ -419,7 +419,7 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var raisingExceptionsUI = container.querySelector(".raise"); var raisingExceptionsUI = container.querySelector(".raise_jasmine-css");
expect(raisingExceptionsUI.checked).toBe(false); expect(raisingExceptionsUI.checked).toBe(false);
}); });
@@ -444,7 +444,7 @@ describe("New HtmlReporter", function() {
env.catchExceptions(false); env.catchExceptions(false);
reporter.jasmineDone({}); reporter.jasmineDone({});
var raisingExceptionsUI = container.querySelector(".raise"); var raisingExceptionsUI = container.querySelector(".raise_jasmine-css");
expect(raisingExceptionsUI.checked).toBe(true); expect(raisingExceptionsUI.checked).toBe(true);
}); });
@@ -470,7 +470,7 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var input = container.querySelector(".raise"); var input = container.querySelector(".raise_jasmine-css");
input.click(); input.click();
expect(exceptionsClickHandler).toHaveBeenCalled(); expect(exceptionsClickHandler).toHaveBeenCalled();
}); });
@@ -497,7 +497,7 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var throwingExpectationsUI = container.querySelector(".throw"); var throwingExpectationsUI = container.querySelector(".throw_jasmine-css");
expect(throwingExpectationsUI.checked).toBe(false); expect(throwingExpectationsUI.checked).toBe(false);
}); });
@@ -523,7 +523,7 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var throwingExpectationsUI = container.querySelector(".throw"); var throwingExpectationsUI = container.querySelector(".throw_jasmine-css");
expect(throwingExpectationsUI.checked).toBe(true); expect(throwingExpectationsUI.checked).toBe(true);
}); });
@@ -549,7 +549,7 @@ describe("New HtmlReporter", function() {
reporter.initialize(); reporter.initialize();
reporter.jasmineDone({}); reporter.jasmineDone({});
var throwingExpectationsUI = container.querySelector(".throw"); var throwingExpectationsUI = container.querySelector(".throw_jasmine-css");
throwingExpectationsUI.click(); throwingExpectationsUI.click();
expect(throwingExceptionHandler).toHaveBeenCalled(); expect(throwingExceptionHandler).toHaveBeenCalled();
@@ -572,8 +572,8 @@ describe("New HtmlReporter", function() {
reporter.jasmineStarted({}); reporter.jasmineStarted({});
reporter.jasmineDone({}); reporter.jasmineDone({});
var alertBars = container.querySelectorAll(".alert .bar"); var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css");
expect(alertBars[0].getAttribute('class')).toMatch(/skipped/); expect(alertBars[0].getAttribute('class')).toMatch(/skipped_jasmine-css/);
expect(alertBars[0].innerHTML).toMatch(/No specs found/); expect(alertBars[0].innerHTML).toMatch(/No specs found/);
}); });
@@ -612,21 +612,21 @@ describe("New HtmlReporter", function() {
}); });
it("reports the specs counts", function() { it("reports the specs counts", function() {
var alertBars = container.querySelectorAll(".alert .bar"); var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css");
expect(alertBars.length).toEqual(1); expect(alertBars.length).toEqual(1);
expect(alertBars[0].getAttribute('class')).toMatch(/passed/); expect(alertBars[0].getAttribute('class')).toMatch(/passed_jasmine-css/);
expect(alertBars[0].innerHTML).toMatch(/2 specs, 0 failures/); expect(alertBars[0].innerHTML).toMatch(/2 specs, 0 failures/);
}); });
it("reports no failure details", function() { it("reports no failure details", function() {
var specFailure = container.querySelector(".failures"); var specFailure = container.querySelector(".failures_jasmine-css");
expect(specFailure.childNodes.length).toEqual(0); expect(specFailure.childNodes.length).toEqual(0);
}); });
it("reports no pending specs", function() { it("reports no pending specs", function() {
var alertBar = container.querySelector(".alert .bar"); var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css");
expect(alertBar.innerHTML).not.toMatch(/pending spec[s]/); expect(alertBar.innerHTML).not.toMatch(/pending spec[s]/);
}); });
@@ -662,19 +662,19 @@ describe("New HtmlReporter", function() {
}); });
it("reports the pending specs count", function() { it("reports the pending specs count", function() {
var alertBar = container.querySelector(".alert .bar"); var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css");
expect(alertBar.innerHTML).toMatch(/1 spec, 0 failures, 1 pending spec/); expect(alertBar.innerHTML).toMatch(/1 spec, 0 failures, 1 pending spec/);
}); });
it("reports no failure details", function() { it("reports no failure details", function() {
var specFailure = container.querySelector(".failures"); var specFailure = container.querySelector(".failures_jasmine-css");
expect(specFailure.childNodes.length).toEqual(0); expect(specFailure.childNodes.length).toEqual(0);
}); });
it("displays the custom pending reason", function() { it("displays the custom pending reason", function() {
var pendingDetails = container.querySelector(".summary .pending"); var pendingDetails = container.querySelector(".summary_jasmine-css .pending_jasmine-css");
expect(pendingDetails.innerHTML).toContain("my custom pending reason"); expect(pendingDetails.innerHTML).toContain("my custom pending reason");
}); });
@@ -721,37 +721,37 @@ describe("New HtmlReporter", function() {
}); });
it("reports the specs counts", function() { it("reports the specs counts", function() {
var alertBar = container.querySelector(".alert .bar"); var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css");
expect(alertBar.getAttribute('class')).toMatch(/failed/); expect(alertBar.getAttribute('class')).toMatch(/failed_jasmine-css/);
expect(alertBar.innerHTML).toMatch(/2 specs, 1 failure/); expect(alertBar.innerHTML).toMatch(/2 specs, 1 failure/);
}); });
it("reports failure messages and stack traces", function() { it("reports failure messages and stack traces", function() {
var specFailures = container.querySelector(".failures"); var specFailures = container.querySelector(".failures_jasmine-css");
var failure = specFailures.childNodes[0]; var failure = specFailures.childNodes[0];
expect(failure.getAttribute("class")).toMatch(/failed/); expect(failure.getAttribute("class")).toMatch(/failed_jasmine-css/);
expect(failure.getAttribute("class")).toMatch(/spec-detail/); expect(failure.getAttribute("class")).toMatch(/spec-detail_jasmine-css/);
var specDiv = failure.childNodes[0]; var specDiv = failure.childNodes[0];
expect(specDiv.getAttribute("class")).toEqual("description"); expect(specDiv.getAttribute("class")).toEqual("description_jasmine-css");
var specLink = specDiv.childNodes[0]; var specLink = specDiv.childNodes[0];
expect(specLink.getAttribute("title")).toEqual("a suite with a failing spec"); expect(specLink.getAttribute("title")).toEqual("a suite with a failing spec");
expect(specLink.getAttribute("href")).toEqual("?foo=bar&spec=a suite with a failing spec"); expect(specLink.getAttribute("href")).toEqual("?foo=bar&spec=a suite with a failing spec");
var message = failure.childNodes[1].childNodes[0]; var message = failure.childNodes[1].childNodes[0];
expect(message.getAttribute("class")).toEqual("result-message"); expect(message.getAttribute("class")).toEqual("result-message_jasmine-css");
expect(message.innerHTML).toEqual("a failure message"); expect(message.innerHTML).toEqual("a failure message");
var stackTrace = failure.childNodes[1].childNodes[1]; var stackTrace = failure.childNodes[1].childNodes[1];
expect(stackTrace.getAttribute("class")).toEqual("stack-trace"); expect(stackTrace.getAttribute("class")).toEqual("stack-trace_jasmine-css");
expect(stackTrace.innerHTML).toEqual("a stack trace"); expect(stackTrace.innerHTML).toEqual("a stack trace");
}); });
it("allows switching between failure details and the spec summary", function() { it("allows switching between failure details and the spec summary", function() {
var menuBar = container.querySelectorAll(".bar")[1]; var menuBar = container.querySelectorAll(".bar_jasmine-css")[1];
expect(menuBar.getAttribute("class")).not.toMatch(/hidden/); expect(menuBar.getAttribute("class")).not.toMatch(/hidden/);
@@ -762,7 +762,7 @@ describe("New HtmlReporter", function() {
it("sets the reporter to 'Failures List' mode", function() { it("sets the reporter to 'Failures List' mode", function() {
var reporterNode = container.querySelector(".jasmine_html-reporter"); var reporterNode = container.querySelector(".jasmine_html-reporter");
expect(reporterNode.getAttribute("class")).toMatch("failure-list"); expect(reporterNode.getAttribute("class")).toMatch("failure-list_jasmine-css");
}); });
}); });
}); });

114
src/html/HtmlReporter.js
View File

@@ -25,19 +25,19 @@ jasmineRequire.HtmlReporter = function(j$) {
this.initialize = function() { this.initialize = function() {
clearPrior(); clearPrior();
htmlReporterMain = createDom('div', {className: 'jasmine_html-reporter'}, htmlReporterMain = createDom('div', {className: 'jasmine_html-reporter'},
createDom('div', {className: 'banner'}, createDom('div', {className: 'banner_jasmine-css'},
createDom('a', {className: 'title', href: 'http://jasmine.github.io/', target: '_blank'}), createDom('a', {className: 'title_jasmine-css', href: 'http://jasmine.github.io/', target: '_blank'}),
createDom('span', {className: 'version'}, j$.version) createDom('span', {className: 'version_jasmine-css'}, j$.version)
), ),
createDom('ul', {className: 'symbol-summary'}), createDom('ul', {className: 'symbol-summary_jasmine-css'}),
createDom('div', {className: 'alert'}), createDom('div', {className: 'alert_jasmine-css'}),
createDom('div', {className: 'results'}, createDom('div', {className: 'results_jasmine-css'},
createDom('div', {className: 'failures'}) createDom('div', {className: 'failures_jasmine-css'})
) )
); );
getContainer().appendChild(htmlReporterMain); getContainer().appendChild(htmlReporterMain);
symbols = find('.symbol-summary'); symbols = find('.symbol-summary_jasmine-css');
}; };
var totalSpecsDefined; var totalSpecsDefined;
@@ -46,7 +46,7 @@ jasmineRequire.HtmlReporter = function(j$) {
timer.start(); timer.start();
}; };
var summary = createDom('div', {className: 'summary'}); var summary = createDom('div', {className: 'summary_jasmine-css'});
var topResults = new j$.ResultsNode({}, '', null), var topResults = new j$.ResultsNode({}, '', null),
currentParent = topResults; currentParent = topResults;
@@ -83,7 +83,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
symbols.appendChild(createDom('li', { symbols.appendChild(createDom('li', {
className: noExpectations(result) ? 'empty' : result.status, className: noExpectations(result) ? 'empty_jasmine-css' : result.status + '_jasmine-css',
id: 'spec_' + result.id, id: 'spec_' + result.id,
title: result.fullName title: result.fullName
} }
@@ -93,18 +93,18 @@ jasmineRequire.HtmlReporter = function(j$) {
failureCount++; failureCount++;
var failure = var failure =
createDom('div', {className: 'spec-detail failed'}, createDom('div', {className: 'spec-detail_jasmine-css failed_jasmine-css'},
createDom('div', {className: 'description'}, createDom('div', {className: 'description_jasmine-css'},
createDom('a', {title: result.fullName, href: specHref(result)}, result.fullName) createDom('a', {title: result.fullName, href: specHref(result)}, result.fullName)
), ),
createDom('div', {className: 'messages'}) createDom('div', {className: 'messages_jasmine-css'})
); );
var messages = failure.childNodes[1]; var messages = failure.childNodes[1];
for (var i = 0; i < result.failedExpectations.length; i++) { for (var i = 0; i < result.failedExpectations.length; i++) {
var expectation = result.failedExpectations[i]; var expectation = result.failedExpectations[i];
messages.appendChild(createDom('div', {className: 'result-message'}, expectation.message)); messages.appendChild(createDom('div', {className: 'result-message_jasmine-css'}, expectation.message));
messages.appendChild(createDom('div', {className: 'stack-trace'}, expectation.stack)); messages.appendChild(createDom('div', {className: 'stack-trace_jasmine-css'}, expectation.stack));
} }
failures.push(failure); failures.push(failure);
@@ -116,70 +116,70 @@ jasmineRequire.HtmlReporter = function(j$) {
}; };
this.jasmineDone = function() { this.jasmineDone = function() {
var banner = find('.banner'); var banner = find('.banner_jasmine-css');
var alert = find('.alert'); var alert = find('.alert_jasmine-css');
alert.appendChild(createDom('span', {className: 'duration'}, 'finished in ' + timer.elapsed() / 1000 + 's')); alert.appendChild(createDom('span', {className: 'duration_jasmine-css'}, 'finished in ' + timer.elapsed() / 1000 + 's'));
banner.appendChild( banner.appendChild(
createDom('div', { className: 'run-options' }, createDom('div', { className: 'run-options_jasmine-css' },
createDom('span', { className: 'trigger' }, 'Options'), createDom('span', { className: 'trigger_jasmine-css' }, 'Options'),
createDom('div', { className: 'payload' }, createDom('div', { className: 'payload_jasmine-css' },
createDom('div', { className: 'exceptions' }, createDom('div', { className: 'exceptions_jasmine-css' },
createDom('input', { createDom('input', {
className: 'raise', className: 'raise_jasmine-css',
id: 'raise-exceptions', id: 'raise-exceptions_jasmine-css',
type: 'checkbox' type: 'checkbox'
}), }),
createDom('label', { className: 'label', 'for': 'raise-exceptions' }, 'raise exceptions')), createDom('label', { className: 'label_jasmine-css', 'for': 'raise-exceptions_jasmine-css' }, 'raise exceptions')),
createDom('div', { className: 'throw-failures' }, createDom('div', { className: 'throw-failures_jasmine-css' },
createDom('input', { createDom('input', {
className: 'throw', className: 'throw_jasmine-css',
id: 'throw-failures', id: 'throw-failures_jasmine-css',
type: 'checkbox' type: 'checkbox'
}), }),
createDom('label', { className: 'label', 'for': 'throw-failures' }, 'stop spec on expectation failure')) createDom('label', { className: 'label_jasmine-css', 'for': 'throw-failures_jasmine-css' }, 'stop spec on expectation failure'))
) )
)); ));
var raiseCheckbox = find('#raise-exceptions'); var raiseCheckbox = find('#raise-exceptions_jasmine-css');
raiseCheckbox.checked = !env.catchingExceptions(); raiseCheckbox.checked = !env.catchingExceptions();
raiseCheckbox.onclick = onRaiseExceptionsClick; raiseCheckbox.onclick = onRaiseExceptionsClick;
var throwCheckbox = find('#throw-failures'); var throwCheckbox = find('#throw-failures_jasmine-css');
throwCheckbox.checked = env.throwingExpectationFailures(); throwCheckbox.checked = env.throwingExpectationFailures();
throwCheckbox.onclick = onThrowExpectationsClick; throwCheckbox.onclick = onThrowExpectationsClick;
var optionsMenu = find('.run-options'), var optionsMenu = find('.run-options_jasmine-css'),
optionsTrigger = optionsMenu.querySelector('.trigger'), optionsTrigger = optionsMenu.querySelector('.trigger_jasmine-css'),
optionsPayload = optionsMenu.querySelector('.payload'), optionsPayload = optionsMenu.querySelector('.payload_jasmine-css'),
isOpen = /\bopen\b/; isOpen = /\bopen_jasmine-css\b/;
optionsTrigger.onclick = function() { optionsTrigger.onclick = function() {
if (isOpen.test(optionsPayload.className)) { if (isOpen.test(optionsPayload.className)) {
optionsPayload.className = optionsPayload.className.replace(isOpen, ''); optionsPayload.className = optionsPayload.className.replace(isOpen, '');
} else { } else {
optionsPayload.className += ' open'; optionsPayload.className += ' open_jasmine-css';
} }
}; };
if (specsExecuted < totalSpecsDefined) { if (specsExecuted < totalSpecsDefined) {
var skippedMessage = 'Ran ' + specsExecuted + ' of ' + totalSpecsDefined + ' specs - run all'; var skippedMessage = 'Ran ' + specsExecuted + ' of ' + totalSpecsDefined + ' specs - run all';
alert.appendChild( alert.appendChild(
createDom('span', {className: 'bar skipped'}, createDom('span', {className: 'bar_jasmine-css skipped_jasmine-css'},
createDom('a', {href: '?', title: 'Run all specs'}, skippedMessage) createDom('a', {href: '?', title: 'Run all specs'}, skippedMessage)
) )
); );
} }
var statusBarMessage = ''; var statusBarMessage = '';
var statusBarClassName = 'bar '; var statusBarClassName = 'bar_jasmine-css ';
if (totalSpecsDefined > 0) { if (totalSpecsDefined > 0) {
statusBarMessage += pluralize('spec', specsExecuted) + ', ' + pluralize('failure', failureCount); statusBarMessage += pluralize('spec', specsExecuted) + ', ' + pluralize('failure', failureCount);
if (pendingSpecCount) { statusBarMessage += ', ' + pluralize('pending spec', pendingSpecCount); } if (pendingSpecCount) { statusBarMessage += ', ' + pluralize('pending spec', pendingSpecCount); }
statusBarClassName += (failureCount > 0) ? 'failed' : 'passed'; statusBarClassName += (failureCount > 0) ? 'failed_jasmine-css' : 'passed_jasmine-css';
} else { } else {
statusBarClassName += 'skipped'; statusBarClassName += 'skipped_jasmine-css';
statusBarMessage += 'No specs found'; statusBarMessage += 'No specs found';
} }
@@ -189,12 +189,12 @@ jasmineRequire.HtmlReporter = function(j$) {
var failedSuite = failedSuites[i]; var failedSuite = failedSuites[i];
for(var j = 0; j < failedSuite.failedExpectations.length; j++) { for(var j = 0; j < failedSuite.failedExpectations.length; j++) {
var errorBarMessage = 'AfterAll ' + failedSuite.failedExpectations[j].message; var errorBarMessage = 'AfterAll ' + failedSuite.failedExpectations[j].message;
var errorBarClassName = 'bar errored'; var errorBarClassName = 'bar_jasmine-css errored_jasmine-css';
alert.appendChild(createDom('span', {className: errorBarClassName}, errorBarMessage)); alert.appendChild(createDom('span', {className: errorBarClassName}, errorBarMessage));
} }
} }
var results = find('.results'); var results = find('.results_jasmine-css');
results.appendChild(summary); results.appendChild(summary);
summaryList(topResults, summary); summaryList(topResults, summary);
@@ -204,8 +204,8 @@ jasmineRequire.HtmlReporter = function(j$) {
for (var i = 0; i < resultsTree.children.length; i++) { for (var i = 0; i < resultsTree.children.length; i++) {
var resultNode = resultsTree.children[i]; var resultNode = resultsTree.children[i];
if (resultNode.type == 'suite') { if (resultNode.type == 'suite') {
var suiteListNode = createDom('ul', {className: 'suite', id: 'suite-' + resultNode.result.id}, var suiteListNode = createDom('ul', {className: 'suite_jasmine-css', id: 'suite-' + resultNode.result.id},
createDom('li', {className: 'suite-detail'}, createDom('li', {className: 'suite-detail_jasmine-css'},
createDom('a', {href: specHref(resultNode.result)}, resultNode.result.description) createDom('a', {href: specHref(resultNode.result)}, resultNode.result.description)
) )
); );
@@ -214,8 +214,8 @@ jasmineRequire.HtmlReporter = function(j$) {
domParent.appendChild(suiteListNode); domParent.appendChild(suiteListNode);
} }
if (resultNode.type == 'spec') { if (resultNode.type == 'spec') {
if (domParent.getAttribute('class') != 'specs') { if (domParent.getAttribute('class') != 'specs_jasmine-css') {
specListNode = createDom('ul', {className: 'specs'}); specListNode = createDom('ul', {className: 'specs_jasmine-css'});
domParent.appendChild(specListNode); domParent.appendChild(specListNode);
} }
var specDescription = resultNode.result.description; var specDescription = resultNode.result.description;
@@ -227,7 +227,7 @@ jasmineRequire.HtmlReporter = function(j$) {
} }
specListNode.appendChild( specListNode.appendChild(
createDom('li', { createDom('li', {
className: resultNode.result.status, className: resultNode.result.status + '_jasmine-css',
id: 'spec-' + resultNode.result.id id: 'spec-' + resultNode.result.id
}, },
createDom('a', {href: specHref(resultNode.result)}, specDescription) createDom('a', {href: specHref(resultNode.result)}, specDescription)
@@ -239,24 +239,24 @@ jasmineRequire.HtmlReporter = function(j$) {
if (failures.length) { if (failures.length) {
alert.appendChild( alert.appendChild(
createDom('span', {className: 'menu bar spec-list'}, createDom('span', {className: 'menu_jasmine-css bar_jasmine-css spec-list_jasmine-css'},
createDom('span', {}, 'Spec List | '), createDom('span', {}, 'Spec List | '),
createDom('a', {className: 'failures-menu', href: '#'}, 'Failures'))); createDom('a', {className: 'failures-menu_jasmine-css', href: '#'}, 'Failures')));
alert.appendChild( alert.appendChild(
createDom('span', {className: 'menu bar failure-list'}, createDom('span', {className: 'menu_jasmine-css bar_jasmine-css failure-list_jasmine-css'},
createDom('a', {className: 'spec-list-menu', href: '#'}, 'Spec List'), createDom('a', {className: 'spec-list-menu_jasmine-css', href: '#'}, 'Spec List'),
createDom('span', {}, ' | Failures '))); createDom('span', {}, ' | Failures ')));
find('.failures-menu').onclick = function() { find('.failures-menu_jasmine-css').onclick = function() {
setMenuModeTo('failure-list'); setMenuModeTo('failure-list_jasmine-css');
}; };
find('.spec-list-menu').onclick = function() { find('.spec-list-menu_jasmine-css').onclick = function() {
setMenuModeTo('spec-list'); setMenuModeTo('spec-list_jasmine-css');
}; };
setMenuModeTo('failure-list'); setMenuModeTo('failure-list_jasmine-css');
var failureNode = find('.failures'); var failureNode = find('.failures_jasmine-css');
for (var i = 0; i < failures.length; i++) { for (var i = 0; i < failures.length; i++) {
failureNode.appendChild(failures[i]); failureNode.appendChild(failures[i]);
} }

104
src/html/_HTMLReporter.scss
View File

@@ -46,23 +46,23 @@ body {
line-height: $line-height; line-height: $line-height;
} }
.banner, .banner_jasmine-css,
.symbol-summary, .symbol-summary_jasmine-css,
.summary, .summary_jasmine-css,
.result-message, .result-message_jasmine-css,
.spec .description, .spec_jasmine-css .description_jasmine-css,
.spec-detail .description, .spec-detail_jasmine-css .description_jasmine-css,
.alert .bar, .alert_jasmine-css .bar_jasmine-css,
.stack-trace { .stack-trace_jasmine-css {
padding-left: $margin-unit - 5px; padding-left: $margin-unit - 5px;
padding-right: $margin-unit - 5px; padding-right: $margin-unit - 5px;
} }
.banner { .banner_jasmine-css {
position: relative; position: relative;
} }
.banner .title { .banner_jasmine-css .title_jasmine-css {
background: inline-image('jasmine-horizontal.png') no-repeat; background: inline-image('jasmine-horizontal.png') no-repeat;
background: inline-image('jasmine-horizontal.svg') no-repeat, none; background: inline-image('jasmine-horizontal.svg') no-repeat, none;
@include background-size(100%); @include background-size(100%);
@@ -72,7 +72,7 @@ body {
height: 25px; height: 25px;
} }
.banner .version { .banner_jasmine-css .version_jasmine-css {
margin-left: $margin-unit; margin-left: $margin-unit;
position: relative; position: relative;
top: 6px; top: 6px;
@@ -85,17 +85,17 @@ body {
right: 100%; right: 100%;
} }
.version { .version_jasmine-css {
color: $faint-text-color; color: $faint-text-color;
} }
//--- Banner ---// //--- Banner ---//
.banner { .banner_jasmine-css {
margin-top: $line-height; margin-top: $line-height;
} }
.duration { .duration_jasmine-css {
color: #fff; color: #fff;
float: right; float: right;
line-height: $line-height * 2; line-height: $line-height * 2;
@@ -104,7 +104,7 @@ body {
//--- Symbol summary ---// //--- Symbol summary ---//
.symbol-summary { .symbol-summary_jasmine-css {
@include clearfix; @include clearfix;
margin: $line-height 0; margin: $line-height 0;
@@ -115,7 +115,7 @@ body {
font-size: 16px; font-size: 16px;
&.passed { &.passed_jasmine-css {
font-size: 14px; font-size: 14px;
&:before { &:before {
@@ -124,7 +124,7 @@ body {
} }
} }
&.failed { &.failed_jasmine-css {
line-height: ($line-height / 2) + 2; line-height: ($line-height / 2) + 2;
&:before { &:before {
@@ -135,7 +135,7 @@ body {
} }
} }
&.disabled { &.disabled_jasmine-css {
font-size: 14px; font-size: 14px;
&:before { &:before {
@@ -144,7 +144,7 @@ body {
} }
} }
&.pending { &.pending_jasmine-css {
line-height: 17px; line-height: 17px;
&:before { &:before {
color: $pending-color; color: $pending-color;
@@ -152,7 +152,7 @@ body {
} }
} }
&.empty { &.empty_jasmine-css {
font-size: 14px; font-size: 14px;
&:before { &:before {
@@ -163,7 +163,7 @@ body {
} }
} }
.run-options { .run-options_jasmine-css {
float: right; float: right;
margin-right: 5px; margin-right: 5px;
border: 1px solid $jasmine-color; border: 1px solid $jasmine-color;
@@ -171,12 +171,12 @@ body {
position: relative; position: relative;
line-height: 20px; line-height: 20px;
.trigger { .trigger_jasmine-css {
cursor: pointer; cursor: pointer;
padding: 8px 16px; padding: 8px 16px;
} }
.payload { .payload_jasmine-css {
position: absolute; position: absolute;
display: none; display: none;
right: -1px; right: -1px;
@@ -185,7 +185,7 @@ body {
white-space: nowrap; white-space: nowrap;
padding: 4px 8px; padding: 4px 8px;
&.open { &.open_jasmine-css {
display: block; display: block;
} }
} }
@@ -193,30 +193,30 @@ body {
//--- Alerts: status bars ---// //--- Alerts: status bars ---//
.bar { .bar_jasmine-css {
line-height: $line-height * 2; line-height: $line-height * 2;
font-size: $large-font-size; font-size: $large-font-size;
display: block; display: block;
color: #eee; color: #eee;
&.failed { &.failed_jasmine-css {
background-color: $failing-color; background-color: $failing-color;
} }
&.passed { &.passed_jasmine-css {
background-color: $passing-color; background-color: $passing-color;
} }
&.skipped { &.skipped_jasmine-css {
background-color: $neutral-color; background-color: $neutral-color;
} }
&.errored { &.errored_jasmine-css {
background-color: $failing-color; background-color: $failing-color;
} }
&.menu { &.menu_jasmine-css {
background-color: #fff; background-color: #fff;
color: $faint-text-color; color: $faint-text-color;
@@ -231,29 +231,29 @@ body {
} }
// simplify toggle control between the two menu bars // simplify toggle control between the two menu bars
&.spec-list { &.spec-list_jasmine-css {
.bar.menu.failure-list, .bar_jasmine-css.menu_jasmine-css.failure-list_jasmine-css,
.results .failures { .results_jasmine-css .failures_jasmine-css {
display: none; display: none;
} }
} }
&.failure-list { &.failure-list_jasmine-css {
.bar.menu.spec-list, .bar_jasmine-css.menu_jasmine-css.spec-list_jasmine-css,
.summary { .summary_jasmine-css {
display: none; display: none;
} }
} }
//--- Results ---// //--- Results ---//
.results { .results_jasmine-css {
margin-top: $line-height; margin-top: $line-height;
} }
//--- Results summary: Suites and Specs names/links ---// //--- Results summary: Suites and Specs names/links ---//
.summary { .summary_jasmine-css {
margin-top: $margin-unit; margin-top: $margin-unit;
ul { ul {
@@ -262,40 +262,40 @@ body {
padding-top: 0; padding-top: 0;
padding-left: 0; padding-left: 0;
&.suite { &.suite_jasmine-css {
margin-top: $margin-unit/2; margin-top: $margin-unit/2;
margin-bottom: $margin-unit/2 margin-bottom: $margin-unit/2
} }
} }
li { li {
&.passed a { &.passed_jasmine-css a {
color: $passing-color; color: $passing-color;
} }
&.failed a { &.failed_jasmine-css a {
color: $failing-color; color: $failing-color;
} }
&.empty a { &.empty_jasmine-css a {
color: $pending-color; color: $pending-color;
} }
&.pending a { &.pending_jasmine-css a {
color: $pending-color; color: $pending-color;
} }
&.disabled a { &.disabled_jasmine-css a {
color: $neutral-color; color: $neutral-color;
} }
} }
} }
.description+.suite { .description_jasmine-css + .suite_jasmine-css {
margin-top: 0; margin-top: 0;
} }
.suite { .suite_jasmine-css {
margin-top: $margin-unit; margin-top: $margin-unit;
a { a {
@@ -305,11 +305,11 @@ body {
//--- Failure details ---// //--- Failure details ---//
.failures { .failures_jasmine-css {
.spec-detail { .spec-detail_jasmine-css {
margin-bottom: $line-height * 2; margin-bottom: $line-height * 2;
.description { .description_jasmine-css {
background-color: $failing-color; background-color: $failing-color;
a { a {
@@ -319,7 +319,7 @@ body {
} }
} }
.result-message { .result-message_jasmine-css {
padding-top: $line-height; padding-top: $line-height;
color: $text-color; color: $text-color;
@@ -327,11 +327,11 @@ body {
white-space: pre; white-space: pre;
} }
.result-message span.result { .result-message_jasmine-css span.result_jasmine-css {
display: block; display: block;
} }
.stack-trace { .stack-trace_jasmine-css {
margin: 5px 0 0 0; margin: 5px 0 0 0;
max-height: $line-height * 16; max-height: $line-height * 16;
overflow: auto; overflow: auto;