static presentation

This commit is contained in:
John Bintz 2011-12-13 16:43:37 -05:00
parent 8b7a31ec35
commit f7ff199939

View File

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