include stylesheets for TrivialReporter and HTMLReporter, scoped so they don't interfere with each other.
This commit is contained in:
Sean Durham
ragaskar
@@ -85,7 +85,7 @@ jasmine.HtmlReporter = function(_doc) {
|
||||
}
|
||||
|
||||
function createReporterDom(version) {
|
||||
dom.reporter = self.createDom('div', { className: 'jasmine_reporter' },
|
||||
dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' },
|
||||
dom.banner = self.createDom('div', { className: 'banner' },
|
||||
self.createDom('span', { className: 'title' }, "Jasmine "),
|
||||
self.createDom('span', { className: 'version' }, version)),
|
||||
|
||||
@@ -32,7 +32,7 @@ jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarA
|
||||
jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
|
||||
var showPassed, showSkipped;
|
||||
|
||||
this.outerDiv = this.createDom('div', { className: 'jasmine_reporter' },
|
||||
this.outerDiv = this.createDom('div', { id: 'TrivialReporter', className: 'jasmine_reporter' },
|
||||
this.createDom('div', { className: 'banner' },
|
||||
this.createDom('div', { className: 'logo' },
|
||||
this.createDom('span', { className: 'title' }, "Jasmine"),
|
||||
|
||||
325
src/html/_HTMLReporter.scss
Normal file
325
src/html/_HTMLReporter.scss
Normal file
@@ -0,0 +1,325 @@
|
||||
@import "compass";
|
||||
|
||||
|
||||
$line-height: 14px;
|
||||
$margin-unit: 14px;
|
||||
|
||||
$feint-text-color: #aaa;
|
||||
$light-text-color: #666;
|
||||
$text-color: #333;
|
||||
|
||||
$page-background-color: #eee;
|
||||
|
||||
$light-passing-color: #a6b779;
|
||||
$passing-color: #5e7d00;
|
||||
|
||||
$light-failing-color: #cf867e;
|
||||
$failing-color: #b03911;
|
||||
|
||||
$neutral-color: #bababa;
|
||||
|
||||
$font-size: 11px;
|
||||
$large-font-size: 14px;
|
||||
|
||||
|
||||
body {
|
||||
background-color: $page-background-color;
|
||||
padding: 0;
|
||||
margin: 5px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#HTMLReporter {
|
||||
|
||||
font-size: $font-size;
|
||||
font-family: Monaco, "Lucida Console", monospace;
|
||||
line-height: $line-height;
|
||||
color: $text-color;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.banner,
|
||||
.symbolSummary,
|
||||
.summary,
|
||||
.resultMessage,
|
||||
.specDetail .description,
|
||||
.alert .bar,
|
||||
.stackTrace {
|
||||
padding-left: $margin-unit - 5px;
|
||||
padding-right: $margin-unit - 5px;
|
||||
}
|
||||
|
||||
// This div is available for testing elements that must be added to the DOM.
|
||||
// We position it out of view, so it doesn't obstruct the runner.
|
||||
#jasmine_content {
|
||||
position: fixed;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: $feint-text-color;
|
||||
}
|
||||
|
||||
|
||||
//--- Banner ---//
|
||||
|
||||
.banner {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: $feint-text-color;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Symbol summary ---//
|
||||
|
||||
.symbolSummary {
|
||||
@include clearfix;
|
||||
margin: $line-height 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
height: $line-height / 2;
|
||||
width: $line-height;
|
||||
margin-bottom: $line-height / 2;
|
||||
|
||||
//opacity: .9;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
&.passed {
|
||||
font-size: 14px;
|
||||
|
||||
&:before{
|
||||
color: $passing-color;
|
||||
content: "\02022";
|
||||
}
|
||||
}
|
||||
|
||||
&.failed {
|
||||
line-height: ($line-height / 2) + 2;
|
||||
|
||||
&:before{
|
||||
color: $failing-color;
|
||||
content: "x";
|
||||
font-weight: bold;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
font-size: 14px;
|
||||
|
||||
&:before{
|
||||
color: $neutral-color;
|
||||
content: "\02022";
|
||||
}
|
||||
}
|
||||
|
||||
&.pending{
|
||||
line-height: ($line-height / 2) + 4;
|
||||
|
||||
&:before {
|
||||
color: $feint-text-color;
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Alert ---//
|
||||
|
||||
.bar {
|
||||
line-height: $line-height * 2;
|
||||
font-size: $large-font-size;
|
||||
|
||||
display: block;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.runningAlert {
|
||||
background-color: $light-text-color;
|
||||
}
|
||||
|
||||
.skippedAlert {
|
||||
background-color: $feint-text-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.passingAlert {
|
||||
background-color: $light-passing-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $passing-color;
|
||||
}
|
||||
}
|
||||
|
||||
.failingAlert {
|
||||
background-color: $light-failing-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $failing-color
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results ---//
|
||||
|
||||
.results {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Results menu ---//
|
||||
|
||||
#details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resultsMenu,
|
||||
.resultsMenu a {
|
||||
background-color: #fff;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&.showDetails {
|
||||
|
||||
.summaryMenuItem {
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.detailsMenuItem {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.summaryMenuItem {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results summary ---//
|
||||
|
||||
.summary {
|
||||
margin-top: $margin-unit;
|
||||
|
||||
.suite .suite, .specSummary {
|
||||
margin-left: $margin-unit;
|
||||
}
|
||||
|
||||
.specSummary {
|
||||
&.passed a {
|
||||
color: $passing-color;
|
||||
}
|
||||
&.failed a {
|
||||
color: $failing-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description+.suite {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.suite {
|
||||
margin-top: $margin-unit;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results details ---//
|
||||
|
||||
#details {
|
||||
.specDetail {
|
||||
margin-bottom: $line-height * 2;
|
||||
|
||||
.description {
|
||||
//line-height: $line-height * 2;
|
||||
display: block;
|
||||
|
||||
color: white;
|
||||
background-color: $failing-color;
|
||||
|
||||
//font-size: $large-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resultMessage {
|
||||
padding-top: $line-height;
|
||||
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.resultMessage span.result {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stackTrace {
|
||||
margin: 5px 0 0 0;
|
||||
max-height: $line-height * 16;
|
||||
overflow: auto;
|
||||
line-height: 18px;
|
||||
|
||||
color: $light-text-color;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
}
|
||||
171
src/html/_TrivialReporter.scss
Normal file
171
src/html/_TrivialReporter.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
|
||||
#TrivialReporter {
|
||||
padding: 8px 13px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: scroll;
|
||||
|
||||
background-color: white;
|
||||
font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
|
||||
|
||||
a:visited, a {
|
||||
color: #303;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.run_spec {
|
||||
float:right;
|
||||
padding-right: 5px;
|
||||
font-size: .8em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: #303;
|
||||
background-color: #fef;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
font-size: 1.1em;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.logo .version {
|
||||
font-size: .6em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.runner.running {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
|
||||
.options {
|
||||
text-align: right;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.suite {
|
||||
border: 1px outset gray;
|
||||
margin: 5px 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.suite .suite {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.suite.passed {
|
||||
background-color: #dfd;
|
||||
}
|
||||
|
||||
.suite.failed {
|
||||
background-color: #fdd;
|
||||
}
|
||||
|
||||
.spec {
|
||||
margin: 5px;
|
||||
padding-left: 1em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.spec.failed, .spec.passed, .spec.skipped {
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.spec.failed {
|
||||
background-color: #fbb;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.spec.passed {
|
||||
background-color: #bfb;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
.spec.skipped {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.messages {
|
||||
border-left: 1px dashed gray;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.passed {
|
||||
background-color: #cfc;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.failed {
|
||||
background-color: #fbb;
|
||||
}
|
||||
|
||||
.skipped {
|
||||
color: #777;
|
||||
background-color: #eee;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*.resultMessage {*/
|
||||
/*white-space: pre;*/
|
||||
/*}*/
|
||||
|
||||
.resultMessage span.result {
|
||||
display: block;
|
||||
line-height: 2em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.resultMessage .mismatch {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.stackTrace {
|
||||
white-space: pre;
|
||||
font-size: .8em;
|
||||
margin-left: 10px;
|
||||
max-height: 5em;
|
||||
overflow: auto;
|
||||
border: 1px inset red;
|
||||
padding: 1em;
|
||||
background: #eef;
|
||||
}
|
||||
|
||||
.finished-at {
|
||||
padding-left: 1em;
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
&.show-passed .passed,
|
||||
&.show-skipped .skipped {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#jasmine_content {
|
||||
position:fixed;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.runner {
|
||||
border: 1px solid gray;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
padding: 2px 0 2px 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,322 +1,2 @@
|
||||
@import "compass.scss";
|
||||
|
||||
$line-height: 14px;
|
||||
$margin-unit: 14px;
|
||||
|
||||
$feint-text-color: #aaa;
|
||||
$light-text-color: #666;
|
||||
$text-color: #333;
|
||||
|
||||
$page-background-color: #eee;
|
||||
|
||||
$light-passing-color: #a6b779;
|
||||
$passing-color: #5e7d00;
|
||||
|
||||
$light-failing-color: #cf867e;
|
||||
$failing-color: #b03911;
|
||||
|
||||
$neutral-color: #bababa;
|
||||
|
||||
$font-size: 11px;
|
||||
$large-font-size: 14px;
|
||||
|
||||
body {
|
||||
font-size: $font-size;
|
||||
font-family: Monaco, "Lucida Console", monospace;
|
||||
line-height: $line-height;
|
||||
background-color: $page-background-color;
|
||||
color: $text-color;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.banner,
|
||||
.symbolSummary,
|
||||
.summary,
|
||||
.resultMessage,
|
||||
.specDetail .description,
|
||||
.alert .bar,
|
||||
.stackTrace {
|
||||
padding-left: $margin-unit - 5px;
|
||||
padding-right: $margin-unit - 5px;
|
||||
}
|
||||
|
||||
// This div is available for testing elements that must be added to the DOM.
|
||||
// We position it out of view, so it doesn't obstruct the runner.
|
||||
#jasmine_content {
|
||||
position: fixed;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: $feint-text-color;
|
||||
}
|
||||
|
||||
|
||||
//--- Banner ---//
|
||||
|
||||
.banner {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: $feint-text-color;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Symbol summary ---//
|
||||
|
||||
.symbolSummary {
|
||||
@include clearfix;
|
||||
margin: $line-height 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
height: $line-height / 2;
|
||||
width: $line-height;
|
||||
margin-bottom: $line-height / 2;
|
||||
|
||||
//opacity: .9;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
&.passed {
|
||||
font-size: 14px;
|
||||
|
||||
&:before{
|
||||
color: $passing-color;
|
||||
content: "\02022";
|
||||
}
|
||||
}
|
||||
|
||||
&.failed {
|
||||
line-height: ($line-height / 2) + 2;
|
||||
|
||||
&:before{
|
||||
color: $failing-color;
|
||||
content: "x";
|
||||
font-weight: bold;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
font-size: 14px;
|
||||
|
||||
&:before{
|
||||
color: $neutral-color;
|
||||
content: "\02022";
|
||||
}
|
||||
}
|
||||
|
||||
&.pending{
|
||||
line-height: ($line-height / 2) + 4;
|
||||
|
||||
&:before {
|
||||
color: $feint-text-color;
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Alert ---//
|
||||
|
||||
.bar {
|
||||
line-height: $line-height * 2;
|
||||
font-size: $large-font-size;
|
||||
|
||||
display: block;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.runningAlert {
|
||||
background-color: $light-text-color;
|
||||
}
|
||||
|
||||
.skippedAlert {
|
||||
background-color: $feint-text-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.passingAlert {
|
||||
background-color: $light-passing-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $passing-color;
|
||||
}
|
||||
}
|
||||
|
||||
.failingAlert {
|
||||
background-color: $light-failing-color;
|
||||
|
||||
&:first-child {
|
||||
background-color: $failing-color
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results ---//
|
||||
|
||||
.results {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//--- Results menu ---//
|
||||
|
||||
#details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resultsMenu,
|
||||
.resultsMenu a {
|
||||
background-color: #fff;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.showDetails {
|
||||
|
||||
.summaryMenuItem {
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.detailsMenuItem {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.summaryMenuItem {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results summary ---//
|
||||
|
||||
.summary {
|
||||
margin-top: $margin-unit;
|
||||
|
||||
.suite .suite, .specSummary {
|
||||
margin-left: $margin-unit;
|
||||
}
|
||||
|
||||
.specSummary {
|
||||
&.passed a {
|
||||
color: $passing-color;
|
||||
}
|
||||
&.failed a {
|
||||
color: $failing-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description+.suite {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.suite {
|
||||
margin-top: $margin-unit;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//--- Results details ---//
|
||||
|
||||
#details {
|
||||
.specDetail {
|
||||
margin-bottom: $line-height * 2;
|
||||
|
||||
.description {
|
||||
//line-height: $line-height * 2;
|
||||
display: block;
|
||||
|
||||
color: white;
|
||||
background-color: $failing-color;
|
||||
|
||||
//font-size: $large-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resultMessage {
|
||||
padding-top: $line-height;
|
||||
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.resultMessage span.result {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stackTrace {
|
||||
margin: 5px 0 0 0;
|
||||
max-height: $line-height * 16;
|
||||
overflow: auto;
|
||||
line-height: 18px;
|
||||
|
||||
color: $light-text-color;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@import "HTMLReporter";
|
||||
@import "TrivialReporter";
|
||||
Reference in New Issue
Block a user