2012-03-13 17:29:42 +00:00
|
|
|
!SLIDE
|
|
|
|
# Some miscellaneous hints and tips
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Testing jQuery
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Mocking and stubbing `$.fn` calls
|
|
|
|
|
2012-03-22 13:48:09 +00:00
|
|
|
!SLIDE
|
2012-03-13 17:29:42 +00:00
|
|
|
``` coffeescript
|
|
|
|
this.containerWaiter = ->
|
|
|
|
$('#container').addClass('wait').append('<div class="waiting" />')
|
|
|
|
```
|
|
|
|
|
2012-03-22 13:48:09 +00:00
|
|
|
!SLIDE
|
2012-03-13 17:29:42 +00:00
|
|
|
``` coffeescript
|
|
|
|
$.fn.makeWait = ->
|
|
|
|
$(this).addClass('wait').append('<div class="waiting" />')
|
|
|
|
this
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` coffeescript
|
|
|
|
this.containerWaiter = ->
|
|
|
|
$('#container').makeWait()
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# `jquery-jasmine`
|
|
|
|
|
2012-03-22 13:48:09 +00:00
|
|
|
!SLIDE larger
|
2012-03-13 17:29:42 +00:00
|
|
|
``` coffeescript
|
|
|
|
describe 'container', ->
|
|
|
|
beforeEach ->
|
|
|
|
setFixtures('<div id="container" />')
|
|
|
|
|
|
|
|
it 'should make it wait', ->
|
|
|
|
containerWaiter()
|
|
|
|
expect($('#container')).toHaveClass('wait')
|
|
|
|
expect($('#container')).toContain('div.waiting')
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE image-80-percent
|
|
|
|
<img src="assets/wet-cat.jpg" />
|
|
|
|
|
|
|
|
!SLIDE image-80-percent
|
|
|
|
<img src="assets/spaghetti.jpg" />
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` coffeescript
|
|
|
|
describe '$.fn.makeWait', ->
|
|
|
|
it 'should make wait', ->
|
|
|
|
$div = $('<div />')
|
|
|
|
$div.makeWait()
|
|
|
|
|
|
|
|
expect($div).toHaveClass('wait')
|
|
|
|
expect($div).toContain('div.waiting')
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` coffeescript
|
|
|
|
describe 'container', ->
|
|
|
|
beforeEach ->
|
|
|
|
setFixtures('<div id="container" />')
|
|
|
|
spyOn($.fn, 'makeWait')
|
|
|
|
|
|
|
|
it 'should make it wait', ->
|
|
|
|
containerWaiter()
|
|
|
|
expect($.fn.makeWait).toHaveBeenCalled()
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# No longer testing jQuery, just testing for our code
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Animations and other time-dependent things
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` coffeescript
|
|
|
|
class Cat
|
|
|
|
constructor: ->
|
|
|
|
@mood = "happy"
|
|
|
|
|
|
|
|
pet: ->
|
|
|
|
setTimeout(
|
|
|
|
-> @mood = "angry"
|
|
|
|
, 500
|
|
|
|
)
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Do you really need to test the `setTimeout`?
|
|
|
|
|
|
|
|
!SLIDE even-larger
|
|
|
|
``` coffeescript
|
|
|
|
class Cat
|
|
|
|
constructor: ->
|
|
|
|
@mood = "happy"
|
|
|
|
|
|
|
|
pet: -> setTimeout(@makeAngry, 500)
|
|
|
|
|
|
|
|
makeAngry: => @mood = "angry"
|
|
|
|
```
|
|
|
|
|
|
|
|
!SLIDE
|
|
|
|
# Use Jasmine's `waitsFor` and `runs`
|
|
|
|
|
|
|
|
!SLIDE larger
|
|
|
|
``` coffeescript
|
|
|
|
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')
|
|
|
|
```
|
|
|
|
|