From 42ad12ec52634438c3b9a8c0352b8787a03e87d2 Mon Sep 17 00:00:00 2001 From: Matt Prather Date: Thu, 14 May 2015 14:23:06 -0700 Subject: [PATCH] Make the HtmlReport CSS classes "unique enough" The only difference between this commit and the previous is that I have used a difference scheme for naming Jasmine CSS classes. Instead of appending "_jasmine-css" to all Jasmine CSS selectors, I have now preprended "jasmine-" instead. --- spec/html/HtmlReporterSpec.js | 108 ++++++++++++++++---------------- src/html/HtmlReporter.js | 114 +++++++++++++++++----------------- src/html/_HTMLReporter.scss | 104 +++++++++++++++---------------- 3 files changed, 163 insertions(+), 163 deletions(-) diff --git a/spec/html/HtmlReporterSpec.js b/spec/html/HtmlReporterSpec.js index 16f03430..9334d945 100644 --- a/spec/html/HtmlReporterSpec.js +++ b/spec/html/HtmlReporterSpec.js @@ -14,20 +14,20 @@ describe("New HtmlReporter", function() { // Main top-level elements expect(container.querySelector("div.jasmine_html-reporter")).toBeTruthy(); - expect(container.querySelector("div.banner_jasmine-css")).toBeTruthy(); - expect(container.querySelector("div.alert_jasmine-css")).toBeTruthy(); - expect(container.querySelector("div.results_jasmine-css")).toBeTruthy(); + expect(container.querySelector("div.jasmine-banner")).toBeTruthy(); + expect(container.querySelector("div.jasmine-alert")).toBeTruthy(); + expect(container.querySelector("div.jasmine-results")).toBeTruthy(); - expect(container.querySelector("ul.symbol-summary_jasmine-css")).toBeTruthy(); + expect(container.querySelector("ul.jasmine-symbol-summary")).toBeTruthy(); // title banner - var banner = container.querySelector(".banner_jasmine-css"); + var banner = container.querySelector(".jasmine-banner"); - var title = banner.querySelector("a.title_jasmine-css"); + var title = banner.querySelector("a.jasmine-title"); expect(title.getAttribute('href')).toEqual('http://jasmine.github.io/'); expect(title.getAttribute('target')).toEqual('_blank'); - var version = banner.querySelector(".version_jasmine-css"), + var version = banner.querySelector(".jasmine-version"), versionText = 'textContent' in version ? version.textContent : version.innerText; expect(versionText).toEqual(j$.version); }); @@ -90,8 +90,8 @@ describe("New HtmlReporter", function() { failedExpectations: [] }); expect(console.error).toHaveBeenCalledWith("Spec \'Some Name\' has no expectations."); - var specEl = container.querySelector('.symbol-summary_jasmine-css li'); - expect(specEl.getAttribute("class")).toEqual("empty_jasmine-css"); + var specEl = container.querySelector('.jasmine-symbol-summary li'); + expect(specEl.getAttribute("class")).toEqual("jasmine-empty"); }); 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: []}); - var specEl = container.querySelector('.symbol-summary_jasmine-css li'); - expect(specEl.getAttribute("class")).toEqual("disabled_jasmine-css"); + var specEl = container.querySelector('.jasmine-symbol-summary li'); + expect(specEl.getAttribute("class")).toEqual("jasmine-disabled"); expect(specEl.getAttribute("id")).toEqual("spec_789"); 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: []}); - var specEl = container.querySelector('.symbol-summary_jasmine-css li'); - expect(specEl.getAttribute("class")).toEqual("pending_jasmine-css"); + var specEl = container.querySelector('.jasmine-symbol-summary li'); + expect(specEl.getAttribute("class")).toEqual("jasmine-pending"); 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: []}); - var statuses = container.querySelector(".symbol-summary_jasmine-css"); + var statuses = container.querySelector(".jasmine-symbol-summary"); var specEl = statuses.querySelector("li"); - expect(specEl.getAttribute("class")).toEqual("passed_jasmine-css"); + expect(specEl.getAttribute("class")).toEqual("jasmine-passed"); expect(specEl.getAttribute("id")).toEqual("spec_123"); }); @@ -173,8 +173,8 @@ describe("New HtmlReporter", function() { passedExpectations: [] }); - var specEl = container.querySelector(".symbol-summary_jasmine-css li"); - expect(specEl.getAttribute("class")).toEqual("failed_jasmine-css"); + var specEl = container.querySelector(".jasmine-symbol-summary li"); + expect(specEl.getAttribute("class")).toEqual("jasmine-failed"); 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.jasmineDone({}); - var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css"); + var alertBars = container.querySelectorAll(".jasmine-alert .jasmine-bar"); expect(alertBars.length).toEqual(3); expect(alertBars[1].innerHTML).toMatch(/My After All Exception/); - expect(alertBars[1].getAttribute("class")).toEqual('bar_jasmine-css errored_jasmine-css'); + expect(alertBars[1].getAttribute("class")).toEqual('jasmine-bar jasmine-errored'); expect(alertBars[2].innerHTML).toMatch(/My Other Exception/); }); }); @@ -238,7 +238,7 @@ describe("New HtmlReporter", function() { reporter.suiteDone({id: 1}); reporter.jasmineDone({}); - var summary = container.querySelector('.summary_jasmine-css'); + var summary = container.querySelector('.jasmine-summary'); var suite = summary.childNodes[0]; var specs = suite.childNodes[1]; var spec = specs.childNodes[0]; @@ -266,7 +266,7 @@ describe("New HtmlReporter", function() { timer.elapsed.and.returnValue(100); reporter.jasmineDone(); - var duration = container.querySelector(".alert_jasmine-css .duration_jasmine-css"); + var duration = container.querySelector(".jasmine-alert .jasmine-duration"); expect(duration.innerHTML).toMatch(/finished in 0.1s/); }); @@ -334,7 +334,7 @@ describe("New HtmlReporter", function() { reporter.suiteDone({id: 1}); reporter.jasmineDone({}); - var summary = container.querySelector(".summary_jasmine-css"); + var summary = container.querySelector(".jasmine-summary"); expect(summary.childNodes.length).toEqual(1); @@ -346,7 +346,7 @@ describe("New HtmlReporter", function() { var node = outerSuite.childNodes[i]; classes.push(node.getAttribute("class")); } - expect(classes).toEqual(["suite-detail_jasmine-css", "specs_jasmine-css", "suite_jasmine-css", "specs_jasmine-css"]); + expect(classes).toEqual(["jasmine-suite-detail", "jasmine-specs", "jasmine-suite", "jasmine-specs"]); var suiteDetail = outerSuite.childNodes[0]; var suiteLink = suiteDetail.childNodes[0]; @@ -355,7 +355,7 @@ describe("New HtmlReporter", function() { var specs = outerSuite.childNodes[1]; var spec = specs.childNodes[0]; - expect(spec.getAttribute("class")).toEqual("passed_jasmine-css"); + expect(spec.getAttribute("class")).toEqual("jasmine-passed"); expect(spec.getAttribute("id")).toEqual("spec-123"); var specLink = spec.childNodes[0]; @@ -384,18 +384,18 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var trigger = container.querySelector('.run-options_jasmine-css .trigger_jasmine-css'), - payload = container.querySelector('.run-options_jasmine-css .payload_jasmine-css'); + var trigger = container.querySelector('.jasmine-run-options .jasmine-trigger'), + payload = container.querySelector('.jasmine-run-options .jasmine-payload'); - expect(payload.className).not.toContain('open_jasmine-css'); + expect(payload.className).not.toContain('jasmine-open'); trigger.onclick(); - expect(payload.className).toContain('open_jasmine-css'); + expect(payload.className).toContain('jasmine-open'); trigger.onclick(); - expect(payload.className).not.toContain('open_jasmine-css'); + expect(payload.className).not.toContain('jasmine-open'); }); describe("UI for raising/catching exceptions", function() { @@ -419,7 +419,7 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var raisingExceptionsUI = container.querySelector(".raise_jasmine-css"); + var raisingExceptionsUI = container.querySelector(".jasmine-raise"); expect(raisingExceptionsUI.checked).toBe(false); }); @@ -444,7 +444,7 @@ describe("New HtmlReporter", function() { env.catchExceptions(false); reporter.jasmineDone({}); - var raisingExceptionsUI = container.querySelector(".raise_jasmine-css"); + var raisingExceptionsUI = container.querySelector(".jasmine-raise"); expect(raisingExceptionsUI.checked).toBe(true); }); @@ -470,7 +470,7 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var input = container.querySelector(".raise_jasmine-css"); + var input = container.querySelector(".jasmine-raise"); input.click(); expect(exceptionsClickHandler).toHaveBeenCalled(); }); @@ -497,7 +497,7 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var throwingExpectationsUI = container.querySelector(".throw_jasmine-css"); + var throwingExpectationsUI = container.querySelector(".jasmine-throw"); expect(throwingExpectationsUI.checked).toBe(false); }); @@ -523,7 +523,7 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var throwingExpectationsUI = container.querySelector(".throw_jasmine-css"); + var throwingExpectationsUI = container.querySelector(".jasmine-throw"); expect(throwingExpectationsUI.checked).toBe(true); }); @@ -549,7 +549,7 @@ describe("New HtmlReporter", function() { reporter.initialize(); reporter.jasmineDone({}); - var throwingExpectationsUI = container.querySelector(".throw_jasmine-css"); + var throwingExpectationsUI = container.querySelector(".jasmine-throw"); throwingExpectationsUI.click(); expect(throwingExceptionHandler).toHaveBeenCalled(); @@ -572,8 +572,8 @@ describe("New HtmlReporter", function() { reporter.jasmineStarted({}); reporter.jasmineDone({}); - var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css"); - expect(alertBars[0].getAttribute('class')).toMatch(/skipped_jasmine-css/); + var alertBars = container.querySelectorAll(".jasmine-alert .jasmine-bar"); + expect(alertBars[0].getAttribute('class')).toMatch(/jasmine-skipped/); expect(alertBars[0].innerHTML).toMatch(/No specs found/); }); @@ -612,21 +612,21 @@ describe("New HtmlReporter", function() { }); it("reports the specs counts", function() { - var alertBars = container.querySelectorAll(".alert_jasmine-css .bar_jasmine-css"); + var alertBars = container.querySelectorAll(".jasmine-alert .jasmine-bar"); expect(alertBars.length).toEqual(1); - expect(alertBars[0].getAttribute('class')).toMatch(/passed_jasmine-css/); + expect(alertBars[0].getAttribute('class')).toMatch(/jasmine-passed/); expect(alertBars[0].innerHTML).toMatch(/2 specs, 0 failures/); }); it("reports no failure details", function() { - var specFailure = container.querySelector(".failures_jasmine-css"); + var specFailure = container.querySelector(".jasmine-failures"); expect(specFailure.childNodes.length).toEqual(0); }); it("reports no pending specs", function() { - var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css"); + var alertBar = container.querySelector(".jasmine-alert .jasmine-bar"); expect(alertBar.innerHTML).not.toMatch(/pending spec[s]/); }); @@ -662,19 +662,19 @@ describe("New HtmlReporter", function() { }); it("reports the pending specs count", function() { - var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css"); + var alertBar = container.querySelector(".jasmine-alert .jasmine-bar"); expect(alertBar.innerHTML).toMatch(/1 spec, 0 failures, 1 pending spec/); }); it("reports no failure details", function() { - var specFailure = container.querySelector(".failures_jasmine-css"); + var specFailure = container.querySelector(".jasmine-failures"); expect(specFailure.childNodes.length).toEqual(0); }); it("displays the custom pending reason", function() { - var pendingDetails = container.querySelector(".summary_jasmine-css .pending_jasmine-css"); + var pendingDetails = container.querySelector(".jasmine-summary .jasmine-pending"); expect(pendingDetails.innerHTML).toContain("my custom pending reason"); }); @@ -721,37 +721,37 @@ describe("New HtmlReporter", function() { }); it("reports the specs counts", function() { - var alertBar = container.querySelector(".alert_jasmine-css .bar_jasmine-css"); + var alertBar = container.querySelector(".jasmine-alert .jasmine-bar"); - expect(alertBar.getAttribute('class')).toMatch(/failed_jasmine-css/); + expect(alertBar.getAttribute('class')).toMatch(/jasmine-failed/); expect(alertBar.innerHTML).toMatch(/2 specs, 1 failure/); }); it("reports failure messages and stack traces", function() { - var specFailures = container.querySelector(".failures_jasmine-css"); + var specFailures = container.querySelector(".jasmine-failures"); var failure = specFailures.childNodes[0]; - expect(failure.getAttribute("class")).toMatch(/failed_jasmine-css/); - expect(failure.getAttribute("class")).toMatch(/spec-detail_jasmine-css/); + expect(failure.getAttribute("class")).toMatch(/jasmine-failed/); + expect(failure.getAttribute("class")).toMatch(/jasmine-spec-detail/); var specDiv = failure.childNodes[0]; - expect(specDiv.getAttribute("class")).toEqual("description_jasmine-css"); + expect(specDiv.getAttribute("class")).toEqual("jasmine-description"); var specLink = specDiv.childNodes[0]; 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"); var message = failure.childNodes[1].childNodes[0]; - expect(message.getAttribute("class")).toEqual("result-message_jasmine-css"); + expect(message.getAttribute("class")).toEqual("jasmine-result-message"); expect(message.innerHTML).toEqual("a failure message"); var stackTrace = failure.childNodes[1].childNodes[1]; - expect(stackTrace.getAttribute("class")).toEqual("stack-trace_jasmine-css"); + expect(stackTrace.getAttribute("class")).toEqual("jasmine-stack-trace"); expect(stackTrace.innerHTML).toEqual("a stack trace"); }); it("allows switching between failure details and the spec summary", function() { - var menuBar = container.querySelectorAll(".bar_jasmine-css")[1]; + var menuBar = container.querySelectorAll(".jasmine-bar")[1]; expect(menuBar.getAttribute("class")).not.toMatch(/hidden/); @@ -762,7 +762,7 @@ describe("New HtmlReporter", function() { it("sets the reporter to 'Failures List' mode", function() { var reporterNode = container.querySelector(".jasmine_html-reporter"); - expect(reporterNode.getAttribute("class")).toMatch("failure-list_jasmine-css"); + expect(reporterNode.getAttribute("class")).toMatch("jasmine-failure-list"); }); }); }); diff --git a/src/html/HtmlReporter.js b/src/html/HtmlReporter.js index a9109a5b..6edfe4ee 100644 --- a/src/html/HtmlReporter.js +++ b/src/html/HtmlReporter.js @@ -25,19 +25,19 @@ jasmineRequire.HtmlReporter = function(j$) { this.initialize = function() { clearPrior(); htmlReporterMain = createDom('div', {className: 'jasmine_html-reporter'}, - createDom('div', {className: 'banner_jasmine-css'}, - createDom('a', {className: 'title_jasmine-css', href: 'http://jasmine.github.io/', target: '_blank'}), - createDom('span', {className: 'version_jasmine-css'}, j$.version) + createDom('div', {className: 'jasmine-banner'}, + createDom('a', {className: 'jasmine-title', href: 'http://jasmine.github.io/', target: '_blank'}), + createDom('span', {className: 'jasmine-version'}, j$.version) ), - createDom('ul', {className: 'symbol-summary_jasmine-css'}), - createDom('div', {className: 'alert_jasmine-css'}), - createDom('div', {className: 'results_jasmine-css'}, - createDom('div', {className: 'failures_jasmine-css'}) + createDom('ul', {className: 'jasmine-symbol-summary'}), + createDom('div', {className: 'jasmine-alert'}), + createDom('div', {className: 'jasmine-results'}, + createDom('div', {className: 'jasmine-failures'}) ) ); getContainer().appendChild(htmlReporterMain); - symbols = find('.symbol-summary_jasmine-css'); + symbols = find('.jasmine-symbol-summary'); }; var totalSpecsDefined; @@ -46,7 +46,7 @@ jasmineRequire.HtmlReporter = function(j$) { timer.start(); }; - var summary = createDom('div', {className: 'summary_jasmine-css'}); + var summary = createDom('div', {className: 'jasmine-summary'}); var topResults = new j$.ResultsNode({}, '', null), currentParent = topResults; @@ -83,7 +83,7 @@ jasmineRequire.HtmlReporter = function(j$) { } symbols.appendChild(createDom('li', { - className: noExpectations(result) ? 'empty_jasmine-css' : result.status + '_jasmine-css', + className: noExpectations(result) ? 'jasmine-empty' : 'jasmine-' + result.status, id: 'spec_' + result.id, title: result.fullName } @@ -93,18 +93,18 @@ jasmineRequire.HtmlReporter = function(j$) { failureCount++; var failure = - createDom('div', {className: 'spec-detail_jasmine-css failed_jasmine-css'}, - createDom('div', {className: 'description_jasmine-css'}, + createDom('div', {className: 'jasmine-spec-detail jasmine-failed'}, + createDom('div', {className: 'jasmine-description'}, createDom('a', {title: result.fullName, href: specHref(result)}, result.fullName) ), - createDom('div', {className: 'messages_jasmine-css'}) + createDom('div', {className: 'jasmine-messages'}) ); var messages = failure.childNodes[1]; for (var i = 0; i < result.failedExpectations.length; i++) { var expectation = result.failedExpectations[i]; - messages.appendChild(createDom('div', {className: 'result-message_jasmine-css'}, expectation.message)); - messages.appendChild(createDom('div', {className: 'stack-trace_jasmine-css'}, expectation.stack)); + messages.appendChild(createDom('div', {className: 'jasmine-result-message'}, expectation.message)); + messages.appendChild(createDom('div', {className: 'jasmine-stack-trace'}, expectation.stack)); } failures.push(failure); @@ -116,70 +116,70 @@ jasmineRequire.HtmlReporter = function(j$) { }; this.jasmineDone = function() { - var banner = find('.banner_jasmine-css'); - var alert = find('.alert_jasmine-css'); - alert.appendChild(createDom('span', {className: 'duration_jasmine-css'}, 'finished in ' + timer.elapsed() / 1000 + 's')); + var banner = find('.jasmine-banner'); + var alert = find('.jasmine-alert'); + alert.appendChild(createDom('span', {className: 'jasmine-duration'}, 'finished in ' + timer.elapsed() / 1000 + 's')); banner.appendChild( - createDom('div', { className: 'run-options_jasmine-css' }, - createDom('span', { className: 'trigger_jasmine-css' }, 'Options'), - createDom('div', { className: 'payload_jasmine-css' }, - createDom('div', { className: 'exceptions_jasmine-css' }, + createDom('div', { className: 'jasmine-run-options' }, + createDom('span', { className: 'jasmine-trigger' }, 'Options'), + createDom('div', { className: 'jasmine-payload' }, + createDom('div', { className: 'jasmine-exceptions' }, createDom('input', { - className: 'raise_jasmine-css', - id: 'raise-exceptions_jasmine-css', + className: 'jasmine-raise', + id: 'jasmine-raise-exceptions', type: 'checkbox' }), - createDom('label', { className: 'label_jasmine-css', 'for': 'raise-exceptions_jasmine-css' }, 'raise exceptions')), - createDom('div', { className: 'throw-failures_jasmine-css' }, + createDom('label', { className: 'jasmine-label', 'for': 'jasmine-raise-exceptions' }, 'raise exceptions')), + createDom('div', { className: 'jasmine-throw-failures' }, createDom('input', { - className: 'throw_jasmine-css', - id: 'throw-failures_jasmine-css', + className: 'jasmine-throw', + id: 'jasmine-throw-failures', type: 'checkbox' }), - createDom('label', { className: 'label_jasmine-css', 'for': 'throw-failures_jasmine-css' }, 'stop spec on expectation failure')) + createDom('label', { className: 'jasmine-label', 'for': 'jasmine-throw-failures' }, 'stop spec on expectation failure')) ) )); - var raiseCheckbox = find('#raise-exceptions_jasmine-css'); + var raiseCheckbox = find('#jasmine-raise-exceptions'); raiseCheckbox.checked = !env.catchingExceptions(); raiseCheckbox.onclick = onRaiseExceptionsClick; - var throwCheckbox = find('#throw-failures_jasmine-css'); + var throwCheckbox = find('#jasmine-throw-failures'); throwCheckbox.checked = env.throwingExpectationFailures(); throwCheckbox.onclick = onThrowExpectationsClick; - var optionsMenu = find('.run-options_jasmine-css'), - optionsTrigger = optionsMenu.querySelector('.trigger_jasmine-css'), - optionsPayload = optionsMenu.querySelector('.payload_jasmine-css'), - isOpen = /\bopen_jasmine-css\b/; + var optionsMenu = find('.jasmine-run-options'), + optionsTrigger = optionsMenu.querySelector('.jasmine-trigger'), + optionsPayload = optionsMenu.querySelector('.jasmine-payload'), + isOpen = /\bjasmine-open\b/; optionsTrigger.onclick = function() { if (isOpen.test(optionsPayload.className)) { optionsPayload.className = optionsPayload.className.replace(isOpen, ''); } else { - optionsPayload.className += ' open_jasmine-css'; + optionsPayload.className += ' jasmine-open'; } }; if (specsExecuted < totalSpecsDefined) { var skippedMessage = 'Ran ' + specsExecuted + ' of ' + totalSpecsDefined + ' specs - run all'; alert.appendChild( - createDom('span', {className: 'bar_jasmine-css skipped_jasmine-css'}, + createDom('span', {className: 'jasmine-bar jasmine-skipped'}, createDom('a', {href: '?', title: 'Run all specs'}, skippedMessage) ) ); } var statusBarMessage = ''; - var statusBarClassName = 'bar_jasmine-css '; + var statusBarClassName = 'jasmine-bar '; if (totalSpecsDefined > 0) { statusBarMessage += pluralize('spec', specsExecuted) + ', ' + pluralize('failure', failureCount); if (pendingSpecCount) { statusBarMessage += ', ' + pluralize('pending spec', pendingSpecCount); } - statusBarClassName += (failureCount > 0) ? 'failed_jasmine-css' : 'passed_jasmine-css'; + statusBarClassName += (failureCount > 0) ? 'jasmine-failed' : 'jasmine-passed'; } else { - statusBarClassName += 'skipped_jasmine-css'; + statusBarClassName += 'jasmine-skipped'; statusBarMessage += 'No specs found'; } @@ -189,12 +189,12 @@ jasmineRequire.HtmlReporter = function(j$) { var failedSuite = failedSuites[i]; for(var j = 0; j < failedSuite.failedExpectations.length; j++) { var errorBarMessage = 'AfterAll ' + failedSuite.failedExpectations[j].message; - var errorBarClassName = 'bar_jasmine-css errored_jasmine-css'; + var errorBarClassName = 'jasmine-bar jasmine-errored'; alert.appendChild(createDom('span', {className: errorBarClassName}, errorBarMessage)); } } - var results = find('.results_jasmine-css'); + var results = find('.jasmine-results'); results.appendChild(summary); summaryList(topResults, summary); @@ -204,8 +204,8 @@ jasmineRequire.HtmlReporter = function(j$) { for (var i = 0; i < resultsTree.children.length; i++) { var resultNode = resultsTree.children[i]; if (resultNode.type == 'suite') { - var suiteListNode = createDom('ul', {className: 'suite_jasmine-css', id: 'suite-' + resultNode.result.id}, - createDom('li', {className: 'suite-detail_jasmine-css'}, + var suiteListNode = createDom('ul', {className: 'jasmine-suite', id: 'suite-' + resultNode.result.id}, + createDom('li', {className: 'jasmine-suite-detail'}, createDom('a', {href: specHref(resultNode.result)}, resultNode.result.description) ) ); @@ -214,8 +214,8 @@ jasmineRequire.HtmlReporter = function(j$) { domParent.appendChild(suiteListNode); } if (resultNode.type == 'spec') { - if (domParent.getAttribute('class') != 'specs_jasmine-css') { - specListNode = createDom('ul', {className: 'specs_jasmine-css'}); + if (domParent.getAttribute('class') != 'jasmine-specs') { + specListNode = createDom('ul', {className: 'jasmine-specs'}); domParent.appendChild(specListNode); } var specDescription = resultNode.result.description; @@ -227,7 +227,7 @@ jasmineRequire.HtmlReporter = function(j$) { } specListNode.appendChild( createDom('li', { - className: resultNode.result.status + '_jasmine-css', + className: 'jasmine-' + resultNode.result.status, id: 'spec-' + resultNode.result.id }, createDom('a', {href: specHref(resultNode.result)}, specDescription) @@ -239,24 +239,24 @@ jasmineRequire.HtmlReporter = function(j$) { if (failures.length) { alert.appendChild( - createDom('span', {className: 'menu_jasmine-css bar_jasmine-css spec-list_jasmine-css'}, + createDom('span', {className: 'jasmine-menu jasmine-bar jasmine-spec-list'}, createDom('span', {}, 'Spec List | '), - createDom('a', {className: 'failures-menu_jasmine-css', href: '#'}, 'Failures'))); + createDom('a', {className: 'jasmine-failures-menu', href: '#'}, 'Failures'))); alert.appendChild( - createDom('span', {className: 'menu_jasmine-css bar_jasmine-css failure-list_jasmine-css'}, - createDom('a', {className: 'spec-list-menu_jasmine-css', href: '#'}, 'Spec List'), + createDom('span', {className: 'jasmine-menu jasmine-bar jasmine-failure-list'}, + createDom('a', {className: 'jasmine-spec-list-menu', href: '#'}, 'Spec List'), createDom('span', {}, ' | Failures '))); - find('.failures-menu_jasmine-css').onclick = function() { - setMenuModeTo('failure-list_jasmine-css'); + find('.jasmine-failures-menu').onclick = function() { + setMenuModeTo('jasmine-failure-list'); }; - find('.spec-list-menu_jasmine-css').onclick = function() { - setMenuModeTo('spec-list_jasmine-css'); + find('.jasmine-spec-list-menu').onclick = function() { + setMenuModeTo('jasmine-spec-list'); }; - setMenuModeTo('failure-list_jasmine-css'); + setMenuModeTo('jasmine-failure-list'); - var failureNode = find('.failures_jasmine-css'); + var failureNode = find('.jasmine-failures'); for (var i = 0; i < failures.length; i++) { failureNode.appendChild(failures[i]); } diff --git a/src/html/_HTMLReporter.scss b/src/html/_HTMLReporter.scss index 33d91c49..1f87d069 100644 --- a/src/html/_HTMLReporter.scss +++ b/src/html/_HTMLReporter.scss @@ -46,23 +46,23 @@ body { line-height: $line-height; } - .banner_jasmine-css, - .symbol-summary_jasmine-css, - .summary_jasmine-css, - .result-message_jasmine-css, - .spec_jasmine-css .description_jasmine-css, - .spec-detail_jasmine-css .description_jasmine-css, - .alert_jasmine-css .bar_jasmine-css, - .stack-trace_jasmine-css { + .jasmine-banner, + .jasmine-symbol-summary, + .jasmine-summary, + .jasmine-result-message, + .jasmine-spec .jasmine-description, + .jasmine-spec-detail .jasmine-description, + .jasmine-alert .jasmine-bar, + .jasmine-stack-trace { padding-left: $margin-unit - 5px; padding-right: $margin-unit - 5px; } - .banner_jasmine-css { + .jasmine-banner { position: relative; } - .banner_jasmine-css .title_jasmine-css { + .jasmine-banner .jasmine-title { background: inline-image('jasmine-horizontal.png') no-repeat; background: inline-image('jasmine-horizontal.svg') no-repeat, none; @include background-size(100%); @@ -72,7 +72,7 @@ body { height: 25px; } - .banner_jasmine-css .version_jasmine-css { + .jasmine-banner .jasmine-version { margin-left: $margin-unit; position: relative; top: 6px; @@ -85,17 +85,17 @@ body { right: 100%; } - .version_jasmine-css { + .jasmine-version { color: $faint-text-color; } //--- Banner ---// - .banner_jasmine-css { + .jasmine-banner { margin-top: $line-height; } - .duration_jasmine-css { + .jasmine-duration { color: #fff; float: right; line-height: $line-height * 2; @@ -104,7 +104,7 @@ body { //--- Symbol summary ---// - .symbol-summary_jasmine-css { + .jasmine-symbol-summary { @include clearfix; margin: $line-height 0; @@ -115,7 +115,7 @@ body { font-size: 16px; - &.passed_jasmine-css { + &.jasmine-passed { font-size: 14px; &:before { @@ -124,7 +124,7 @@ body { } } - &.failed_jasmine-css { + &.jasmine-failed { line-height: ($line-height / 2) + 2; &:before { @@ -135,7 +135,7 @@ body { } } - &.disabled_jasmine-css { + &.jasmine-disabled { font-size: 14px; &:before { @@ -144,7 +144,7 @@ body { } } - &.pending_jasmine-css { + &.jasmine-pending { line-height: 17px; &:before { color: $pending-color; @@ -152,7 +152,7 @@ body { } } - &.empty_jasmine-css { + &.jasmine-empty { font-size: 14px; &:before { @@ -163,7 +163,7 @@ body { } } - .run-options_jasmine-css { + .jasmine-run-options { float: right; margin-right: 5px; border: 1px solid $jasmine-color; @@ -171,12 +171,12 @@ body { position: relative; line-height: 20px; - .trigger_jasmine-css { + .jasmine-trigger { cursor: pointer; padding: 8px 16px; } - .payload_jasmine-css { + .jasmine-payload { position: absolute; display: none; right: -1px; @@ -185,7 +185,7 @@ body { white-space: nowrap; padding: 4px 8px; - &.open_jasmine-css { + &.jasmine-open { display: block; } } @@ -193,30 +193,30 @@ body { //--- Alerts: status bars ---// - .bar_jasmine-css { + .jasmine-bar { line-height: $line-height * 2; font-size: $large-font-size; display: block; color: #eee; - &.failed_jasmine-css { + &.jasmine-failed { background-color: $failing-color; } - &.passed_jasmine-css { + &.jasmine-passed { background-color: $passing-color; } - &.skipped_jasmine-css { + &.jasmine-skipped { background-color: $neutral-color; } - &.errored_jasmine-css { + &.jasmine-errored { background-color: $failing-color; } - &.menu_jasmine-css { + &.jasmine-menu { background-color: #fff; color: $faint-text-color; @@ -231,29 +231,29 @@ body { } // simplify toggle control between the two menu bars - &.spec-list_jasmine-css { - .bar_jasmine-css.menu_jasmine-css.failure-list_jasmine-css, - .results_jasmine-css .failures_jasmine-css { + &.jasmine-spec-list { + .jasmine-bar.jasmine-menu.jasmine-failure-list, + .jasmine-results .jasmine-failures { display: none; } } - &.failure-list_jasmine-css { - .bar_jasmine-css.menu_jasmine-css.spec-list_jasmine-css, - .summary_jasmine-css { + &.jasmine-failure-list { + .jasmine-bar.jasmine-menu.jasmine-spec-list, + .jasmine-summary { display: none; } } //--- Results ---// - .results_jasmine-css { + .jasmine-results { margin-top: $line-height; } //--- Results summary: Suites and Specs names/links ---// - .summary_jasmine-css { + .jasmine-summary { margin-top: $margin-unit; ul { @@ -262,40 +262,40 @@ body { padding-top: 0; padding-left: 0; - &.suite_jasmine-css { + &.jasmine-suite { margin-top: $margin-unit/2; margin-bottom: $margin-unit/2 } } li { - &.passed_jasmine-css a { + &.jasmine-passed a { color: $passing-color; } - &.failed_jasmine-css a { + &.jasmine-failed a { color: $failing-color; } - &.empty_jasmine-css a { + &.jasmine-empty a { color: $pending-color; } - &.pending_jasmine-css a { + &.jasmine-pending a { color: $pending-color; } - &.disabled_jasmine-css a { + &.jasmine-disabled a { color: $neutral-color; } } } - .description_jasmine-css + .suite_jasmine-css { + .jasmine-description + .jasmine-suite { margin-top: 0; } - .suite_jasmine-css { + .jasmine-suite { margin-top: $margin-unit; a { @@ -305,11 +305,11 @@ body { //--- Failure details ---// - .failures_jasmine-css { - .spec-detail_jasmine-css { + .jasmine-failures { + .jasmine-spec-detail { margin-bottom: $line-height * 2; - .description_jasmine-css { + .jasmine-description { background-color: $failing-color; a { @@ -319,7 +319,7 @@ body { } } - .result-message_jasmine-css { + .jasmine-result-message { padding-top: $line-height; color: $text-color; @@ -327,11 +327,11 @@ body { white-space: pre; } - .result-message_jasmine-css span.result_jasmine-css { + .jasmine-result-message span.jasmine-result { display: block; } - .stack-trace_jasmine-css { + .jasmine-stack-trace { margin: 5px 0 0 0; max-height: $line-height * 16; overflow: auto;