Testing Jammit’s packaged assets with Jasmine

Posted on May 19, 2011

In my new job, I’m trying to start things out right — behavior-driven, test-driven, “cutting-edge” tools (whatever the hell that means), etc. I’ve gone through the new Rspec book (review to come) and used Cucumber and Rspec on my Rails app. I recently re-did the front-end with Backbone.js (and I am ready to marry it) and now I’m testing the javascript with Jasmine and Sinon.js.

I was rolling happily along writing tests for my Backbone.js controllers, collections and models with Jasmine/Sinon.js. Then I got to views and hit a wall. Why? Well, I’m using Jammit to package my assets for production. This is cool and all for individual javascript files as I’m also adding them to my jasmine.yml config file. The problem is that Jammit is packaging my haml templates into a global JST object and I need to access those templates, and more importantly, that global JST object when testing my view code.

After finding one or two posts on the topic, but none that I could make work, I have come up with a solution. Basically, I’m having Jasmine run Jammit’s packager before it starts.

Head to your spec/javascripts/support/jasmine_config.rb file. Require Jammit and add to the Config class like so:

require 'jammit'
module Jasmine
  class Config

    Jammit.reload!
    Jammit.package!({ :config_path => Rails.root.join("config", "assets_test.yml")})

  end
end 

A couple notes:

Jammit.reload!

I’m forcing Jammit to reload here. By default Jammit caches your asset files and this forces it to reload everything everytime. By default, Jammit does this in development.


 Jammit.package!({ :config_path => Rails.root.join("config", "assets_test.yml")})

I’m sending Jammit a special config file here. Why? Well, in my real app it’s packaging and compressing ALL my javascript files, which is exactly what I want it to do. But while testing, I’d like to be able to debug those javascript files and have them individually included by Jasmine. My special assets_test.yml ONLY includes my jst templates.
Here it is: config/assets_test.yml

package_assets: on
template_function: Haml
template_extension: jst.haml
javascripts:
  app:
    - app/views/**/*.jst.haml

Now in my jasmine.yml file, I need to include the filepath to the packages assets. By default, Jammit packages these into public/assets/app.js.
spec/javascripts/support/jasmine.yml file:

# src_files
#
# Return an array of filepaths relative to src_dir to include before jasmine specs.
# Default: []

src_files:
    - spec/javascripts/support/sinon-1.1.0.js
    - spec/javascripts/support/jasmine-sinon.js
    - spec/javascripts/support/jasmine-jquery-1.2.0.js
    - spec/javascripts/fixtures/*.fixture.js
    - public/javascripts/jquery-1.6.min.js
    - public/javascripts/json2.js
    - public/javascripts/underscore.js
    - public/javascripts/backbone.js
    - public/javascripts/application.js
    - public/javascripts/jquery.dotimeout.js
    - public/javascripts/backbone.viewhelper.js
    - public/javasripts/haml.js
    - public/javascripts/models/*.js
    - public/javascripts/views/**/helper.js
    - public/javascripts/**/*.js
    - public/assets/app.js

...
The downsides of this solution:

  • Jammit has to reload and package everytime
  • I have a duplicate assets.yml file for testing
  • I’m duplicating my javascripts in jasmine.yml and in assets.yml

So far however, the upside — that it works — is outweighing this. Also, I didn’t notice much slowing down when running the tests although I haven’t done a full investigation.


4 Replies to "Testing Jammit's packaged assets with Jasmine"

  • Gabe Hollombe
    May 19, 2011 (8:18 pm)
    Reply

    I posted a response to my simple workflow involving guard, livereload, and jammit to Stack Overflow here: http://stackoverflow.com/questions/5833929/how-can-i-effectively-use-jasmine-to-test-javascript-assets-packaged-via-jammit/6066231#6066231

    • Rebecca
      May 19, 2011 (9:56 pm)
      Reply

      Thanks G!

      The above solution is a quick fix to write your test when starting, but I think Gabe’s solution is a better overflow workflow for the testing process. I’ll probably implement it soon.

  • david
    August 23, 2012 (5:48 pm)
    Reply

    super good stuff, this is working like a charm for me

  • Joe Corcoran
    October 22, 2012 (12:52 pm)
    Reply

    Hey, thanks for this post – it was really helpful.

    I’ve got something very similar running now, although I’ve managed to avoid repackaging the templates every time. Here’s my Jammit config (I’m using Mustache templates but that doesn’t matter):

    package_assets:     off
    package_path:       test-packages
    template_function:  Mustache.template
    template_extension: mustache
    
    javascripts:
      mustache:
        - public/javascripts/mustache.js
        - public/javascripts/mustache-template.js
      templates:
        - app/jst/**/*.mustache
    

    So because I’ve set the package_path, I can just require everything in that directory in jasmine.yml:

    src_files:
      - public/test-packages/*.js
    

    Sweet!


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.