feat(browser): add a selection state on examples in the list

abe33 · Jan 2, 2014 · 5a10666 · 5a10666
1 parent e7fccb4
commit 5a10666
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 8 deletions.
diff --git a/css/examples.styl b/css/examples.styl
@@ -219,6 +219,9 @@ for state in states
   #examples .example.{state[0]}
     background transparentize(state[1], 0.8)
 
+    &.active
+      background transparentize(light_blue, 0.7)
+
 +for_small_phone()
   #examples
     .header

diff --git a/css/spectacular.css b/css/spectacular.css
@@ -1036,30 +1036,45 @@
 #examples .example.errored {
   background: rgba(255,150,20,0.2);
 }
+#examples .example.errored.active {
+  background: rgba(56,147,193,0.3);
+}
 .hide-skipped #examples .skipped {
   display: none;
 }
 #examples .example.skipped {
   background: rgba(255,20,220,0.2);
 }
+#examples .example.skipped.active {
+  background: rgba(56,147,193,0.3);
+}
 .hide-pending #examples .pending {
   display: none;
 }
 #examples .example.pending {
   background: rgba(255,200,90,0.2);
 }
+#examples .example.pending.active {
+  background: rgba(56,147,193,0.3);
+}
 .hide-failure #examples .failure {
   display: none;
 }
 #examples .example.failure {
   background: rgba(255,40,20,0.2);
 }
+#examples .example.failure.active {
+  background: rgba(56,147,193,0.3);
+}
 .hide-success #examples .success {
   display: none;
 }
 #examples .example.success {
   background: rgba(100,180,50,0.2);
 }
+#examples .example.success.active {
+  background: rgba(56,147,193,0.3);
+}
 @media screen and (max-width: 480px) {
   #examples .header #search {
     overflow: hidden;

diff --git a/lib/browser_reporter.js b/lib/browser_reporter.js
diff --git a/specs/units/formatters/browser/examples_list.spec.coffee b/specs/units/formatters/browser/examples_list.spec.coffee
@@ -7,11 +7,11 @@ if typeof module is 'undefined'
 
     withWidgetSetup ->
       before ->
-      spyOn(@reporter, 'errorOccured')
+        spyOn(@reporter, 'errorOccured')
+
         @list.init @runner, @reporter
         @list.onStart(target: @reporter)
 
-
       given 'container', -> @list.container
       given 'all', -> @container.querySelector '.all .value'
       given 'header', -> @container.querySelector '.header'
@@ -23,7 +23,6 @@ if typeof module is 'undefined'
         context 'when a result event is propagated', ->
           fixture 'formatters/list_item.dom', as: 'itemDOM'
 
-
           context 'for a successful example', ->
             given 'example', -> create 'example', 'successful'
 
@@ -32,7 +31,21 @@ if typeof module is 'undefined'
             the 'tests counter', -> @all.textContent.should equal '1'
             the -> @listContainer.should contains @itemDOM
 
-            context
+            context 'clicking on an element of the list', ->
+              given 'item', -> @listContainer.querySelector '.example'
+
+              before ->
+                @list.viewer = displayCard: ->
+
+                spyOn(@list.viewer, 'displayCard')
+                spyOn(@list.reporter, 'openDetails')
+
+                @item.onclick?()
+
+              the -> @list.viewer.displayCard.should haveBeenCalled
+              the -> @list.reporter.openDetails.should haveBeenCalled
+              the -> @item.should haveClass 'active'
+
 
           context 'for a failing example', ->
             given 'example', -> create 'example', 'failure'

diff --git a/src/formatters/browser/examples_list.coffee b/src/formatters/browser/examples_list.coffee
@@ -64,13 +64,20 @@ class spectacular.widgets.ExamplesList
 
     node.appendChild @getExample example
 
+  selectExample: (example, node) ->
+    previous = @list.querySelector('.active')
+    removeClass previous, 'active' if previous?
+
+    addClass node, 'active'
+    @viewer.displayCard example
+    @reporter.openDetails()
+
   getExample: (example) ->
     state = example.result.state
     node = tag 'article', example.ownDescriptionWithExpectations, class: "example #{state}", id: @examples.length, title: example.fullDescription, 'data-index': stripHTML example.fullDescription.toLowerCase()
 
     node.onclick = =>
-      @viewer.displayCard @examples[node.attributes.id.value]
-      @reporter.openDetails()
+      @selectExample @examples[node.attributes.id.value], node
 
     node