static presentation
This commit is contained in:
John Bintz
parent
8b7a31ec35
commit
f7ff199939
470
index.html
470
index.html
@ -82,11 +82,9 @@
|
||||
<div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/1">
|
||||
<h1><code>jasmine-headless-webkit</code></h1>
|
||||
|
||||
<h2>The fastest way to test your browser-targeted JavaScript!</h2>
|
||||
</div>
|
||||
<h2>The fastest way to test your browser-targeted JavaScript!</h2></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/2">
|
||||
<h1>JavaScript Testing</h1>
|
||||
</div>
|
||||
<h1>JavaScript Testing</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/3">
|
||||
<h1>Ajax-y apps are complex nowadays!</h1>
|
||||
|
||||
@ -96,14 +94,11 @@
|
||||
<li>Tons of other JavaScripty things</li>
|
||||
<li>Client/server communication</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/4">
|
||||
<h1>A lot can break!</h1>
|
||||
</div>
|
||||
<h1>A lot can break!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/5">
|
||||
<h1>Lots of different ways to test</h1>
|
||||
</div>
|
||||
<h1>Lots of different ways to test</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/6">
|
||||
<h1>Standalone JavaScript Engines</h1>
|
||||
|
||||
@ -113,17 +108,13 @@
|
||||
<li>Rhino</li>
|
||||
<li>...and others!</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/7">
|
||||
<h1>Great for testing JS Libraries</h1>
|
||||
</div>
|
||||
<h1>Great for testing JS Libraries</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/8">
|
||||
<h1>Not so great in testing in "real" browsers</h1>
|
||||
</div>
|
||||
<h1>Not so great in testing in "real" browsers</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/9">
|
||||
<h1>Fake DOMs aren't quite the same</h1>
|
||||
</div>
|
||||
<h1>Fake DOMs aren't quite the same</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/10">
|
||||
<h1>Integration testing tools</h1>
|
||||
|
||||
@ -132,29 +123,35 @@
|
||||
<li>Cucumber</li>
|
||||
<li>Selenium</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/11">
|
||||
<h1>Very thorough</h1>
|
||||
</div>
|
||||
<h1>Very thorough</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/12">
|
||||
<h1>Sloooooow</h1>
|
||||
</div>
|
||||
<h1>Sloooooow</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/13">
|
||||
<h1>Server-side dependency management</h1>
|
||||
</div>
|
||||
<h1>Server-side dependency management</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/14">
|
||||
<h1>Sprockets</h1>
|
||||
<h1>Sprockets</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/15">
|
||||
<h1>Server-based testing tools</h1>
|
||||
|
||||
<ul>
|
||||
<li>Jasmine gem</li>
|
||||
<li><code>jasmine-rails</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/15">
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/16">
|
||||
<h1>Compiles assets for testing</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/17">
|
||||
<h1>Harder to automate</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/18">
|
||||
<h1>Continuous testing</h1>
|
||||
|
||||
<ul>
|
||||
<li>Guard</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/16">
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/01_intro/19">
|
||||
<h1>A JS testing tool that...</h1>
|
||||
|
||||
<ul>
|
||||
@ -163,37 +160,26 @@
|
||||
<li>That supports modern Ruby webapp conventions</li>
|
||||
<li>Is built for continuous testing</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/17">
|
||||
<h1>Enter <code>jasmine-headless-webkit</code></h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/01_intro/20">
|
||||
<h1>Enter <code>jasmine-headless-webkit</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/1">
|
||||
<h1>Installing</h1>
|
||||
</div>
|
||||
<h1>Installing</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/2">
|
||||
<h1>Qt 4.7 or above</h1>
|
||||
</div>
|
||||
<h1>Qt 4.7 or above</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/3">
|
||||
<h1><code>gem install jasmine-headless-webkit</code></h1>
|
||||
</div>
|
||||
<h1>johnbintz.github.com/jasmine-headless-webkit</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/4">
|
||||
<h1>Gemfile</h1>
|
||||
|
||||
<pre class="sh_ruby"><code>gem 'jasmine-headless-webkit', '~> 0.8.0'</code></pre>
|
||||
</div>
|
||||
<h1><code>gem install jasmine-headless-webkit</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/5">
|
||||
<h1>Gemfile</h1>
|
||||
|
||||
<pre class="sh_ruby"><code>gem 'jasmine-headless-webkit', '~> 0.8.0'
|
||||
|
||||
gem 'guard'
|
||||
gem 'guard-jasmine-headless-webkit'</code></pre>
|
||||
</div>
|
||||
<pre class="sh_ruby"><code>gem 'jasmine-headless-webkit', '~> 0.8.0'</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/6">
|
||||
<h1>Rails 3.1 Application</h1>
|
||||
</div>
|
||||
<h1>Rails 3.1 Application</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/7">
|
||||
<h1>Legacy Jasmine gem support</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/8">
|
||||
<h1>spec/javascripts/support/jasmine.yml</h1>
|
||||
|
||||
<pre class="sh_yaml"><code>src_dir: app/assets/javascripts
|
||||
@ -204,83 +190,60 @@ src_files: [ '**/*' ]
|
||||
|
||||
spec_dir: spec/javascripts
|
||||
spec_files: [ '**/*[Ss]pec.*' ]
|
||||
helpers: [ 'helpers/**/*' ]</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/8">
|
||||
<h1>Load Paths</h1>
|
||||
</div>
|
||||
helpers: [ 'helpers/**/*' ]</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/9">
|
||||
<h1>Sprockets and Jasmine load files differently</h1>
|
||||
</div>
|
||||
<h1>JavaScript Load Paths</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/10">
|
||||
<pre class="sh_ruby"><code># ...somewhere in JHW...
|
||||
env = Sprockets::Environment.new
|
||||
|
||||
env['application.js'].to_s #=> compiled JS</code></pre>
|
||||
</div>
|
||||
<h1>Sprockets and Jasmine load files differently</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/11">
|
||||
<h1>The Sprockets Way</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/12">
|
||||
<h1>spec/javascripts/support/jasmine.yml</h1>
|
||||
|
||||
<pre class="sh_yaml"><code>src_dir: app/assets/javascripts
|
||||
asset_paths:
|
||||
- lib/assets/javascripts
|
||||
- vendor/assets/javascripts
|
||||
spec_dir: spec/javascripts</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/12">
|
||||
spec_dir: spec/javascripts</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/13">
|
||||
<pre class="sh_ruby"><code># ...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"</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/13">
|
||||
env.append_path "spec/javascripts"</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/14">
|
||||
<pre class="sh_javascript"><code>//= require backbone/models/cat
|
||||
//= require backbone/collections/cats
|
||||
//= require backbone/views/global_view
|
||||
|
||||
class window.CatsView extends GlobalView</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/14">
|
||||
<h1>Sprockets loading</h1>
|
||||
</div>
|
||||
class window.CatsView extends GlobalView</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/15">
|
||||
<h1>Jasmine loading?</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/16">
|
||||
<h1>The Jasmine Way</h1>
|
||||
|
||||
<pre class="sh_yaml"><code>src_dir: app/assets/javascripts
|
||||
src_files: [ '**/*' ]
|
||||
|
||||
spec_dir: spec/javascripts
|
||||
spec_files: [ '**/*[Ss]pec.*' ]
|
||||
helpers: [ 'helpers/**/*' ]</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/17">
|
||||
helpers: [ 'helpers/**/*' ]</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/16">
|
||||
<pre class="sh_ruby"><code>Dir["app/assets/javascripts/**/*"]
|
||||
Dir["spec/javascripts/**/*[Ss]pec.*"]
|
||||
Dir["spec/javascripts/helpers/**/*"]</code></pre>
|
||||
</div>
|
||||
Dir["spec/javascripts/helpers/**/*"]</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/17">
|
||||
<h1>JHW ensures that no file is loaded twice</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/18">
|
||||
<h1>JHW ensures that no file is loaded twice</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/02_install/19">
|
||||
<h1>Ensures Sprockets dependencies are loaded in the right order</h1>
|
||||
</div>
|
||||
<h1>Ensures Sprockets dependencies are loaded in the right order</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/1">
|
||||
<h1>Writing Jasmine Tests</h1>
|
||||
</div>
|
||||
<h1>Writing Jasmine Tests</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/2">
|
||||
<h1>RSpec?</h1>
|
||||
</div>
|
||||
<h1>RSpec?</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/3">
|
||||
<pre class="sh_ruby"><code>(2 + 2).should == 4</code></pre>
|
||||
</div>
|
||||
<pre class="sh_ruby"><code>(2 + 2).should == 4</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/4">
|
||||
<h1>Jasmine!</h1>
|
||||
</div>
|
||||
<h1>Jasmine!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/5">
|
||||
<pre class="sh_javascript"><code>expect(2 + 2).toEqual(4)</code></pre>
|
||||
</div>
|
||||
<pre class="sh_javascript"><code>expect(2 + 2).toEqual(4)</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/6">
|
||||
<h1>RSpec?</h1>
|
||||
|
||||
@ -294,8 +257,7 @@ Dir["spec/javascripts/helpers/**/*"]</code></pre>
|
||||
|
||||
rendered.should have_css('#cats li')
|
||||
end
|
||||
end</code></pre>
|
||||
</div>
|
||||
end</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/7">
|
||||
<h1>JavaScript?</h1>
|
||||
|
||||
@ -311,8 +273,7 @@ end</code></pre>
|
||||
|
||||
expect($(view.el)).toContain('#cats li')
|
||||
});
|
||||
});</code></pre>
|
||||
</div>
|
||||
});</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/8">
|
||||
<h1>CoffeeScript?</h1>
|
||||
|
||||
@ -325,153 +286,46 @@ end</code></pre>
|
||||
it 'should show cats', ->
|
||||
view.render()
|
||||
|
||||
expect($(view.el)).toContain('#cats li')</code></pre>
|
||||
</div>
|
||||
expect($(view.el)).toContain('#cats li')</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/9">
|
||||
<h1>Plenty of resources to learn Jasmine itself</h1>
|
||||
</div>
|
||||
<h1>Plenty of resources to learn Jasmine itself</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/10">
|
||||
<h1>tryjasmine.com</h1>
|
||||
</div>
|
||||
<h1>tryjasmine.com</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/03_jasmine/11">
|
||||
<h1>But once you know Jasmine...</h1>
|
||||
</div>
|
||||
<h1>But once you know Jasmine...</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/1">
|
||||
<h1>Sprockets fun!</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/2">
|
||||
<h1>JST templates</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/3">
|
||||
<h1>templates/cats_view.jst.ejs</h1>
|
||||
|
||||
<pre class="sh_html"><code><h1>All the cats</h1>
|
||||
<h2>Owned by <%= owner %></h2>
|
||||
<ul id="#cats"></ul>
|
||||
<h3>List generated: <%= date %></h3></code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/4">
|
||||
<h1>templates/cats_view.jst.hamljs</h1>
|
||||
|
||||
<pre class="sh_haml"><code>%h1 All the cats
|
||||
%h2 Owned by #{owner}
|
||||
%ul#cats
|
||||
%h3 List generated: #{date}</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/5">
|
||||
<h2>(no highlighting for haml :( )</h2>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/6">
|
||||
<h1>backbone/views/cats_view.js.coffee</h1>
|
||||
|
||||
<pre class="sh_coffeescript"><code>#= 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</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/7">
|
||||
<h1>EJS and Eco come as part of Sprockets</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/8">
|
||||
<h1>JHW supports <code>haml-sprockets</code> for <code>.hamljs</code></h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/9">
|
||||
<pre class="sh_ruby"><code>gem 'jasmine-headless-webkit', '~> 0.8.0'
|
||||
gem 'haml-sprockets'</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/10">
|
||||
<h1>ERB files</h1>
|
||||
|
||||
<ul>
|
||||
<li>app/assets/javascripts/application.js.coffee.erb</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/11">
|
||||
<h1>ERB integrates with the host application</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/12">
|
||||
<h1>Since it integrates...</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/13">
|
||||
<h1>Integration testing...</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/14">
|
||||
<h1>Not our domain!</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/15">
|
||||
<h1><code>.erb</code> files are actively ignored</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/16">
|
||||
<h1>application.js.coffee.erb</h1>
|
||||
|
||||
<pre class="sh_coffeescript"><code>window.Routes = <%= Routes.to_json %>
|
||||
window.CatTypes = <%= CatType.all.to_json %>
|
||||
window.DefaultCatName = <%= CatName::DEFAULT %></code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/17">
|
||||
<h1>Testing code that relies on these values?</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/18">
|
||||
<h1>Mock and stub it in a helper!</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/19">
|
||||
<h1>spec/javascripts/support/jasmine.yml</h1>
|
||||
|
||||
<pre class="sh_yaml"><code>spec_dir: spec/javascripts
|
||||
helpers: [ "helpers/**.*" ]</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/20">
|
||||
<h1>Helpers load after code-under-test, but before specs</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/21">
|
||||
<h2>spec/javascripts/helpers/application_stubs.js.coffee</h2>
|
||||
|
||||
<pre class="sh_coffeescript"><code>window.Routes = { what: 'ever' }
|
||||
window.CatTypes = [ 'cute', 'mean' ]
|
||||
window.DefaultCatName = "Fluffy"</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/22">
|
||||
<h1>Sprockets fun!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/2">
|
||||
<h1>Gems with JavaScript assets</h1>
|
||||
|
||||
<ul>
|
||||
<li><code>jquery-rails</code></li>
|
||||
<li><code>backbone-rails</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/23">
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/3">
|
||||
<pre class="sh_coffeescript"><code>#= require jquery
|
||||
$(->
|
||||
alert "this works"
|
||||
)</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/24">
|
||||
<h1>But now that we have Sprockets...</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/25">
|
||||
<h1>Jasmine libraries in gems!</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/26">
|
||||
)</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/4">
|
||||
<h1>But now that we have Sprockets...</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/5">
|
||||
<h1>Jasmine libraries in gems!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/6">
|
||||
<h1><code>jasmine-spec-extras</code></h1>
|
||||
|
||||
<ul>
|
||||
<li><code>jasmine-jquery</code></li>
|
||||
<li><code>sinon</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/27">
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/7">
|
||||
<h2>spec/javascripts/helpers/spec_helper.js.coffee</h2>
|
||||
|
||||
<pre class="sh_coffeescript"><code>#= require jasmine-jquery
|
||||
#= require sinon</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/28">
|
||||
#= require sinon</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/8">
|
||||
<h2>spec/javascripts/backbone/views/cats_view_spec.js.coffee</h2>
|
||||
|
||||
<pre class="sh_coffeescript"><code>describe 'CatsView', ->
|
||||
@ -481,9 +335,8 @@ $(->
|
||||
|
||||
view.$('button').trigger('click')
|
||||
|
||||
expect(spy.called).toBeTruthy()</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content smaller" ref="intro/04_sprockets/29">
|
||||
expect(spy.called).toBeTruthy()</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content smaller" ref="intro/04_sprockets/9">
|
||||
<h2>spec/javascripts/backbone/views/cats_view_spec.js.coffee</h2>
|
||||
|
||||
<pre class="sh_coffeescript"><code>describe 'CatsView', ->
|
||||
@ -494,12 +347,10 @@ $(->
|
||||
view.$('button').trigger('click')
|
||||
@server.respond()
|
||||
|
||||
expect(view.cats).toEqual(data)</code></pre>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/30">
|
||||
<h1>More Jasmine libraries will be added later!</h1>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/31">
|
||||
expect(view.cats).toEqual(data)</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/10">
|
||||
<h1>More Jasmine libraries will be added later!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/11">
|
||||
<h1>Any of these folders in a loaded gem get added to the asset path</h1>
|
||||
|
||||
<ul>
|
||||
@ -507,17 +358,91 @@ $(->
|
||||
<li>lib/assets/javascripts</li>
|
||||
<li>vendor/assets/javascripts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/12">
|
||||
<h1>JST templates</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/13">
|
||||
<h1>templates/cats_view.jst.ejs</h1>
|
||||
|
||||
<pre class="sh_html"><code><h1>All the cats</h1>
|
||||
<h2>Owned by <%= owner %></h2>
|
||||
<ul id="#cats"></ul>
|
||||
<h3>List generated: <%= date %></h3></code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/14">
|
||||
<h1>templates/cats_view.jst.hamljs</h1>
|
||||
|
||||
<pre class="sh_haml"><code>%h1 All the cats
|
||||
%h2 Owned by #{owner}
|
||||
%ul#cats
|
||||
%h3 List generated: #{date}</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/15">
|
||||
<h2>(no highlighting for haml :( )</h2></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/16">
|
||||
<h1>backbone/views/cats_view.js.coffee</h1>
|
||||
|
||||
<pre class="sh_coffeescript"><code>#= 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</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/17">
|
||||
<h1>EJS and Eco come as part of Sprockets</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/18">
|
||||
<h1>JHW supports <code>haml-sprockets</code> for <code>.hamljs</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/19">
|
||||
<pre class="sh_ruby"><code>gem 'jasmine-headless-webkit', '~> 0.8.0'
|
||||
gem 'haml-sprockets'</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/20">
|
||||
<h1>Any gem that plugs into Sprockets is potentially usable</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/04_sprockets/21">
|
||||
<h1>ERB files</h1>
|
||||
|
||||
<ul>
|
||||
<li>app/assets/javascripts/application.js.coffee.erb</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/22">
|
||||
<h1>ERB integrates with the host application</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/23">
|
||||
<h1>Since it integrates...</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/24">
|
||||
<h1>Integration testing...</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/25">
|
||||
<h1>Not our domain!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/26">
|
||||
<h1><code>.erb</code> files are actively ignored</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/27">
|
||||
<h1>application.js.coffee.erb</h1>
|
||||
|
||||
<pre class="sh_coffeescript"><code>window.Routes = <%= Routes.to_json %>
|
||||
window.CatTypes = <%= CatType.all.to_json %>
|
||||
window.DefaultCatName = <%= CatName::DEFAULT %></code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/28">
|
||||
<h1>Testing code that relies on these values?</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/29">
|
||||
<h1>Mock and stub it in a helper!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/30">
|
||||
<h1>spec/javascripts/support/jasmine.yml</h1>
|
||||
|
||||
<pre class="sh_yaml"><code>spec_dir: spec/javascripts
|
||||
helpers: [ "helpers/**.*" ]</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/31">
|
||||
<h1>Helpers load after code-under-test, but before specs</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/32">
|
||||
<h1>Very exciting!</h1>
|
||||
</div>
|
||||
<h2>spec/javascripts/helpers/application_stubs.js.coffee</h2>
|
||||
|
||||
<pre class="sh_coffeescript"><code>window.Routes = { what: 'ever' }
|
||||
window.CatTypes = [ 'cute', 'mean' ]
|
||||
window.DefaultCatName = "Fluffy"</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/04_sprockets/33">
|
||||
<h1>Very exciting!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/05_phantomjs/1">
|
||||
<h1>PhantomJS</h1>
|
||||
</div>
|
||||
<h1>PhantomJS</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/05_phantomjs/2">
|
||||
<h1>Standalone Qt WebKit widget with JavaScript control</h1>
|
||||
</div>
|
||||
<h1>Standalone Qt WebKit widget with JavaScript control</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/05_phantomjs/3">
|
||||
<h1>Jasmine runner source</h1>
|
||||
|
||||
@ -525,11 +450,9 @@ $(->
|
||||
<li>JHW - Filesystem</li>
|
||||
<li>PhantomJS - (preferably) Server</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/05_phantomjs/4">
|
||||
<h1>Sinon.JS XHR Mocking can do a lot</h1>
|
||||
</div>
|
||||
<h1>Sinon.JS XHR Mocking can do a lot</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/05_phantomjs/5">
|
||||
<h1>Some things don't work</h1>
|
||||
|
||||
@ -537,32 +460,23 @@ $(->
|
||||
<li>IFRAME</li>
|
||||
<li>Dynamically loading other JS</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/05_phantomjs/6">
|
||||
<h1>Use PhantomJS and <code>guard-jasmine</code></h1>
|
||||
</div>
|
||||
<h1>Use PhantomJS and <code>guard-jasmine</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/05_phantomjs/7">
|
||||
<h1>Doesn't bother me!</h1>
|
||||
</div>
|
||||
<h1>Doesn't bother me!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/1">
|
||||
<h1>Debugging</h1>
|
||||
</div>
|
||||
<h1>Debugging</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/2">
|
||||
<h1>Most problems are debuggable</h1>
|
||||
</div>
|
||||
<h1>Most problems are debuggable</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/3">
|
||||
<h1>Qt WebKit widget has a big limitation...</h1>
|
||||
</div>
|
||||
<h1>Qt WebKit widget has a big limitation...</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/4">
|
||||
<h1>No stack traces!</h1>
|
||||
</div>
|
||||
<h1>No stack traces!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/5">
|
||||
<h1>Chrome, Safari, and other WebKit browsers implement their own stack traces</h1>
|
||||
</div>
|
||||
<h1>Chrome, Safari, and other WebKit browsers implement their own stack traces</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/6">
|
||||
<h1>How do you debug problems like SyntaxErrors and other weird ones?</h1>
|
||||
</div>
|
||||
<h1>How do you debug problems like SyntaxErrors and other weird ones?</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/06_debugging/7">
|
||||
<h1>Write out the runner file!</h1>
|
||||
|
||||
@ -570,52 +484,37 @@ $(->
|
||||
<li><code>--keep</code></li>
|
||||
<li><code>runner_output</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/8">
|
||||
<h1>One-time shot?</h1>
|
||||
</div>
|
||||
<h1>One-time shot?</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/9">
|
||||
<h1><code>jasmine-headless-webkit --keep</code></h1>
|
||||
</div>
|
||||
<h1><code>jasmine-headless-webkit --keep</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/10">
|
||||
<h1><code>--runner-out runner.html</code></h1>
|
||||
</div>
|
||||
<h1><code>--runner-out runner.html</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/11">
|
||||
<h1><code>open runner.html</code></h1>
|
||||
</div>
|
||||
<h1><code>open runner.html</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/12">
|
||||
<h1>Write it all the time?</h1>
|
||||
</div>
|
||||
<h1>Write it all the time?</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/13">
|
||||
<h2>spec/javascripts/support/jasmine.yml</h2>
|
||||
|
||||
<pre class="sh_yaml"><code>runner_output: "runner.html"</code></pre>
|
||||
</div>
|
||||
<pre class="sh_yaml"><code>runner_output: "runner.html"</code></pre></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/14">
|
||||
<h1>Debugging Sprockets includes</h1>
|
||||
</div>
|
||||
<h1>Debugging Sprockets includes</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/15">
|
||||
<h1><code>jasmine-headless-webkit -l</code></h1>
|
||||
</div>
|
||||
<h1><code>jasmine-headless-webkit -l</code></h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/06_debugging/16">
|
||||
<h1>List all files that JHW will include, in order</h1>
|
||||
</div>
|
||||
<h1>List all files that JHW will include, in order</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/07_conclusion/1">
|
||||
<h1>Conclusion</h1>
|
||||
</div>
|
||||
<h1>Conclusion</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/07_conclusion/2">
|
||||
<h1>For unit testing JavaScript</h1>
|
||||
</div>
|
||||
<h1>For unit testing JavaScript</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/07_conclusion/3">
|
||||
<h1>In a real browser</h1>
|
||||
</div>
|
||||
<h1>In a real browser</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/07_conclusion/4">
|
||||
<h1>While supporting Rails conventions</h1>
|
||||
</div>
|
||||
<h1>While supporting Rails conventions</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content" ref="intro/07_conclusion/5">
|
||||
<h1>Try <code>jasmine-headless-webkit</code>!</h1>
|
||||
</div>
|
||||
<h1>Try <code>jasmine-headless-webkit</code>!</h1></div>
|
||||
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="intro/07_conclusion/6">
|
||||
<h1>Learn more</h1>
|
||||
|
||||
@ -623,7 +522,6 @@ $(->
|
||||
<li>http://johnbintz.github.com/jasmine-headless-webkit/</li>
|
||||
<li>http://tryjasmine.com/</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user