175 lines
3.0 KiB
Plaintext
175 lines
3.0 KiB
Plaintext
!SLIDE
|
|
# Some miscellaneous hints and tips
|
|
|
|
!SLIDE
|
|
# Testing jQuery
|
|
|
|
!SLIDE
|
|
# Mocking and stubbing `$.fn` calls
|
|
|
|
!SLIDE
|
|
``` coffeescript
|
|
this.containerWaiter = ->
|
|
$('#container').addClass('wait').append('<div class="waiting" />')
|
|
```
|
|
|
|
!SLIDE
|
|
``` coffeescript
|
|
$.fn.makeWait = ->
|
|
$(this).addClass('wait').append('<div class="waiting" />')
|
|
this
|
|
```
|
|
|
|
!SLIDE even-larger
|
|
``` coffeescript
|
|
this.containerWaiter = ->
|
|
$('#container').makeWait()
|
|
```
|
|
|
|
!SLIDE
|
|
# `jquery-jasmine`
|
|
|
|
!SLIDE larger
|
|
``` 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')
|
|
```
|
|
|
|
!SLIDE
|
|
# Underscore.js mixins
|
|
## and other prototype mixin-style extensions
|
|
|
|
!SLIDE even-larger
|
|
``` coffeescript
|
|
CatLike =
|
|
catify: (name) ->
|
|
"meow meow #{name}"
|
|
|
|
# mix in to the Underscore object
|
|
_.mixin(CatLike)
|
|
|
|
# use it
|
|
_.catify("john") # => "meow meow john"
|
|
```
|
|
|
|
!SLIDE larger
|
|
``` coffeescript
|
|
describe '_.catify', ->
|
|
it 'should catify', ->
|
|
expect(_.catify("hiss")).toEqual("meow meow hiss")
|
|
```
|
|
|
|
!SLIDE
|
|
# Eliminate the Underscore.js dependency
|
|
|
|
!SLIDE
|
|
``` coffeescript
|
|
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")
|
|
```
|
|
|