+ 
+
+
+
+
+
+
+
+
+
+
+
Automated testing is important
+ +
+
+
Fortunately, we're beyond that nowadays
+ +
+
+
+
+
+
+
require 'spec_helper'
+
+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
+ website.stubs(:whoa_cool).returns(oh_yeah)
+ end
+
+ it { should == double_cool }
+ end
+end
+
+
+
But there's more to web apps than Ruby nowadays...
+ +
+
+
+
+
+
+
<img src="normal.gif"
+ onmouseover="this.src='hover.gif'"
+ onmouseout="this.src='normal.gif'" />
+
+
+
+
+
+
+
+
<script type="text/javascript">
+function showMyCoolTitle(title, length) {
+ if (length == null) { length = 0; }
+
+ if (length < title.length) {
+ document.title = title.substr(0, length);
+ length++;
+
+ setTimeout(function() { showMyCoolTitle(title, length); }, 75);
+ }
+}
+
+window.onload = function() { showMyCoolTitle("My cool website! Whoaaaaa!"); }
+</script>
+
+
+
jQuery
+ +
+
Backbone
+ +
+
Sprockets and RequireJS
+ +
+
Automated testing is important
+ +
+
+
+
+
+
+
require 'spec_helper'
+
+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
+ website.stubs(:whoa_cool).returns(oh_yeah)
+ end
+
+ it { should == double_cool }
+ end
+end
+
+
+
+
+
+
+
+
describe 'MyCoolWebsiteView', ->
+ website = null
+
+ beforeEach ->
+ website = new MyCoolWebsiteView()
+
+ describe '#coolMethod', ->
+ doubleCool = 'double cool'
+ ohYeah = [ doubleCool ]
+
+ beforeEach ->
+ website.whoaCool = -> ohYeah
+
+ it 'should be double cool', ->
+ expect(website.coolMethod()).toEqual(doubleCool)
+
+
+
Jasmine
+ +
+
BDD unit testing framework for JavaScript
+ +
+
Platform independent
+ +
+
Easily extended
+ +
+
Very easy to learn!
+ +
+
Follow along!
+ +
+
No need to install anything right now
+ +
+
tryjasmine.com
+ +
+
Specs on the left
+ +
+
Code under test on the right
+ +
+
Write code in CoffeeScript
+ +
+
Ready?
+ +
+
Let's go!
+ +
+
+
+
describe
+
+
+
Describes a thing or a behavior of a thing
+ +
+
Let's describe...
+ +
+
+
+
+
+
+
+
describe 'Cat', ->
+ # cat behavior descriptions go here
+
+
+
Something that cats do...
+ +
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ # description of the meow behavior goes here
+
+
+
+
+
+
+
+
John behavior #1
+ +Use Ruby-style indicators for instance- and class-level methods, even in Jasmine
+ +describe 'John', ->
+ describe 'spec definitions', ->
+ it 'should look like you did it in RSpec', ->
+
+
+
Describe how we expect a cat to meow
+ +
+
+
+
it
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ it 'should meow correctly', ->
+ # expectation of a cat meowing
+
+
+
We have the description...
+ +
+
Now let's add the expectations!
+ +
+
+
+
expect
+
+
+
What should we get as an output?
+ +
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ it 'should meow correctly', ->
+ expect(cat.meow()).toEqual('meow')
+
+
+
Wait, we need a cat.
+ +
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ it 'should meow correctly', ->
+ cat = new Cat()
+
+ expect(cat.meow()).toEqual('meow')
+
+
+
+
+
+
+
+
# code-under-test
+
+class this.Cat
+ meow: ->
+
+
+
+
+
+
+
+
// safety wrapper to prevent global pollution
+(function() {
+ // ...but we want to pollute the Cat class
+ this.Cat = (function() {
+ function Cat() {}
+ Cat.prototype.meow = function() {};
+ return Cat;
+ })();
+})(this) // this is window in a browser
+
+
+
Run it!
+ +
+
+
+
+
+
+
1 spec, 1 failure
+
+Expected undefined to equal 'meow'.
+
+
+
Make it meow!
+ +
+
+
+
+
+
+
class this.Cat
+ meow: -> "meow"
+
+
+
+
+
+
+
+
1 spec, 0 failures
+
+
+
Here's what you should have meow...
+ +
+
+
+
+
+
+
# spec
+
+describe 'Cat', ->
+ describe '#meow', ->
+ it 'should meow correctly', ->
+ expect(cat.meow()).toEqual('meow')
+
+
+
+
+
+
# code-under-test
+
+class this.Cat
+ meow: -> "meow"
+
+
+
What if the cat meows differently based on certain states?
+ +
+
+
+Nested
+
+
Nested describe
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ describe 'hungry', ->
+ # Cat#meow expectation for when the cat is hungry
+
+ describe 'going to the vet', ->
+ # Cat#meow expectation for when the cat knows it's vet time
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ describe 'hungry', ->
+ it 'should be a mournful meow', ->
+ cat = new Cat()
+ cat.state = -> Cat.HUNGRY # ...just like cat.stubs(:state)
+
+ expect(cat.meow()).toEqual("meeeyaow")
+
+ describe 'going to the vet', ->
+ it 'should be an evil meow', ->
+ cat = new Cat()
+ cat.state = -> Cat.VET_PSYCHIC # ...just like the one above
+
+ expect(cat.meow()).toEqual("raowwww")
+
+
+
+
+
+
+
+
+
cat = new Cat()
+
+
+
+
+
+
+
+
before do
+ @cat = Cat.new
+end
+
+it 'should be a mournful meow' do
+ @cat.stubs(:state).returns(Cat::HUNGRY)
+
+ @cat.meow.should == "meeyaow"
+end
+
+
+
+
+
+
+
+
before -> it -> after
+
+
+
+
+
+
+
+
before do
+ @instance_variable = "yes"
+end
+
+it "should be in the same context as the before block" do
+ @instance_variable.should == "yes"
+end
+
+
+
+
+
+
+
+
beforeEach -> it -> afterEach
+
+
+
+
+
+
+
+
beforeEach ->
+ @instanceVariable = "yes"
+
+it "should be in the same context", ->
+ expect(@instanceVariable).toEqual("yes")
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ beforeEach ->
+ @cat = new Cat()
+
+ describe 'hungry', ->
+ it 'should be a mournful meow', ->
+ @cat.state = -> Cat.HUNGRY
+
+ expect(@cat.meow()).toEqual("meeeyaow")
+
+ describe 'going to the vet', ->
+ it 'should be an evil meow', ->
+ @cat.state = -> Cat.VET_PSYCHIC
+
+ expect(@cat.meow()).toEqual("raowwww")
+
+
+
A little semantics game...
+ +
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ describe 'hungry', ->
+ # cat codes
+
+ describe 'going to the vet', ->
+ # moar cat codes
+
+
+
This works, but it can be clearer
+ +
+
+
+
+
+
+
describe Cat do
+ describe '#meow' do
+ describe 'hungry' do
+ # cat codes
+ end
+
+ describe 'going to the vet' do
+ # moar cat codes
+ end
+ end
+end
+
+
+
+
+
context
+
+
+
Description of different states for a test
+ +
+
+
+
+
+
+
alias :context :describe
+
+
+
+
+
+
+
+
describe Cat do
+ let(:cat) { described_class.new }
+
+ # save describe for things or behaviors...
+ describe '#meow' do
+ subject { cat.meow }
+
+ # use context to describe states
+ context 'hungry' do
+ # cat codes
+ end
+
+ context 'going to the vet' do
+ # moar cat codes
+ end
+ end
+end
+
+
+Jasmine doesn't have
+
+
Jasmine doesn't have context
+
+
+
However...
+ +
+
+
+
+
+
+
this.context = this.describe
+
+
+
+
+
+
+
+
this.context = this.describe
+
+describe 'Cat', ->
+ describe '#meow', ->
+ context 'hungry', ->
+ # cat codes
+
+ context 'going to the vet', ->
+ # moar cat codes
+
+
+
+
+
+
+
+
this.context = this.describe
+
+describe 'Cat', ->
+ describe '#meow', ->
+ beforeEach ->
+ @cat = new Cat()
+
+ context 'hungry', ->
+ it 'should be a mournful meow', ->
+ @cat.state = -> Cat.HUNGRY
+
+ expect(@cat.meow()).toEqual("meeeyaow")
+
+ context 'going to the vet', ->
+ it 'should be an evil meow', ->
+ @cat.state = -> Cat.VET_PSYCHIC
+
+ expect(@cat.meow()).toEqual("raowwww")
+
+
+
+
+
+
+
+
class this.Cat
+ @HUNGRY = 'hungry'
+ @VET_PSYCHIC = 'vet psychic'
+
+ meow: ->
+ switch this.state()
+ when Cat.HUNGRY
+ "meeeyaow"
+ when Cat.VET_PSYCHIC
+ "raowwww"
+
+
+
+
+
+
+
+
2 spec, 0 failures
+
+
+
Matchers
+ +
+
+
+
+
+
+
cat.meow.should == "meow"
+cat.should be_a_kind_of(Cat)
+cat.should_not be_hungry #=> cat.hungry?.should == false
+
+
+
+
+
+
+
+
expect(cat.meow()).toEqual("meow")
+expect(cat.prototype).toEqual(Cat.prototype)
+expect(cat.isHungry()).not.toBeTruthy()
+
+
+
+
+
+
+
+
Lots of built in matchers
+ +toEqual(object)
+toBeTruthy()
+toBeFalsy()
+toBeGreaterThan()
+toBeLessThan()
+toBeUndefined()
+toContain()
+toMatch()
+
+
+
+
+
+
+
+
expect(cat.isHungry()).not.toBeTruthy()
+
+
+
Create your own matchers!
+ +
+
+
+
+
+
+
MyMatchers =
+ toBeHungry: ->
+ return @actual.isHungry() == true
+
+beforeEach ->
+ this.addMatchers(MyMatchers)
+
+describe 'Cat', ->
+ beforeEach ->
+ @cat = new Cat()
+
+ it 'should not be hungry', ->
+ expect(@cat).not.toBeHungry()
+
+
+
+
+
+
+
+
describe
+it
+expect
+toSomething()
+beforeEach
+afterEach
+
+
+
Jasmine == unit testing
+ +
+
+
No, this isn't a talk about integration testing
+ +
+
Testing the right things in your JavaScript unit tests
+ +
+
+
+
+
+
+
+
John behavior #2
+ +Mock, stub, and spy on anything that should be handled in an integration test
+ +describe 'John', ->
+ describe 'spec definitions', ->
+ it 'should keep unit tests as focused as possible', ->
+
+
+
+
+
+
+
+
+
Feature: Cat Behaviors
+ Scenario: Hungry cats meow a particular way
+ Given I have a cat
+ And the cat is hungry
+ When the cat meows
+ Then the meow should sound like "meeyaow"
+
+
+
+
+
+
+
+
class this.Cat
+ @FOOD_THRESHOLD = 20
+ @HUNGRY = 'hungry'
+
+ constructor: (@foodLevel = 30) ->
+
+ meow: ->
+ switch this.state()
+ when Cat.HUNGRY
+ "meeyaow"
+
+ state: ->
+ if @foodLevel < Cat.FOOD_THRESHOLD
+ Cat.HUNGRY
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ context 'hungry', ->
+ it 'should be a mournful meow', ->
+ cat = new Cat()
+ cat.foodLevel = 15
+
+ expect(cat.meow()).toEqual("meeeyaow")
+
+
+
A perfectly cromulent test
+ +
+
+
+
+
+
+
class this.Cat
+ meow: ->
+ switch this.state() # <= dependent code executed
+ when Cat.HUNGRY
+ "meeyaow"
+
+
+
Why make your unit tests fragile?
+ +
+
+
+
+
+
+
cat.foodLevel = 15 # do we care about food level in this test?
+ # all we care about is that the cat is hungry
+
+
+
+
+
+
+
+
describe 'Cat', ->
+ describe '#meow', ->
+ describe 'hungry', ->
+ it 'should be a mournful meow', ->
+ cat = new Cat()
+ cat.state = -> Cat.HUNGRY # <= we don't care how state works,
+ # we just want a hungry cat
+
+ expect(cat.meow()).toEqual("meeeyaow")
+
+
+
+
+
+
+
+
Instance Stubs in JavaScript
+ +Just replace the method on the instance
+ +class this.Cat
+ state: ->
+ # cat codes
+
+cat = new Cat()
+cat.state = -> "whatever"
+
+
+
Stubs just return something when called
+ +
+
Mocks expect to be called
+ +
+
Test fails if all mocks are not called
+ +
+
Jasmine blurs the line a little
+ +
+
+
Spies work like mocks, but with additional abilities
+ +
+
+
+
+
+
+
+
class this.Cat
+ vocalProcessor: (speech) =>
+ if this.isAirborne()
+ this.modifyForAirborne(speech)
+ else
+ this.modifyForGround(speech)
+
+
+
+
+
+
+
+
describe 'Cat#vocalProcessor', ->
+ speech = "speech"
+
+ beforeEach ->
+ @cat = new Cat()
+
+ context 'airborne', ->
+ beforeEach ->
+ spyOn(@cat, 'modifyForAirborne')
+ @cat.isAirborne = -> true
+
+ it 'should be modified for flight', ->
+ @cat.vocalProcessor(speech)
+ expect(@cat.modifyForAirborne).toHaveBeenCalledWith(speech)
+
+
+
+
+
+
+
+
+
+
spyOn replaces a method on an instance with a spy method
+
+spyOn(@cat, 'modifyForAirborne')
+
+
+
Can return a value, run code, run the original code, or just wait to be called
+ +
+
Two basic ways to make sure a spy is called
+ +
+
+
+
+
+
+
+
+
toHaveBeenCalledWith()
+
+Called least once with the given parameters
+ +expect(@cat.modifyForAirborne).toHaveBeenCalledWith(speech)
+
+
+
+
+
+
+
+
+
+
toHaveBeenCalled()
+
+Just called, no parameter check
+ +expect(@cat.modifyForAirborne).toHaveBeenCalled()
+
+
+Use
+
+
+
+
+
+
+
Instance Mocks/Spies in JavaScript
+ +Use spyOn/toHaveBeenCalled matchers
+
+class this.Cat
+ state: ->
+ # cat codes
+
+cat = new Cat()
+spyOn(cat, 'state')
+expect(cat.state).toHaveBeenCalled()
+
+
+
+
+
spyOn works great with class-level stubs and mocks, too
+
+
+
+
+
+
+
+
class this.Cat
+ @generateFurColor: (base) ->
+ # magicks to make a fur color given a base
+
+ regrowFur: (damagedHairs) ->
+ for follicle in damagedHairs
+ follicle.regrow(Cat.generateFurColor(this.baseColor))
+
+
+
+
+
+
+
+
Cat.generateFurColor = ->
+ "whoops i nuked this method for every other test"
+
+
+
+
+
+
+
+
describe 'Cat#regrowFur', ->
+ color = 'color'
+
+ beforeEach ->
+ @cat = new Cat()
+ @follicle =
+ regrow: ->
+
+ @follicles = [ follicle ]
+
+ spyOn(Cat, 'generateFurColor').andReturn(color)
+ # ^^^ original is replaced when done
+ spyOn(@follicle, 'regrow')
+
+ it 'should regrow', ->
+ @cat.regrowFur(@follicles)
+
+ expect(@follicle.regrow).toHaveBeenCalledWith(color)
+
+
+Use
+
+
+
+
+
+
+
Class Stubs in JavaScript
+ +Use spyOn to generate stubs so that the original code is replaced after the test
+
+class this.Cat
+ @injectPsychicPowers: (cat) ->
+ # cat codes
+
+spyOn(Cat, 'injectPsychicPowers').andReturn(psychicCat)
+
+
+
+
+
+
+
+
John behavior #3
+ +If you have too many mocks/stubs/contexts, your code is too complex
+ +describe 'John', ->
+ describe 'spec definitions', ->
+ it 'should obey the Law of Demeter as much as possible', ->
+ it 'should not smell too funny', ->
+
+
+
+
+
+
+
+
describe 'Cat#fetch', ->
+ object = null
+
+ context 'a mouse', ->
+ beforeEach ->
+ object = new Mouse()
+
+ context 'fast mouse', ->
+ it 'should wear down the mouse', ->
+ # who
+
+ context 'slow mouse', ->
+ it 'should deliver a present to you', ->
+ # cares
+
+ context 'a ball', ->
+ beforeEach ->
+ object = new Ball()
+
+ context 'ball is bouncing', ->
+ it 'should cause the cat to leap', ->
+ # this
+
+ context 'ball is rolling', ->
+ it 'should cause the cat to slide on the floor', ->
+ # test
+
+ context 'a red dot', ->
+ laser = null
+
+ beforeEach ->
+ laser = new Laser()
+
+ context 'laser out of batteries', ->
+ it 'should not activate', ->
+ # is
+
+ context 'laser functioning', ->
+ it 'should activate, driving the cat insane', ->
+ # huge and unmaintainable and silly
+
+
+
Sometimes you just need a big blob of unit tests
+ +
+
+
+
+
+
+
# fast and focused!
+
+describe 'Cat#respondsTo', ->
+ beforeEach ->
+ @cat = new Cat()
+
+ context 'successes', ->
+ it 'should respond', ->
+ for request in [ 'kitty kitty', 'pookums', 'hisshead' ]
+ expect(@cat.respondsTo(request)).toBeTruthy()
+
+
+
+
+
+
+
+
# slow and synergistic!
+
+Scenario Outline: Successful responsiveness
+ Given I have a cat
+ When I call it with "<request>"
+ Then the cat should respond
+
+ Examples:
+ | request |
+ | kitty kitty |
+ | pookums |
+ | hisshead |
+
+
+
+
Find what works best for you and stick with it
+ +
+
...until you get sick of it, of course...
+ +
+
Using it in your project
+ +
+
Starts a Rack server for running Jasmine against your code
+ +
+
Really easy to plug into an existing Rails project
+ +
+
Want to make that run fast?
+ +
+Use PhantomJS or
+
+
Use PhantomJS or jasmine-headless-webkit
+
+
+
Fast code running in a real browser
+ +
+
Evergreen
+ +
+
Jasminerice
+ +
+
Node.js
+ +
+
Pick your favorite!
+ +
+
Some miscellaneous hints and tips
+ +
+
Testing jQuery
+ +
+Mocking and stubbing
+
+
Mocking and stubbing $.fn calls
+
+
+
+
+
+
+
+
this.containerWaiter = ->
+ $('#container').addClass('wait').append('<div class="waiting" />')
+
+
+
+
+
+
+
+
$.fn.makeWait = ->
+ $(this).addClass('wait').append('<div class="waiting" />')
+ this
+
+
+
+
+
+
+
+
this.containerWaiter = ->
+ $('#container').makeWait()
+
+
+
+
+
jquery-jasmine
+
+
+
+
+
+
+
+
describe 'container', ->
+ beforeEach ->
+ setFixtures('<div id="container" />')
+
+ it 'should make it wait', ->
+ containerWaiter()
+ expect($('#container')).toHaveClass('wait')
+ expect($('#container')).toContain('div.waiting')
+
+
+
+
+
+
+
+
+
+
describe '$.fn.makeWait', ->
+ it 'should make wait', ->
+ $div = $('<div />')
+ $div.makeWait()
+
+ expect($div).toHaveClass('wait')
+ expect($div).toContain('div.waiting')
+
+
+
+
+
+
+
+
describe 'container', ->
+ beforeEach ->
+ setFixtures('<div id="container" />')
+ spyOn($.fn, 'makeWait')
+
+ it 'should make it wait', ->
+ containerWaiter()
+ expect($.fn.makeWait).toHaveBeenCalled()
+
+
+
No longer testing jQuery, just testing for our code
+ +
+
Animations and other time-dependent things
+ +
+
+
+
+
+
+
class Cat
+ constructor: ->
+ @mood = "happy"
+
+ pet: ->
+ setTimeout(
+ -> @mood = "angry"
+ , 500
+ )
+
+
+Do you really need to test the
+
+
Do you really need to test the setTimeout?
+
+
+
+
+
+
+
+
class Cat
+ constructor: ->
+ @mood = "happy"
+
+ pet: -> setTimeout(@makeAngry, 500)
+
+ makeAngry: => @mood = "angry"
+
+
+Use Jasmine's
+
+
Use Jasmine's waitsFor and runs
+
+
+
+
+
+
+
+
describe 'cat moods', ->
+ it 'should change moods', ->
+ cat = new Cat()
+
+ # we want to know the cat's current mood
+ currentMood = cat.mood
+
+ # start petting the cat
+ runs -> cat.pet()
+
+ # wait one second for the cat's mood to change
+ waitsFor(
+ ->
+ cat.mood != currentMood
+ , "Cat changed its mood",
+ 1000
+ )
+
+ # expect the inevitable
+ runs ->
+ expect(cat.mood).toEqual('angry')
+
+
+
Underscore.js mixins
+ +and other prototype mixin-style extensions
+ +
+
+
+
+
+
+
CatLike =
+ catify: (name) ->
+ "meow meow #{name}"
+
+# mix in to the Underscore object
+_.mixin(CatLike)
+
+# use it
+_.catify("john") # => "meow meow john"
+
+
+
+
+
+
+
+
CatLike =
+ catify: (name) -> "meow meow #{name}"
+
+class Cat
+ hiss: -> "hiss"
+
+# like Ruby include, add code to instances
+for method, code of CatLike
+ Cat.prototype[method] = code
+
+cat = new Cat()
+cat.catify("john") # => "meow meow #{name}"
+
+
+
+
+
+
+
+
CatLike =
+ catify: (name) -> "meow meow #{name}"
+
+class Cat
+ hiss: -> "hiss"
+
+# like Ruby extend, add code to class
+for method, code of CatLike
+ Cat[method] = code
+
+Cat.catify("john") # => "meow meow john"
+
+
+
+
+
+
+
+
describe '_.catify', ->
+ it 'should catify', ->
+ expect(_.catify("hiss")).toEqual("meow meow hiss")
+
+
+
Eliminate the Underscore.js dependency
+ +
+
+
+
+
+
+
describe 'CatLike', ->
+ beforeEach ->
+ @helper = {}
+
+ for method, code of CatLike
+ @helper[method] = code
+
+ describe '#catify', ->
+ it 'should catify', ->
+ expect(@helper.catify("hiss")).toEqual("meow meow hiss")
+
+
+
So that's pretty much it.
+ +
+
+
+
+
+
+
Basic parts of Jasmine unit tests
+ +describe
+it
+expect
+toSomething()
+beforeEach
+afterEach
+
+
+
+
+
+
+
+
Mocking and stubbing
+ +direct method replacement
+spyOn()
+toHaveBeenCalled()
+toHaveBeenCalledWith()
+
+
+
Running Jasmine in your project
+ +
+
+
+
+
+
+
Hints and tips for JavaScript testing
+ +waitsFor()
+runs()
+
+
+