From f7ff19993915beb6d4d40ff2c1621bcb7c79ad1a Mon Sep 17 00:00:00 2001 From: John Bintz Date: Tue, 13 Dec 2011 16:43:37 -0500 Subject: [PATCH] static presentation --- index.html | 470 +++++++++++++++++++++-------------------------------- 1 file changed, 184 insertions(+), 286 deletions(-) diff --git a/index.html b/index.html index 7dd5678..fdc5106 100644 --- a/index.html +++ b/index.html @@ -82,11 +82,9 @@

jasmine-headless-webkit

-

The fastest way to test your browser-targeted JavaScript!

-
+

The fastest way to test your browser-targeted JavaScript!

-

JavaScript Testing

-
+

JavaScript Testing

Ajax-y apps are complex nowadays!

@@ -96,14 +94,11 @@
  • Tons of other JavaScripty things
  • Client/server communication
    • -
    -

    A lot can break!

    -
    +

    A lot can break!

    -

    Lots of different ways to test

    -
    +

    Lots of different ways to test

    Standalone JavaScript Engines

    @@ -113,17 +108,13 @@
  • Rhino
  • ...and others!
    • -
    -

    Great for testing JS Libraries

    -
    +

    Great for testing JS Libraries

    -

    Not so great in testing in "real" browsers

    -
    +

    Not so great in testing in "real" browsers

    -

    Fake DOMs aren't quite the same

    -
    +

    Fake DOMs aren't quite the same

    Integration testing tools

    @@ -132,29 +123,35 @@
  • Cucumber
  • Selenium
    • -
    -

    Very thorough

    -
    +

    Very thorough

    -

    Sloooooow

    -
    +

    Sloooooow

    -

    Server-side dependency management

    -
    +

    Server-side dependency management

    -

    Sprockets

    +

    Sprockets

    +
    +

    Server-based testing tools

    + +
      +
    • Jasmine gem
      • +
    • jasmine-rails
      • +
    -
    +
    +

    Compiles assets for testing

    +
    +

    Harder to automate

    +

    Continuous testing

    • Guard
    -
    -
    +

    A JS testing tool that...

      @@ -163,37 +160,26 @@
    • That supports modern Ruby webapp conventions
    • Is built for continuous testing
    - -
    -
    -

    Enter jasmine-headless-webkit

    +
    +

    Enter jasmine-headless-webkit

    -

    Installing

    -
    +

    Installing

    -

    Qt 4.7 or above

    -
    +

    Qt 4.7 or above

    -

    gem install jasmine-headless-webkit

    -
    +

    johnbintz.github.com/jasmine-headless-webkit

    -

    Gemfile

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

    gem install jasmine-headless-webkit

    Gemfile

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

    Rails 3.1 Application

    -
    +

    Rails 3.1 Application

    +

    Legacy Jasmine gem support

    +

    spec/javascripts/support/jasmine.yml

    src_dir: app/assets/javascripts
@@ -204,83 +190,60 @@ src_files: [ '**/*' ]
 
 spec_dir: spec/javascripts
 spec_files: [ '**/*[Ss]pec.*' ]
-helpers: [ 'helpers/**/*' ]
    -
    -
    -

    Load Paths

    -
    +helpers: [ 'helpers/**/*' ]
    -

    Sprockets and Jasmine load files differently

    -
    +

    JavaScript Load Paths

    -
    # ...somewhere in JHW...
-env = Sprockets::Environment.new
-
-env['application.js'].to_s #=> compiled JS
    -
    +

    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
    -
    -
    +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"
    -
    -
    +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

    -
    +class window.CatsView extends GlobalView
    -

    Jasmine loading?

    -
    -
    +

    The Jasmine Way

    + 
    src_dir: app/assets/javascripts
 src_files: [ '**/*' ]
 
 spec_dir: spec/javascripts
 spec_files: [ '**/*[Ss]pec.*' ]
-helpers: [ 'helpers/**/*' ]
    -
    -
    +helpers: [ 'helpers/**/*' ]
    +
    Dir["app/assets/javascripts/**/*"]
 Dir["spec/javascripts/**/*[Ss]pec.*"]
-Dir["spec/javascripts/helpers/**/*"]
    -
    +Dir["spec/javascripts/helpers/**/*"]
    +
    +

    JHW ensures that no file is loaded twice

    -

    JHW ensures that no file is loaded twice

    -
    -
    -

    Ensures Sprockets dependencies are loaded in the right order

    -
    +

    Ensures Sprockets dependencies are loaded in the right order

    -

    Writing Jasmine Tests

    -
    +

    Writing Jasmine Tests

    -

    RSpec?

    -
    +

    RSpec?

    -
    (2 + 2).should == 4
    -
    +
    (2 + 2).should == 4
    -

    Jasmine!

    -
    +

    Jasmine!

    -
    expect(2 + 2).toEqual(4)
    -
    +
    expect(2 + 2).toEqual(4)

    RSpec?

    @@ -294,8 +257,7 @@ Dir["spec/javascripts/helpers/**/*"] rendered.should have_css('#cats li') end -end -
    +end

    JavaScript?

    @@ -311,8 +273,7 @@ end expect($(view.el)).toContain('#cats li') }); -}); -
    +});

    CoffeeScript?

    @@ -325,153 +286,46 @@ end it 'should show cats', -> view.render() - expect($(view.el)).toContain('#cats li') -
    + expect($(view.el)).toContain('#cats li')
    -

    Plenty of resources to learn Jasmine itself

    -
    +

    Plenty of resources to learn Jasmine itself

    -

    tryjasmine.com

    -
    +

    tryjasmine.com

    -

    But once you know Jasmine...

    -
    +

    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 files

    - -
      -
    • app/assets/javascripts/application.js.coffee.erb
      • -
    - -
    -
    -

    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"
    -
    -
    +

    Sprockets fun!

    +

    Gems with JavaScript assets

    • jquery-rails
    • backbone-rails
    -
    -
    +
    #= require jquery
 $(->
     alert "this works"
-)
    -
    -
    -

    But now that we have Sprockets...

    -
    -
    -

    Jasmine libraries in gems!

    -
    -
    +)
    +
    +

    But now that we have Sprockets...

    +
    +

    Jasmine libraries in gems!

    +

    jasmine-spec-extras

    • jasmine-jquery
    • sinon
    -
    -
    +

    spec/javascripts/helpers/spec_helper.js.coffee

    #= require jasmine-jquery
-#= require sinon
    -
    -
    +#= require sinon
    +

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

    describe 'CatsView', ->
@@ -481,9 +335,8 @@ $(->
 
     view.$('button').trigger('click')
 
-    expect(spy.called).toBeTruthy()
    -
    -
    + expect(spy.called).toBeTruthy()
    +

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

    describe 'CatsView', ->
@@ -494,12 +347,10 @@ $(->
     view.$('button').trigger('click')
     @server.respond()
 
-    expect(view.cats).toEqual(data)
    -
    -
    -

    More Jasmine libraries will be added later!

    -
    -
    + expect(view.cats).toEqual(data)
    +
    +

    More Jasmine libraries will be added later!

    +

    Any of these folders in a loaded gem get added to the asset path

      @@ -507,17 +358,91 @@ $(->
    • lib/assets/javascripts
    • vendor/assets/javascripts
    +
    +
    +

    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 files

    + +
      +
    • app/assets/javascripts/application.js.coffee.erb
      • +
    +
    +

    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

    -

    Very exciting!

    -
    +

    spec/javascripts/helpers/application_stubs.js.coffee

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

    Very exciting!

    -

    PhantomJS

    -
    +

    PhantomJS

    -

    Standalone Qt WebKit widget with JavaScript control

    -
    +

    Standalone Qt WebKit widget with JavaScript control

    Jasmine runner source

    @@ -525,11 +450,9 @@ $(->
  • JHW - Filesystem
  • PhantomJS - (preferably) Server
    • -
    -

    Sinon.JS XHR Mocking can do a lot

    -
    +

    Sinon.JS XHR Mocking can do a lot

    Some things don't work

    @@ -537,32 +460,23 @@ $(->
  • IFRAME
  • Dynamically loading other JS
    • -
    -

    Use PhantomJS and guard-jasmine

    -
    +

    Use PhantomJS and guard-jasmine

    -

    Doesn't bother me!

    -
    +

    Doesn't bother me!

    -

    Debugging

    -
    +

    Debugging

    -

    Most problems are debuggable

    -
    +

    Most problems are debuggable

    -

    Qt WebKit widget has a big limitation...

    -
    +

    Qt WebKit widget has a big limitation...

    -

    No stack traces!

    -
    +

    No stack traces!

    -

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

    -
    +

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

    -

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

    -
    +

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

    Write out the runner file!

    @@ -570,52 +484,37 @@ $(->
  • --keep
  • runner_output
    • -
    -

    One-time shot?

    -
    +

    One-time shot?

    -

    jasmine-headless-webkit --keep

    -
    +

    jasmine-headless-webkit --keep

    -

    --runner-out runner.html

    -
    +

    --runner-out runner.html

    -

    open runner.html

    -
    +

    open runner.html

    -

    Write it all the time?

    -
    +

    Write it all the time?

    spec/javascripts/support/jasmine.yml

    -
    runner_output: "runner.html"
    -
    +
    runner_output: "runner.html"
    -

    Debugging Sprockets includes

    -
    +

    Debugging Sprockets includes

    -

    jasmine-headless-webkit -l

    -
    +

    jasmine-headless-webkit -l

    -

    List all files that JHW will include, in order

    -
    +

    List all files that JHW will include, in order

    -

    Conclusion

    -
    +

    Conclusion

    -

    For unit testing JavaScript

    -
    +

    For unit testing JavaScript

    -

    In a real browser

    -
    +

    In a real browser

    -

    While supporting Rails conventions

    -
    +

    While supporting Rails conventions

    -

    Try jasmine-headless-webkit!

    -
    +

    Try jasmine-headless-webkit!

    Learn more

    @@ -623,7 +522,6 @@ $(->
  • http://johnbintz.github.com/jasmine-headless-webkit/
  • http://tryjasmine.com/
    • -