From ac50cf4c1448dd4d693da4551d3d4589813295fe Mon Sep 17 00:00:00 2001 From: Sean Durham Date: Sun, 28 Aug 2011 15:04:59 -0700 Subject: [PATCH] include stylesheets for TrivialReporter and HTMLReporter, scoped so they don't interfere with each other. --- src/html/HtmlReporter.js | 2 +- src/html/TrivialReporter.js | 2 +- src/html/_HTMLReporter.scss | 325 +++++++++++++++++++++++++++++++++ src/html/_TrivialReporter.scss | 171 +++++++++++++++++ src/html/jasmine.scss | 324 +------------------------------- 5 files changed, 500 insertions(+), 324 deletions(-) create mode 100644 src/html/_HTMLReporter.scss create mode 100644 src/html/_TrivialReporter.scss diff --git a/src/html/HtmlReporter.js b/src/html/HtmlReporter.js index ce92ca11..c70a9a1e 100644 --- a/src/html/HtmlReporter.js +++ b/src/html/HtmlReporter.js @@ -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)), diff --git a/src/html/TrivialReporter.js b/src/html/TrivialReporter.js index 6debca57..292eae16 100644 --- a/src/html/TrivialReporter.js +++ b/src/html/TrivialReporter.js @@ -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"), diff --git a/src/html/_HTMLReporter.scss b/src/html/_HTMLReporter.scss new file mode 100644 index 00000000..4becfae5 --- /dev/null +++ b/src/html/_HTMLReporter.scss @@ -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; + } + +} \ No newline at end of file diff --git a/src/html/_TrivialReporter.scss b/src/html/_TrivialReporter.scss new file mode 100644 index 00000000..1a23e796 --- /dev/null +++ b/src/html/_TrivialReporter.scss @@ -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; + } +} diff --git a/src/html/jasmine.scss b/src/html/jasmine.scss index e11d5132..267b3caa 100644 --- a/src/html/jasmine.scss +++ b/src/html/jasmine.scss @@ -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"; \ No newline at end of file