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

(with the way I write tests, at least)

Very thorough

Sloooooow

Server-side dependency management

Sprockets

Server-based testing tools

• Jasmine gem
• jasmine-rails

Compiles assets for testing

Harder to automate

What I wanted is a JS testing tool that...

• Runs fast
• In a real browser so I can use jQuery & Backbone straight
• That supports modern Ruby webapp conventions
• Is built for continuous testing

jasmine-headless-webkit!

Installing

Qt 4.7 or above

johnbintz.github.com/jasmine-headless-webkit

gem install jasmine-headless-webkit

Gemfile

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

The Pivotal Labs jasmine gem

spec/javascripts/support/jasmine.yml

Supporting the Jasmine gem conventions

(easier to convert existing projects to JHW)

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/**/*' ]

JavaScript Load Paths

Sprockets and Jasmine load files differently

The Sprockets Way

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

The Jasmine Way

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

pivotal.github.com/jasmine

tryjasmine.com

For Backbone and Sinon.js

tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html

But once you know Jasmine...

Sprockets fun!

#= 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!

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'

Any gem that plugs into Sprockets is potentially usable

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"

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!