jasmine-headless-webkit

The fastest way to test your browser-targeted JavaScript!

JavaScript Testing

A lot can break!

Lots of different ways to test

Great for testing JS Libraries

Not so great in testing in "real" browsers

Fake DOMs aren't quite the same

Very thorough

Sloooooow

Server-side dependency management

Sprockets

Enter jasmine-headless-webkit

Installing

Qt 4.7 or above

gem install jasmine-headless-webkit

Gemfile

gem 'jasmine-headless-webkit', '~> 0.8.0'

Gemfile

gem 'jasmine-headless-webkit', '~> 0.8.0'

gem 'guard'
gem 'guard-jasmine-headless-webkit'

Rails 3.1 Application

spec/javascripts/support/jasmine.yml

src_dir: app/assets/javascripts
asset_paths:
- lib/assets/javascripts
- vendor/assets/javascripts
src_files: [ '**/*' ]

spec_dir: spec/javascripts
spec_files: [ '**/*[Ss]pec.*' ]
helpers: [ 'helpers/**/*' ]

Load Paths

Sprockets and Jasmine load files differently

# ...somewhere in JHW...
env = Sprockets::Environment.new

env['application.js'].to_s #=> compiled JS

spec/javascripts/support/jasmine.yml

src_dir: app/assets/javascripts
asset_paths:
- lib/assets/javascripts
- vendor/assets/javascripts
spec_dir: spec/javascripts

# ...somewhere in JHW...
env.append_path "app/assets/javascripts"
env.append_path "lib/assets/javascripts"
env.append_path "vendor/assets/javascripts"
env.append_path "spec/javascripts"

//= require backbone/models/cat
//= require backbone/collections/cats
//= require backbone/views/global_view

class window.CatsView extends GlobalView

Sprockets loading

Jasmine loading?

src_dir: app/assets/javascripts
src_files: [ '**/*' ]

spec_dir: spec/javascripts
spec_files: [ '**/*[Ss]pec.*' ]
helpers: [ 'helpers/**/*' ]

Dir["app/assets/javascripts/**/*"]
Dir["spec/javascripts/**/*[Ss]pec.*"]
Dir["spec/javascripts/helpers/**/*"]

JHW ensures that no file is loaded twice

Ensures Sprockets dependencies are loaded in the right order

Writing Jasmine Tests

RSpec?

(2 + 2).should == 4

Jasmine!

expect(2 + 2).toEqual(4)

RSpec?

describe "CatsView" do
  before do
    @cats = [ stub ]
  end

  it 'should show cats' do
    render

    rendered.should have_css('#cats li')
  end
end

JavaScript?

describe("CatsView", function() {
  var view;

  beforeEach(function() {
    view = new CatsView({collection: [ {} ]})
  }):

  it('should show cats', function() {
    view.render()

    expect($(view.el)).toContain('#cats li')
  });
});

CoffeeScript?

describe "CatsView", ->
  view = null

  beforeEach ->
    view = new CatsView(collection: [ {} ])

  it 'should show cats', ->
    view.render()

    expect($(view.el)).toContain('#cats li')

Plenty of resources to learn Jasmine itself

tryjasmine.com

But once you know Jasmine...

Sprockets fun!

JST templates

templates/cats_view.jst.ejs

<h1>All the cats</h1>
<h2>Owned by <%= owner %></h2>
<ul id="#cats"></ul>
<h3>List generated: <%= date %></h3>

templates/cats_view.jst.hamljs

%h1 All the cats
%h2 Owned by #{owner}
%ul#cats
%h3 List generated: #{date}

(no highlighting for haml :( )

backbone/views/cats_view.js.coffee

#= require templates/cats_view.jst.hamljs

class window.CatsView extends Backbone.View
  template: JST['templates/cats_view']

  render: =>
    $(@el).html(this.template(this.templateData()))
    this

EJS and Eco come as part of Sprockets

JHW supports haml-sprockets for .hamljs

gem 'jasmine-headless-webkit', '~> 0.8.0'
gem 'haml-sprockets'

ERB integrates with the host application

Since it integrates...

Integration testing...

Not our domain!

.erb files are actively ignored

application.js.coffee.erb

window.Routes = <%= Routes.to_json %>
window.CatTypes = <%= CatType.all.to_json %>
window.DefaultCatName = <%= CatName::DEFAULT %>

Testing code that relies on these values?

Mock and stub it in a helper!

spec/javascripts/support/jasmine.yml

spec_dir: spec/javascripts
helpers: [ "helpers/**.*" ]

Helpers load after code-under-test, but before specs

spec/javascripts/helpers/application_stubs.js.coffee

window.Routes = { what: 'ever' }
window.CatTypes = [ 'cute', 'mean' ]
window.DefaultCatName = "Fluffy"

#= require jquery
$(->
    alert "this works"
)

But now that we have Sprockets...

Jasmine libraries in gems!

spec/javascripts/helpers/spec_helper.js.coffee

#= require jasmine-jquery
#= require sinon

spec/javascripts/backbone/views/cats_view_spec.js.coffee

describe 'CatsView', ->
  it 'should fire the action', ->
    spy = sinon.spy()
    view.bind('meow', spy)

    view.$('button').trigger('click')

    expect(spy.called).toBeTruthy()

More Jasmine libraries will be added later!

Very exciting!

PhantomJS

Standalone Qt WebKit widget with JavaScript control

Sinon.JS XHR Mocking can do a lot

Use PhantomJS and guard-jasmine

Doesn't bother me!

Debugging

Most problems are debuggable

Qt WebKit widget has a big limitation...

No stack traces!

Chrome, Safari, and other WebKit browsers implement their own stack traces

How do you debug problems like SyntaxErrors and other weird ones?

One-time shot?

jasmine-headless-webkit --keep

--runner-out runner.html

open runner.html

Write it all the time?

spec/javascripts/support/jasmine.yml

runner_output: "runner.html"

Debugging Sprockets includes

jasmine-headless-webkit -l

List all files that JHW will include, in order

Conclusion

For unit testing JavaScript

In a real browser

While supporting Rails conventions

Try jasmine-headless-webkit!