better spec toggle

spec/app/atom-spec.coffee

@@ -31,7 +31,7 @@ describe "the `atom` global", ->
 
     describe "keymap loading", ->
       describe "when package.json does not contain a 'keymaps' manifest", ->
-        it "loads all the .cson/.json files in the keymaps directory", ->
+        fit "loads all the .cson/.json files in the keymaps directory", ->
           element1 = $$ -> @div class: 'test-1'
           element2 = $$ -> @div class: 'test-2'
           element3 = $$ -> @div class: 'test-3'
@@ -42,8 +42,8 @@ describe "the `atom` global", ->
 
           window.loadPackage("package-with-module")
 
-          expect(keymap.bindingsForElement(element1)['ctrl-z']).toBe "test-1"
-          expect(keymap.bindingsForElement(element2)['ctrl-z']).toBe "test-2"
+          expect(keymap.bindingsForElement(element1)['ctrl-z']).toBe "test-2"
+          expect(keymap.bindingsForElement(element2)['ctrl-z']).toBe "test-3"
           expect(keymap.bindingsForElement(element3)['ctrl-z']).toBeUndefined()
 
       describe "when package.json contains a 'keymaps' manifest", ->

spec/atom-reporter.coffee

@@ -6,7 +6,7 @@ class AtomReporter extends View
   @content: ->
     @div id: 'HTMLReporter', class: 'jasmine_reporter', =>
       @div outlet: 'specPopup', class: "spec-popup"
-      @div outlet: "suites", class: 'cool'
+      @div outlet: "suites"
       @ul outlet: "symbolSummary", class: 'symbolSummary'
       @div outlet: "status", class: 'status', =>
         @div outlet: "time", class: 'time'
@@ -75,9 +75,11 @@ class AtomReporter extends View
       @specPopup.offset({left, top})
       @timeoutId = setTimeout((=> @specPopup.hide()), 3000)
 
-    $(document).on "click", ".suite", ({currentTarget}) =>
+    $(document).on "click", ".spec-toggle", ({currentTarget}) =>
       element = $(currentTarget)
-      element.find(".spec").toggle()
+      specFailures = element.parent().find('.spec-failures')
+      specFailures.toggle()
+      if specFailures.is(":visible") then element.text "\uf03d" else element.html "\uf03f"
       false
 
   updateStatusView: (spec) ->
@@ -130,7 +132,6 @@ class SuiteResultView extends View
     @div class: 'suite', =>
       @div outlet: 'description', class: 'description'
 
-
   suite: null
 
   initialize: (@suite) ->
@@ -152,8 +153,9 @@ class SuiteResultView extends View
 class SpecResultView extends View
   @content: ->
     @div class: 'spec', =>
+      @div "\uf03d", class: 'spec-toggle'
       @div outlet: 'description', class: 'description'
-
+      @div outlet: 'specFailures', class: 'spec-failures'
   spec: null
 
   initialize: (@spec) ->
@@ -161,8 +163,9 @@ class SpecResultView extends View
     @description.html @spec.description
 
     for result in @spec.results().getItems() when not result.passed()
-      @append $$ -> @div result.message, class: 'resultMessage fail'
-      @append $$ -> @div result.trace.stack, class: 'stackTrace' if result.trace.stack
+      @specFailures.append $$ ->
+        @div result.message, class: 'resultMessage fail'
+        @div result.trace.stack, class: 'stackTrace' if result.trace.stack
 
   attach: ->
     @parentSuiteView().append this

static/jasmine.css

@@ -1,4 +1,14 @@
-body { background-color: #eee; padding: 0; overflow-y: scroll; }
+@font-face {
+  font-family: 'Octicons Regular';
+  src: url("octicons-regular-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  background-color: #ddd;
+  padding: 0;
+}
 
 .spec-popup {
   position: absolute;
@@ -20,7 +30,7 @@ body { background-color: #eee; padding: 0; overflow-y: scroll; }
 
 #HTMLReporter .symbolSummary li {
   float: left;
-  line-height: 10px
+  line-height: 10px;
   height: 10px;
   width: 10px;
   font-size: 10px;
@@ -34,7 +44,7 @@ body { background-color: #eee; padding: 0; overflow-y: scroll; }
 #HTMLReporter .symbolSummary li:before { content: "\02022"; }
 
 #HTMLReporter .symbolSummary li:hover {
-  font-size: 20px;
+  color: white;
 }
 
 #HTMLReporter .status {
@@ -113,6 +123,25 @@ body { background-color: #eee; padding: 0; overflow-y: scroll; }
   padding-bottom: 10px
 }
 
+#HTMLReporter .results .spec .spec-toggle {
+  font-family: Octicons Regular;
+  color: white;
+  font-size: 20px;
+  float: right;
+  cursor: pointer;
+  text-shadow: 3px 3px #222;
+  opacity: 0;
+}
+
+#HTMLReporter .results .spec .spec-toggle:hover {
+  text-shadow: none;
+  padding-top: 3px;
+}
+
+#HTMLReporter .results .spec:hover .spec-toggle {
+  opacity: 1;
+}
+
 #HTMLReporter .resultMessage {
   padding-top: 5px;
   color: #fff;