From 4f4a093aaa3aeddc72b91c87ae1e2a824777c9ea Mon Sep 17 00:00:00 2001 From: John Bintz Date: Sat, 24 Mar 2012 10:21:31 -0400 Subject: [PATCH] Update published site --- index.html | 275 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 157 insertions(+), 118 deletions(-) diff --git a/index.html b/index.html index 6dc7166..80cb836 100644 --- a/index.html +++ b/index.html @@ -95,10 +95,8 @@

Fortunately, we're beyond that nowadays

-
-
require 'spec_helper'
-
-describe MyCoolWebsite do
+
+
describe MyCoolWebsite do
   let(:website) { described_class.new }
 
   describe '#cool_method' do
@@ -108,7 +106,8 @@
     let(:double_cool) { 'double cool' }
 
     before do
-      website.stubs(:whoa_cool).returns(oh_yeah)
+      website.stubs(:whoa_cool).
+        returns(oh_yeah)
     end
 
     it { should == double_cool }
@@ -131,23 +130,32 @@
 
 
 
-
-
<script type="text/javascript">
-function showMyCoolTitle(title, length) {
+
+
function showMyCoolTitle(title, length) {
   if (length == null) { length = 0; }
 
   if (length <= title.length) {
-    document.title = title.substr(0, length);
+    document.title =
+      title.substr(0, length);
+
     length++;
 
-    setTimeout(function() { showMyCoolTitle(title, length); }, 75);
+    setTimeout(function() {
+      showMyCoolTitle(title, length);
+    }, 75);
   }
 }
+
-window.onload = function() { - showMyCoolTitle("My cool website! Whoaaaaa!"); + + + +
+
window.onload = function() {
+  showMyCoolTitle(
+    "My cool website! Whoaaaaa!"
+  );
 }
-</script>
@@ -157,7 +165,7 @@

jQuery

-

Backbone

+

Backbone.js

Sprockets and RequireJS

@@ -165,10 +173,8 @@

Automated testing is important

-
-
require 'spec_helper'
-
-describe MyCoolWebsite do
+
+
describe MyCoolWebsite do
   let(:website) { described_class.new }
 
   describe '#cool_method' do
@@ -178,7 +184,8 @@
     let(:double_cool) { 'double cool' }
 
     before do
-      website.stubs(:whoa_cool).returns(oh_yeah)
+      website.stubs(:whoa_cool).
+        returns(oh_yeah)
     end
 
     it { should == double_cool }
@@ -189,22 +196,21 @@
 
 
 
-
+
describe 'MyCoolWebsiteView', ->
-  website = null
-
   beforeEach ->
-    website = new MyCoolWebsiteView()
+    @website = new MyCoolWebsiteView()
 
   describe '#coolMethod', ->
     doubleCool = 'double cool'
     ohYeah = [ doubleCool ]
 
     beforeEach ->
-      website.whoaCool = -> ohYeah
+      @website.whoaCool = -> ohYeah
 
     it 'should be double cool', ->
-      expect(website.coolMethod()).toEqual(doubleCool)
+      expect(@website.coolMethod()).
+        toEqual(doubleCool)
@@ -278,19 +284,20 @@

-
+
describe 'Cat', ->
   describe '#meow', ->
-    # description of the meow behavior goes here
+    # description of the
+    # meow behavior goes here
-
+

John behavior #1

-

Use Ruby-style indicators for instance- and class-level methods, even in Jasmine

+

Use Ruby-style indicators for instance- and class-level methods

describe 'John', ->
   describe 'spec definitions', ->
@@ -356,7 +363,7 @@
 
# code-under-test
 
-class this.Cat
+class @Cat
   meow: ->
@@ -366,7 +373,6 @@ 
// safety wrapper to prevent global pollution
 (function() {
-  // ...but we want to pollute the Cat class
   this.Cat = (function() {
     function Cat() {}
     Cat.prototype.meow = function() {};
@@ -394,7 +400,7 @@ Expected undefined to equal 'meow'.
 
Make it meow!
-
class this.Cat
+
class @Cat
   meow: -> "meow"
 

 
@@ -426,7 +432,7 @@ Expected undefined to equal 'meow'.
 
# code-under-test
 
-class this.Cat
+class @Cat
   meow: -> "meow"
@@ -443,7 +449,7 @@ Expected undefined to equal 'meow'.

Nested describe

-
+
describe 'Cat', ->
   describe '#meow', ->
     describe 'hungry', ->
@@ -458,24 +464,27 @@ Expected undefined to equal 'meow'.
 
 
 
-
-
describe 'Cat', ->
-  describe '#meow', ->
-    describe 'hungry', ->
-      it 'should be a mournful meow', ->
-        cat = new Cat()
-        cat.state = -> Cat.HUNGRY
-          # ...just like cat.stubs(:state)
+
+
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")
+    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") + + +
+
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")
@@ -544,23 +553,33 @@ Expected undefined to equal 'meow'. -
+
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") +
+
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")
@@ -585,7 +604,7 @@ Expected undefined to equal 'meow'.

This works, but it can be clearer

-
+
describe Cat do
   describe '#meow' do
     describe 'hungry' do
@@ -615,11 +634,12 @@ Expected undefined to equal 'meow'.
 
 
 
-
+
describe Cat do
   let(:cat) { described_class.new }
 
-  # save describe for things or behaviors...
+  # save describe for
+  # things or behaviors...
   describe '#meow' do
     subject { cat.meow }
 
@@ -691,7 +711,7 @@ Expected undefined to equal 'meow'.
-
class this.Cat
+
class @Cat
   @HUNGRY = 'hungry'
   @VET_PSYCHIC = 'vet psychic'
 
@@ -728,7 +748,7 @@ Expected undefined to equal 'meow'.
 
 
expect(cat.meow()).toEqual("meow")
-expect(cat.prototype).toEqual(Cat.prototype)
+expect(cat.constructor).toEqual(Cat)
 expect(cat.isHungry()).not.toBeTruthy()
@@ -768,8 +788,13 @@ Expected undefined to equal 'meow'. beforeEach -> this.addMatchers(MyMatchers) +
-describe 'Cat', -> + + + +
+
describe 'Cat', ->
   beforeEach ->
     @cat = new Cat()
 
@@ -823,20 +848,20 @@ Expected undefined to equal 'meow'.

-
+
Feature: Cat Behaviors
-  Scenario: Hungry cats meow a particular way
+  Scenario: Hungry cats meow a certain way
     Given I have a cat
       And the cat is hungry
     When the cat meows
-    Then the meow should sound like "meeyaow"
+    Then the meow should be a "meeyaow"
-
class this.Cat
+
class @Cat
   @FOOD_THRESHOLD = 20
   @HUNGRY = 'hungry'
 
@@ -855,7 +880,7 @@ Expected undefined to equal 'meow'.
 
 
 
-
+
describe 'Cat', ->
   describe '#meow', ->
     context 'hungry', ->
@@ -863,7 +888,8 @@ Expected undefined to equal 'meow'.
         cat = new Cat()
         cat.foodLevel = 15
 
-        expect(cat.meow()).toEqual("meeeyaow")
+        expect(cat.meow()).
+          toEqual("meeeyaow")
@@ -872,10 +898,11 @@ Expected undefined to equal 'meow'.

A perfectly cromulent test

-
-
class this.Cat
+
+
class @Cat
   meow: ->
-    switch this.state() # <= dependent code executed
+    switch this.state()
+         # ^^^ dependent code executed
       when Cat.HUNGRY
         "meeyaow"
@@ -886,26 +913,25 @@ Expected undefined to equal 'meow'.

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
+  # do we care about food level?
-
+
describe 'Cat', ->
   describe '#meow', ->
-    describe 'hungry', ->
+    context '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
+          # ^^^ we just want a hungry cat
 
-        expect(cat.meow()).toEqual("meeeyaow")
+        expect(cat.meow()).
+          toEqual("meeeyaow")
@@ -916,7 +942,7 @@ Expected undefined to equal 'meow'.

Just replace the method on the instance

-
class this.Cat
+
class @Cat
   state: ->
     # cat codes
 
@@ -949,7 +975,7 @@ Expected undefined to equal 'meow'.
-
class this.Cat
+
class @Cat
   vocalProcessor: (speech) =>
     if this.isAirborne()
       this.modifyForAirborne(speech)
@@ -960,7 +986,7 @@ Expected undefined to equal 'meow'.
 
 
 
-
+
describe 'Cat#vocalProcessor', ->
   speech = "speech"
 
@@ -974,7 +1000,8 @@ Expected undefined to equal 'meow'.
 
     it 'should be modified for flight', ->
       @cat.vocalProcessor(speech)
-      expect(@cat.modifyForAirborne).toHaveBeenCalledWith(speech)
+      expect(@cat.modifyForAirborne).
+        toHaveBeenCalledWith(speech)
@@ -995,40 +1022,43 @@ Expected undefined to equal 'meow'.

Two basic ways to make sure a spy is called

-
+

toHaveBeenCalledWith(args...)

Called least once with the given parameters

-
expect(@cat.modifyForAirborne).toHaveBeenCalledWith(speech)
+
expect(@cat.modifyForAirborne).
+  toHaveBeenCalledWith(speech)
 

 
 
 
 
-
+

toHaveBeenCalled()

Just called, no parameter check

-
expect(@cat.modifyForAirborne).toHaveBeenCalled()
+
expect(@cat.modifyForAirborne).
+  toHaveBeenCalled()
 

 
 
 
 
-
+

Instance Mocks/Spies in JavaScript

Use spyOn/toHaveBeenCalled matchers

-
class this.Cat
+
class @Cat
   state: ->
     # cat codes
 
 cat = new Cat()
 spyOn(cat, 'state')
-expect(cat.state).toHaveBeenCalled()
+expect(cat.state).
+  toHaveBeenCalled()
 

 
 
@@ -1037,14 +1067,16 @@ Expected undefined to equal 'meow'.

spyOn works great with class-level stubs and mocks, too

-
-
class this.Cat
+
+
class @Cat
   @generateFurColor: (base) ->
     # magicks to make a fur color given a base
 
   regrowFur: (damagedHairs) ->
     for follicle in damagedHairs
-      follicle.regrow(Cat.generateFurColor(this.baseColor))
+      follicle.regrow(
+        Cat.generateFurColor(this.baseColor)
+      )
@@ -1058,25 +1090,25 @@ Expected undefined to equal 'meow'. -
+
describe 'Cat#regrowFur', ->
   color = 'color'
 
   beforeEach ->
     @cat = new Cat()
-    @follicle =
-      regrow: ->
-
+    @follicle = { regrow: -> null }
     @follicles = [ follicle ]
 
-    spyOn(Cat, 'generateFurColor').andReturn(color)
-    #           ^^^ original is replaced when done
+    spyOn(Cat, 'generateFurColor').
+    #           ^^^ original replaced when done
+      andReturn(color)
     spyOn(@follicle, 'regrow')
 
   it 'should regrow', ->
     @cat.regrowFur(@follicles)
 
-    expect(@follicle.regrow).toHaveBeenCalledWith(color)
+    expect(@follicle.regrow).
+      toHaveBeenCalledWith(color)
@@ -1160,7 +1192,7 @@ Expected undefined to equal 'meow'.

Sometimes you just need a big blob of unit tests

-
+
# fast and focused!
 
 describe 'Cat#respondsTo', ->
@@ -1169,8 +1201,11 @@ Expected undefined to equal 'meow'.
 
   context 'successes', ->
     it 'should respond', ->
-      for request in [ 'kitty kitty', 'pookums', 'hisshead' ]
-        expect(@cat.respondsTo(request)).toBeTruthy()
+      for request in [ 'kitty kitty',
+                       'pookums',
+                       'hisshead' ]
+        expect(@cat.respondsTo(request)).
+          toBeTruthy()
@@ -1245,17 +1280,21 @@ Expected undefined to equal 'meow'.

Mocking and stubbing $.fn calls

-
+
this.containerWaiter = ->
-  $('#container').addClass('wait').append('<div class="waiting" />')
+  $('#container').
+    addClass('wait').
+    append('<div class="waiting" />')
-
+
$.fn.makeWait = ->
-  $(this).addClass('wait').append('<div class="waiting" />')
+  $(this).
+    addClass('wait').
+    append('<div class="waiting" />')
   this
@@ -1273,15 +1312,18 @@ Expected undefined to equal 'meow'.

jquery-jasmine

-
+
describe 'container', ->
   beforeEach ->
     setFixtures('<div id="container" />')
 
   it 'should make it wait', ->
     containerWaiter()
-    expect($('#container')).toHaveClass('wait')
-    expect($('#container')).toContain('div.waiting')
+
+    expect($('#container')).
+      toHaveClass('wait')
+    expect($('#container')).
+      toContain('div.waiting')
@@ -1314,7 +1356,8 @@ Expected undefined to equal 'meow'. it 'should make it wait', -> containerWaiter() - expect($.fn.makeWait).toHaveBeenCalled() + expect($.fn.makeWait). + toHaveBeenCalled()
@@ -1327,7 +1370,7 @@ Expected undefined to equal 'meow'.

Animations and other time-dependent things

-
class Cat
+
class @Cat
   constructor: ->
     @mood = "happy"
 
@@ -1441,10 +1484,6 @@ Expected undefined to equal 'meow'.

Thank you!

-

@johnbintz

- -

GitHub

-