2012-03-13 17:29:42 +00:00
|
|
|
!SLIDE
|
|
|
|
<div id="intro">
|
|
|
|
<img src="assets/john-drinking-tea.png" />
|
|
|
|
<div>
|
|
|
|
<h1>Tea Time</h1>
|
|
|
|
<h2>A Beginner's Guide to JavaScript Testing using Jasmine</h2>
|
|
|
|
<h3>By John Bintz</h3>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Automated testing is important
|
|
|
|
|
2012-03-13 19:21:09 +00:00
|
|
|
!SLIDE
|
|
|
|
# Why is it important?
|
|
|
|
|
2012-03-13 17:29:42 +00:00
|
|
|
!SLIDE image-80-percent
|
|
|
|
<img src="assets/checklist.png" />
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Fortunately, we're beyond that nowadays
|
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
!SLIDE even-larger
|
2012-03-13 17:29:42 +00:00
|
|
|
``` ruby
|
|
|
|
describe MyCoolWebsite do
|
|
|
|
let(:website) { described_class.new }
|
|
|
|
|
|
|
|
describe '#cool_method' do
|
|
|
|
subject { website.cool_method }
|
|
|
|
|
|
|
|
let(:oh_yeah) { [ double_cool ] }
|
|
|
|
let(:double_cool) { 'double cool' }
|
|
|
|
|
|
|
|
before do
|
2012-03-24 14:20:56 +00:00
|
|
|
website.stubs(:whoa_cool).
|
|
|
|
returns(oh_yeah)
|
2012-03-13 17:29:42 +00:00
|
|
|
end
|
|
|
|
|
|
|
|
it { should == double_cool }
|
|
|
|
end
|
|
|
|
end
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# But there's more to web apps than Ruby nowadays...
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` html
|
|
|
|
<img src="normal.gif"
|
|
|
|
onmouseover="this.src='hover.gif'"
|
|
|
|
onmouseout="this.src='normal.gif'" />
|
|
|
|
```
|
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
!SLIDE even-larger
|
|
|
|
``` javascript
|
2012-03-13 17:29:42 +00:00
|
|
|
function showMyCoolTitle(title, length) {
|
|
|
|
if (length == null) { length = 0; }
|
|
|
|
|
2012-03-22 13:48:09 +00:00
|
|
|
if (length <= title.length) {
|
2012-03-24 14:20:56 +00:00
|
|
|
document.title =
|
|
|
|
title.substr(0, length);
|
|
|
|
|
2012-03-13 17:29:42 +00:00
|
|
|
length++;
|
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
setTimeout(function() {
|
|
|
|
showMyCoolTitle(title, length);
|
|
|
|
}, 75);
|
2012-03-13 17:29:42 +00:00
|
|
|
}
|
|
|
|
}
|
2012-03-24 14:20:56 +00:00
|
|
|
```
|
2012-03-13 17:29:42 +00:00
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
!SLIDE even-larger
|
|
|
|
``` javascript
|
2012-03-22 13:48:09 +00:00
|
|
|
window.onload = function() {
|
2012-03-24 14:20:56 +00:00
|
|
|
showMyCoolTitle(
|
|
|
|
"My cool website! Whoaaaaa!"
|
|
|
|
);
|
2012-03-22 13:48:09 +00:00
|
|
|
}
|
2012-03-13 17:29:42 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# jQuery
|
|
|
|
|
|
|
|
!SLIDE
|
2012-03-24 14:20:56 +00:00
|
|
|
# Backbone.js
|
2012-03-13 17:29:42 +00:00
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Sprockets and RequireJS
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Automated testing is important
|
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
!SLIDE even-larger
|
2012-03-13 17:29:42 +00:00
|
|
|
``` ruby
|
|
|
|
describe MyCoolWebsite do
|
|
|
|
let(:website) { described_class.new }
|
|
|
|
|
|
|
|
describe '#cool_method' do
|
|
|
|
subject { website.cool_method }
|
|
|
|
|
|
|
|
let(:oh_yeah) { [ double_cool ] }
|
|
|
|
let(:double_cool) { 'double cool' }
|
|
|
|
|
|
|
|
before do
|
2012-03-24 14:20:56 +00:00
|
|
|
website.stubs(:whoa_cool).
|
|
|
|
returns(oh_yeah)
|
2012-03-13 17:29:42 +00:00
|
|
|
end
|
|
|
|
|
|
|
|
it { should == double_cool }
|
|
|
|
end
|
|
|
|
end
|
|
|
|
```
|
|
|
|
|
2012-03-24 14:20:56 +00:00
|
|
|
!SLIDE even-larger
|
2012-03-13 17:29:42 +00:00
|
|
|
``` coffeescript
|
|
|
|
describe 'MyCoolWebsiteView', ->
|
|
|
|
beforeEach ->
|
2012-03-24 14:20:56 +00:00
|
|
|
@website = new MyCoolWebsiteView()
|
2012-03-13 17:29:42 +00:00
|
|
|
|
|
|
|
describe '#coolMethod', ->
|
|
|
|
doubleCool = 'double cool'
|
|
|
|
ohYeah = [ doubleCool ]
|
|
|
|
|
|
|
|
beforeEach ->
|
2012-03-24 14:20:56 +00:00
|
|
|
@website.whoaCool = -> ohYeah
|
2012-03-13 17:29:42 +00:00
|
|
|
|
|
|
|
it 'should be double cool', ->
|
2012-03-24 14:20:56 +00:00
|
|
|
expect(@website.coolMethod()).
|
|
|
|
toEqual(doubleCool)
|
2012-03-13 17:29:42 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Jasmine
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# BDD unit testing framework for JavaScript
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Platform independent
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Easily extended
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Very easy to learn!
|
|
|
|
|