Testing your jQuery in Rails

To setup your evergreen environment please look at http://coderwall.com/p/j8a1cw first.

With evergreen installed we can use jasmine-jquery to test our jquery specifiq code, is very simple just add a submodule to your project or download and version your own copy if you wish:

In your Rails project do:

git submodule add git://github.com/velesin/jasmine-jquery.git spec/javascripts/helpers/jasmine-jquery

If you followed the steps on my previous protip jasmine-jquery should now be loaded as a helper, and you can now write specs that look like this:

describe 'ui.js', ->

  describe 'lengthToggler', ->
    template 'length_toggler.html'

    beforeEach ->
      @element  = $ '#user_password'
      @selector = '#password_change'

      @element.bind 'keyup', -> lengthToggler( @, '#password_change' )

    it 'should toggle visibility on if value has length', ->
      event = jQuery.Event 'keyup'
      expect( @element.val().length ).toEqual 0

      @element.val 'foo'
      @element.trigger event

      expect( @element.val().length ).toEqual 3
      expect( $( @selector ) ).toBeVisible()

      @element.val ''
      @element.trigger event

      expect( $( @selector ) ).not.toBeVisible()