Merge pull request #121 from it3s/fix_javascript_specs

Fix javascript specs

.travis.yml

@@ -22,3 +22,4 @@ before_script:
 
 script:
   - bundle exec rspec
+  - bundle exec rake tmp:clear konacha:run

app/assets/javascripts/base.js.coffee

@@ -48,7 +48,7 @@ componentBuilder = (name, container) ->
     if not components[name]?
       console?.error "Component not found: #{name}"
       return
-    console?.log "Starting Component: #{name}"
+    log "Starting Component: #{name}"
     _comp = components[name]()
     _comp.container = container
     _comp.identifier = @compId()
@@ -67,6 +67,9 @@ componentBuilder = (name, container) ->
     components._instances[_comp.identifier] = _comp
     _comp
 
+startComponent = (name, container) ->
+  componentBuilder(name, container).start()
+
 componentsManager = (container) ->
   container: container
 
@@ -79,35 +82,52 @@ componentsManager = (container) ->
   buildComponents: ->
     unless @started()
       _.each @names, (name) =>
-        componentBuilder(name, @container).start()
+        startComponent(name, @container)
         @onStarted()
 
-startComponents = (evt, root=document) ->
+startComponents = (root=document) ->
   attr = 'data-components'
   $root = $ root
+  # start the root components
   componentsManager($root).buildComponents() if $root.attr(attr)
+  # start the children components
   $root.find("[#{attr}]").each (i, container) =>
     componentsManager($(container)).buildComponents()
 
-mediator.subscribe 'components:start', startComponents
+mediator.subscribe 'components:start', (evt, root) => startComponents(root)
 
 stickyRecalc = () ->
   setTimeout () -> $(document.body).trigger 'sticky_kit:recalc', 100
 
 componentInitialized = (evt, component) ->
-  console.log "Component Initialized: #{component}"
+  log "Component Initialized: #{component}"
   stickyRecalc()
 
 mediator.subscribe 'component:initialized', componentInitialized
 
 componentChanged = (evt, component) ->
-  console.log "Component Changed: #{component}"
+  log "Component Changed: #{component}"
   stickyRecalc()
 
 mediator.subscribe 'component:changed', componentChanged
 
+log = () ->
+
+  getDate = (date) ->
+    months = ['January', 'February', 'March', 'April', 'May', 'June',
+              'July', 'August', 'September', 'October', 'November', 'December']
+    date ?= new Date()
+    day = date.getDate()
+    month = date.getMonth()
+    yy = date.getYear()
+    year = if yy < 1000 then yy + 1900 else yy
+
+    "#{months[month]} #{day} #{year}"
+
+  args = ["[#{getDate()}]"].concat Array.prototype.slice.call(arguments)
+  console?.log(args.join(' ')) if !!window.DEBUG
 
-flashMessage = (msg)->
+flashMessage = (msg) ->
   flashMsg = $(msg)
   $('body').append(flashMsg)
   mediator.publish 'components:start', flashMsg
@@ -135,6 +155,7 @@ spinner = {
 
 # setup global App namesmpace
 window.App =
+  log       : log
   mediator  : mediator
   components: components
   utils     :
@@ -145,3 +166,4 @@ window.App =
 # setup testing ns
 window.__testing__?.base =
   startComponents: startComponents
+  startComponent: startComponent

app/assets/javascripts/components/alert.js.coffee

@@ -7,9 +7,12 @@ App.components.alert = (container) ->
     alerts     : @container.closest('.alerts')
 
   initialize: ->
-    @on @attr.closeButton, 'click', @close
+    @bindEvents()
     setTimeout @close.bind(this), @attr.closeTime
 
+  bindEvents: ->
+    @on @attr.closeButton, 'click', @close
+
   close: () ->
     unless @attr.closed
       @attr.closed = true

app/assets/javascripts/components/follow.js.coffee

@@ -29,14 +29,17 @@ App.components.follow = ->
   requestData: ->
     {_method: if @attr.following then "delete" else "post"}
 
+  isActive: ->
+    @container.is('.active')
+
   toggleActive: (following) ->
     following ?= not @attr.following
     @attr.following = following
     if following then @container.addClass('active') else @container.removeClass('active')
     @resetLabel()
 
   toggleLabel: ->
-    @attr.label.text I18n?.followings[ if @attr.following then 'unfollow' else 'follow' ]
+    @attr.label.text I18n.followings[ if @attr.following then 'unfollow' else 'follow' ]
 
   resetLabel: ->
-    @attr.label.text I18n?.followings[ if @attr.following then 'following' else 'follow' ]
+    @attr.label.text I18n.followings[ if @attr.following then 'following' else 'follow' ]

app/assets/javascripts/components/importUploader.js.coffee

@@ -1,4 +1,3 @@
-
 App.components.importUploader = ->
   _.extend App.components.uploader(), {
 

app/assets/javascripts/components/listFilter.js.coffee

@@ -1,10 +1,3 @@
-expanded = """
-<i class="fa fa-chevron-up"></i> #{I18n.lists.collapse}
-"""
-collapsed = """
-<i class="fa fa-chevron-down"></i> #{I18n.lists.expand}
-"""
-
 App.components.listFilter = ->
   attributes: ->
     toggleBtn:      @container.find('.toggle-panel')
@@ -13,6 +6,12 @@ App.components.listFilter = ->
     latitudeField:  @container.find('#list_filter_latitude')
     orderSection:   @container.find('.filter-order')
     filterForm:     @container.find('.filter-form')
+    expanded: """
+    <i class="fa fa-chevron-up"></i> #{I18n.lists.collapse}
+    """
+    collapsed: """
+    <i class="fa fa-chevron-down"></i> #{I18n.lists.expand}
+    """
 
   initialize: ->
     @bindEvents()
@@ -31,12 +30,12 @@ App.components.listFilter = ->
   collapse: ->
     @attr.filterForm.slideUp('fast')
     @attr.toggleBtn.data('toggle', 'collapsed')
-    @attr.toggleBtn.html collapsed
+    @attr.toggleBtn.html @attr.collapsed
 
   expand: ->
     @attr.filterForm.slideDown('fast')
     @attr.toggleBtn.data('toggle', 'expanded')
-    @attr.toggleBtn.html expanded
+    @attr.toggleBtn.html @attr.expanded
 
   wait: ->
     App.utils.spinner.show()

app/assets/javascripts/components/modal.js.coffee

@@ -21,7 +21,6 @@ App.components.modal = ->
     App.mediator.subscribe 'modal:close', @close.bind(this)
     App.mediator.subscribe 'modal:afterOpen', @afterOpen.bind(this)
 
-
   getTarget: ->
     if @attr.remote || @attr.autoload then @container else @referedElement()
 
@@ -50,7 +49,7 @@ App.components.modal = ->
       App.mediator.publish('components:start', currentModal)
 
   pluginOptions: ->
-    closeOptions = if @attr.prevent_close then  @attr.preventCloseOpts else {}
+    closeOptions = if @attr.prevent_close then @attr.preventCloseOpts else {}
     _.extend {}, @attr.defaults, closeOptions
 
   shouldOpen: ->

app/assets/javascripts/components/notifications.js.coffee

@@ -6,7 +6,7 @@ App.components.notifications = ->
   initialize: ->
     @toggleCounter()
     App.mediator.subscribe "modal:afterOpen", @onModalOpen.bind(this)
-    App.faye?.subscribe "/notifications/#{@attr.userId}", @onNotified.bind(this)
+    App.faye.subscribe "/notifications/#{@attr.userId}", @onNotified.bind(this)
 
   onModalOpen: (evt, data) ->
     if data.identifier is @attr.modalId

app/assets/javascripts/components/pictureUploader.js.coffee

@@ -1,4 +1,3 @@
-
 App.components.pictureUploader = ->
   _.extend App.components.uploader(), {
 

app/assets/javascripts/components/remoteForm.js.coffee

@@ -1,5 +1,8 @@
 App.components.remoteForm = ->
   initialize: ->
+    @bindEvents()
+
+  bindEvents: ->
     @on 'ajax:complete', @onAjaxComplete.bind(this)
     @on 'submit', @onSubmit.bind(this)
 
@@ -33,5 +36,3 @@ App.components.remoteForm = ->
   cleanErrors: ->
     @container.find('.error').remove()
     @container.find('.field_with_errors').removeClass('field_with_errors')
-
-

app/assets/javascripts/components/uploader.js.coffee

@@ -21,10 +21,13 @@ App.components.uploader = ->
 
   initialize: ->
     @render()
-    @on @attr.button, 'click', (evt) => @container.trigger 'click'
+    @bindEvents()
     @afterInitialize?()
     @startPlugin()
 
+  bindEvents: ->
+    @on @attr.button, 'click', (evt) => @container.trigger 'click'
+
   render: ->
     @attr.field.hide()
     @attr.field.after @attr.uploader

config/application.yml.sample

@@ -3,7 +3,7 @@ FIXED_SALT: "long and complicated salt goes here"
 FAYE_TOKEN: "token for faye authentication"
 
 development:
-  PORT: 3000
+  PORT: "3000"
   OAUTH_CALLBACK_HOST: "http://localhost:3000"
   FACEBOOK_KEY: ""
   FACEBOOK_SECRET: ""

config/initializers/konacha.rb

@@ -1,10 +1,24 @@
+Capybara.register_driver :slow_poltergeist do |app|
+  Capybara::Poltergeist::Driver.new(app, timeout: 2.minutes)
+end if defined?(Capybara)
+
+# https://github.com/jfirebaugh/konacha/issues/123
+Capybara.server do |app, port|
+  if Konacha.mode == :runner
+    require 'rack/handler/thin'
+    Rack::Handler::Thin.run(app, Port: port)
+  else
+    Capybara.run_default_server(app, port)
+  end
+end if defined?(Capybara)
+
 Konacha.configure do |config|
   require 'capybara/poltergeist'
 
   config.spec_dir     = "spec/javascripts"
   config.spec_matcher = /_spec\.|_test\./
   config.stylesheets  = %w(application)
 
-  config.driver       = :poltergeist
+  config.driver       = :slow_poltergeist
   # config.driver      = :selenium
 end if defined?(Konacha)

spec/javascripts/base_spec.js.coffee

@@ -2,8 +2,6 @@
 #= require helpers/test_components
 
 describe 'Base', ->
-  _base = __testing__.base
-
   describe 'mediator', ->
     it 'defines obj mediator', ->
       expect(App.mediator.obj).to.be.a 'object'
@@ -44,45 +42,36 @@ describe 'Base', ->
       expect(cb).to.be.called
       expect(cb).to.have.returned 'received ok'
 
-  describe 'setupContainer', ->
-    it 'initializes component', (done) ->
+  describe 'instantiate components', ->
+    it 'initializes component', ->
       container = $(JST['templates/test_component']())
-      _base.setupContainer(container)
+      _base.startComponents(container)
 
-      setTimeout( ->
-        component = App.components._instances['testComponent:test']
-        expect(component.init).to.be.called
-        expect(container.find('h1').html()).to.be.equal 'Hello'
-        done()
-      , 10)
+      component = App.components._instances['testComponent:test']
+      expect(component.initialize).to.be.called
+      expect(container.find('h1').html()).to.be.equal 'Hello'
 
-    it 'instantiates multi components', (done) ->
+    it 'instantiates multi components', ->
       container = $(JST['templates/multi_component']())
-      _base.setupContainer(container)
+      _base.startComponents(container)
+
+      component1 = App.components._instances['testComponent:multi']
+      component2 = App.components._instances['otherComponent:multi']
+      expect(component1.initialize).to.be.called
+      expect(component2.initialize).to.be.called
 
-      setTimeout( ->
-        component1 = App.components._instances['testComponent:multi']
-        component2 = App.components._instances['otherComponent:multi']
-        expect(component1.init).to.be.called
-        expect(component2.init).to.be.called
-        done()
-      , 20)
 
   describe 'startComponents', ->
       beforeEach ->
         $('body').html(JST['templates/start_components']())
 
-      it 'start all components on the body', (done) ->
+      it 'start all components on the body', ->
         _base.startComponents()
 
-        setTimeout( ->
-          component1 = App.components._instances['testComponent:test']
-          component2 = App.components._instances['otherComponent:other']
-          expect(component1.init).to.be.called
-          expect(component2.init).to.be.called
-          done()
-        , 20)
-
+        component1 = App.components._instances['testComponent:test']
+        component2 = App.components._instances['otherComponent:other']
+        expect(component1.initialize).to.be.called
+        expect(component2.initialize).to.be.called
 
       it 'listens to components:start event and receive a different root', ->
         spy App.components, 'testComponent', =>