refactor and add tests to tailing

assets/scripts/app/app.coffee

@@ -33,7 +33,7 @@ unless window.TravisApplication
 
       @slider = new Travis.Slider()
       @pusher = new Travis.Pusher(Travis.config.pusher_key) if Travis.config.pusher_key
-      @tailing = new Travis.Tailing()
+      @tailing = new Travis.Tailing($(window), '#tail', '#log')
 
       @set('auth', Travis.Auth.create(app: this, endpoint: Travis.config.api_endpoint))
 

assets/scripts/app/tailing.coffee

@@ -1,12 +1,17 @@
-@Travis.Tailing = ->
+class @Travis.Tailing
-  @position = $(window).scrollTop()
-  $(window).scroll( $.throttle( 200, @onScroll.bind(this) ) )
-  this
-
-$.extend Travis.Tailing.prototype,
   options:
     timeout: 200
 
+  tail: ->
+    $(@tail_selector)
+  log: ->
+    $(@log_selector)
+
+  constructor: (@window, @tail_selector, @log_selector) ->
+    @position = @window.scrollTop()
+    @window.scroll( $.throttle( 200, @onScroll.bind(this) ) )
+    this
+
   run: ->
     @autoScroll()
     @positionButton()
@@ -16,38 +21,38 @@ $.extend Travis.Tailing.prototype,
     if @active() then @stop() else @start()
 
   active: ->
-    $('#tail').hasClass('active')
+    @tail().hasClass('active')
 
   start: ->
-    $('#tail').addClass('active')
+    @tail().addClass('active')
     @run()
 
   stop: ->
-    $('#tail').removeClass('active')
+    @tail().removeClass('active')
 
   autoScroll: ->
-    return unless @active()
+    return false unless @active()
-    win = $(window)
+    logBottom = @log().offset().top + @log().outerHeight() + 40
-    log = $('#log')
+    winBottom = @window.scrollTop() + @window.height()
-    logBottom = log.offset().top + log.outerHeight() + 40
+
-    winBottom = win.scrollTop() + win.height()
+    if logBottom - winBottom > 0
-    win.scrollTop(logBottom - win.height()) if logBottom - winBottom > 0
+      @window.scrollTop(logBottom - @window.height())
+      true
+    else
+      false
 
   onScroll: ->
     @positionButton()
-    position = $(window).scrollTop()
+    position = @window.scrollTop()
     @stop() if position < @position
     @position = position
 
   positionButton: ->
-    tail = $('#tail')
+    return if @tail().length is 0
-    return if tail.length is 0
+    offset = @window.scrollTop() - @log().offset().top
-    offset = $(window).scrollTop() - $('#log').offset().top
+    max = @log().height() - @tail().height() + 5
-    max = $('#log').height() - $('#tail').height() + 5
     offset = max if offset > max
-
     if offset > 0
-      tail.css(position: 'fixed', right: 32)
+      @tail().addClass('scrolling')
     else
-      tail.css(position: 'absolute', right: 2)
+      @tail().removeClass('scrolling')
-

assets/scripts/spec/unit/tailing_spec.coffee

@@ -0,0 +1,78 @@
+fakeWindow =
+  scroll: sinon.spy()
+  scrollTop: sinon.stub().returns(0)
+  height: sinon.stub().returns(40)
+element = jQuery('<div id="specTail"></div>')
+log     = jQuery('<div id="specLog"></div>')
+tail = new Travis.Tailing(fakeWindow, '#specTail', '#specLog')
+tail.tail = -> element
+tail.log  = -> log
+
+module "Travis.Tailing",
+  setup: ->
+    jQuery('body').append(element)
+    jQuery('body').append(log)
+
+  teardown: ->
+    element.remove()
+    log.remove()
+    tail.stop()
+
+test "toggle", ->
+  equal(element.hasClass('active'), false)
+  tail.toggle()
+  equal(element.hasClass('active'), true)
+  tail.toggle()
+  stop()
+
+  Ember.run.later ->
+    start()
+    equal(element.hasClass('active'), false)
+  , 300
+
+test "active", ->
+  equal(tail.active(), false)
+  element.addClass('active')
+  equal(tail.active(), true)
+
+test "autoscroll when inactive", ->
+  tail.scrollTo = sinon.spy()
+
+  equal(tail.active(), false)
+  equal(tail.autoScroll(), false)
+  equal(tail.scrollTo.called, false)
+
+test "autoscroll", ->
+  element.addClass('active')
+  log.offset = -> {top: 1}
+  log.outerHeight = -> 1
+
+  equal(tail.active(), true)
+  equal(tail.autoScroll(), true)
+  equal(fakeWindow.scrollTop.calledWith(2), true)
+
+test "autoscroll when we're at the bottom", ->
+  element.addClass('active')
+  log.offset = -> {top: 0}
+  log.outerHeight = -> 0
+
+  equal(tail.active(), true)
+  equal(tail.autoScroll(), false)
+  equal(fakeWindow.scrollTop.calledWith(0), false)
+
+test 'should stop scrolling if the position changed', ->
+  element.addClass('active')
+  tail.position = 100
+  tail.onScroll()
+  equal(element.hasClass('active'), false)
+
+test 'positionButton adds the scrolling class', ->
+  log.offset = -> {top: -1}
+
+  tail.positionButton()
+  equal(element.hasClass('scrolling'), true)
+
+test 'positionButton removes the scrolling class', ->
+  log.offset = -> {top: 1}
+  tail.positionButton()
+  equal(element.hasClass('scrolling'), false)

assets/styles/main/log.sass

@@ -117,6 +117,10 @@ pre#log
       label
         display: inline
 
+    &.scrolling
+      position: fixed
+      right: 32px
+
     .status
       display: inline-block
       margin-right: 1px