confidence.js

conﬁdence.js

"I don't test-drive my JavaScript because it changes too often"
- Anonymous

Why does it change more often?

Because it has more reasons to!

$(function(){ });

$(function(){ var $button = $('.submit-button'); });

$(function(){ var $button = $('.submit-button'); $button.live('click', function(){ }); });

$(function(){ var $button = $('.submit-button'); $button.live('click', function(){ var $input =
$('input.secret-code'); }); });

$('input.secret-code'); $.ajax({ }); }); });

$('input.secret-code'); $.ajax({ data: $input.val() }); }); });

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ } }); }); });

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); });

simple!

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); });

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event user event handling

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event user event handling sends a network request

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event user event handling sends a network request form processing

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event user event handling sends a network request form processing network event handling

$('input.secret-code'); $.ajax({ data: $input.val(), success: function(data){ $('.messages').append( '<div>Success! '+data.result+'</div>' ); } }); }); }); anonymous, not reusable handle page event user event handling sends a network request form processing network event handling HTML templating

SRP, or...

SR—WHEE!

information density

can we test that code as-is?

describe("~ clicking a button ", function() { var $button, $input,
$messages; beforeEach(function(){ $button = affix('.submit-button'); $input = affix('input.secret-code').val('ZOMG!'); $messages = affix('.messages'); spyOn($, "ajax"); $button.trigger('click'); }); it("transmits secret code", function() { expect($.ajax).toHaveBeenCalledWith({ data: 'ZOMG!', success: jasmine.any(Function) }); }); describe("~ AJAX success", function() { beforeEach(function() { $.ajax.mostRecentCall.args[0].success({ result: "Panda!" }); }); it("appends text", function() { expect($messages).toHaveHtml( '<div>Success! Panda!</div>'); }); }); });

describe("~ clicking a button ", function() { var $button, $input,
$messages; beforeEach(function(){ $button = affix('.submit-button'); $input = affix('input.secret-code'). val('ZOMG!'); $messages = affix('.messages'); spyOn($, "ajax"); $button.trigger('click'); }); ...

describe("~ clicking a button ", function() { beforeEach(function(){ ... $button.trigger('click');
}); it("transmits secret code", function() { expect($.ajax).toHaveBeenCalledWith({ data: 'ZOMG!', success: jasmine.any(Function) }); }); ...

describe("~ clicking a button ", function() { beforeEach(function(){ ... $button.trigger('click');
}); ... describe("~ AJAX success", function() { beforeEach(function() { $.ajax.mostRecentCall.args[0].success({ result: "Panda!" }); }); it("appends text", function() { expect($messages).toHaveHtml( '<div>Success! Panda!</div>'); }); }); });

Testing vs. TDD

let's talk feedback

What can a full-stack test tell us?

1. A feature is implemented

2. The application seems to be working

3. We didn't just break everything

What can a unit test tell us?

1. How the unit behaves

2. How the unit depends on other units

3. How great/awful the unit's API is

TDD isn't about catching bugs

TDD isn't about preventing bugs

TDD isn't about testing

TDD is about thinking harder

...we can't look at testing mechanistically. Unit testing does not
improve quality just by catching errors at the unit level... The truth is more subtle than that. Quality is a function of thought and reﬂection - precise thought and reﬂection. That’s the magic. Techniques which reinforce that discipline invariably increase quality. -Michael Feathers " "

TDD is about responding to painful designs

TDD is about discovering what we need

TDD is not the only way

let's try again

our serious app has invoices

describe("app.models.Invoice", function() { });

describe("app.models.Invoice", function() { var subject; });

describe("app.models.Invoice", function() { var subject; beforeEach(function() { }); });

describe("app.models.Invoice", function() { var subject; beforeEach(function() { subject = app.models.Invoice();
}); });

describe("app.models.Invoice", function() { var subject; beforeEach(function() { subject = app.models.Invoice({
price: 192, quantity: 30}); }); });

price: 192, quantity: 30}); }); describe("#total", function() { }); });

price: 192, quantity: 30}); }); describe("#total", function() { it("is price x quantity", function() { }); }); });

price: 192, quantity: 30}); }); describe("#total", function() { it("is price x quantity", function() { expect(subject.total()).toEqual(5760); }); }); });

app.models.Invoice = function(attrs) { return { total: function() { return
attrs.price * attrs.quantity; } }; };

Now, in Co eeVision

describe "app.models.Invoice", -> beforeEach -> @subject = app.models.Invoice price: 192
quantity: 30 describe "#total", -> it "is price x quantity", -> expect(@subject.total()).toEqual(5760)

price: 192, quantity: 30}); }); describe("#total", function() { it("is price x quantity", function() { expect(subject.total()).toEqual(5760); }); }); });

now, in Given-When-Then w/ jasmine-given

describe "app.models.Invoice", -> Given -> @subject = app.models.Invoice price: 192
quantity: 30 describe "#total", -> Then -> @subject.total() == 192 * 30

describe "app.models.Invoice", -> beforeEach -> @subject = app.models.Invoice price: 192
quantity: 30 describe "#total", -> it "is price x quantity", -> expect(@subject.total()).toEqual(5760)

let's inﬂict some pain

formatting dollars

quantity: 30 describe "#total", -> Then -> @subject.total() == 192 * 30 describe "#formattedTotal", -> When -> @result = @subject.formattedTotal() Then -> @result == "$57.60"

app.models.Invoice = (attrs) -> self = {} self.total = ->
attrs.price * attrs.quantity self

attrs.price * attrs.quantity self.formattedTotal = -> "$#{self.total() / 100.0}" self

(punting on) formatting dollars

Defer, Defer, Defer!

quantity: 30 describe "#total", -> Then -> @subject.total() == 192 * 30 describe "#formattedTotal", -> When -> @result = @subject.formattedTotal() Then -> @result == "$57.60"

quantity: 30 describe "#total", -> Then -> @subject.total() == 192 * 30 describe "#formattedTotal", -> Given -> spyOn(app.format, "DollarizesCents").andReturn dollarize: -> "$57.60" When -> @result = @subject.formattedTotal() Then -> @result == "$57.60"

spyOn(app.format, "DollarizesCents").andReturn dollarize: -> "$57.60" #1. Store the real app.format.DollarizesCents
#2. Set app.format.DollarizesCents to a fake function (called a spy). #3. Tell that spy function to return some object with a dollarize method that returns the test data "$57.60" #4. After the spec runs, replace the original app.format.DollarizesCents function

spyOn(obj, "methodName")

jasmine.createSpy("blah")

attrs.price * attrs.quantity self.formattedTotal = -> "$#{self.total() / 100.0}" self

attrs.price * attrs.quantity self.formattedTotal = -> app.format.DollarizesCents(). dollarize(self.total()) self

fake it 'til you make it

attrs.price * attrs.quantity self.formattedTotal = -> app.format.DollarizesCents(). dollarize(9182128912891) self

quantity: 30 describe "#total", -> Then -> @subject.total() == 192 * 30 describe "#formattedTotal", -> Given -> spyOn(app.format, "DollarizesCents").andReturn dollarize: jasmine.createSpy().when(5760).thenReturn("$57.60") When -> @result = @subject.formattedTotal() Then -> @result == "$57.60"

attrs.price * attrs.quantity self.formattedTotal = -> app.format.DollarizesCents(). dollarize(9182128912891) self

attrs.price * attrs.quantity self.formattedTotal = -> app.format.DollarizesCents(). dollarize(self.total()) self

when().thenReturn() & other spy gadgets are in jasmine-stealth

(actually) formatting dollars

describe "app.format.DollarizesCents", -> Given -> @subject = app.format.DollarizesCents() describe "#dollarize",
-> context "0 cents", -> Then -> @subject.dollarize(0) == "$0.00"

app.format.DollarizesCents = -> dollarize: (cents) -> "$0.00"

-> context "0 cents", -> Then -> @subject.dollarize(0) == "$0.00" context "50 cents", -> Then -> @subject.dollarize(50) == "$0.50"

app.format.DollarizesCents = -> dollarize: (cents) -> dollars = cents /
100.0 decimal = if dollars % 1 == 0 then "." else "" trailingZero = if cents % 10 == 0 then "0" else "" trailingDoubleZero = if cents % 100 == 0 then "0" else "" "$#{dollars}#{decimal}#{trailingZero}#{trailingDoubleZero}"

app.format.DollarizesCents = -> dollarize: (cents) -> s = "$" s
+= (dollars = cents / 100.0) s += "." if dollars % 1 == 0 s += "0" if cents % 10 == 0 s += "0" if cents % 100 == 0 s

Let's lean into it.

-> context "0 cents", -> Then -> @subject.dollarize(0) == "$0.00" context "50 cents", -> Then -> @subject.dollarize(50) == "$0.50" context "1,841,482 cents", -> Then -> @subject.dollarize(1841482) == "$18,414.82"

app.format.DollarizesCents = -> dollarize: (cents) -> amount = cents /
100.0 s = "$" s += @commasFor(amount) s += "0" if cents % 10 == 0 s += "0" if cents % 100 == 0 s #private commasFor: (amount) -> [dollars, cents] = amount.toString().split(".") s = "" while dollars.length > 3 s = ",#{dollars.slice(-3)}#{s}" dollars = dollars.substring(0, dollars.length - 3) "#{dollars}#{s}.#{cents or ""}"

I am now embarrassed.

-> context "0 cents", -> Then -> @subject.dollarize(0) == "$0.00" context "50 cents", -> Then -> @subject.dollarize(50) == "$0.50" context "1,841,482 cents", -> Then -> @subject.dollarize(1841482) == "$18,414.82" context "213,981,400 cents", -> Then -> @subject.dollarize(213981400) == "$2,139,814.00"

commasFor is doing too much

app.format.DollarizesCents = -> dollarize: (pennies) -> amount = pennies /
100.0 [dollars, cents] = amount.toString().split(".") s = "$" s += @commasFor(dollars) s += ".#{cents or ""}" s += "0" if pennies % 10 == 0 s += "0" if pennies % 100 == 0 s #private commasFor: (dollars) -> s = "" while dollars.length > 3 s = ",#{dollars.slice(-3)}#{s}" dollars = dollars.substring(0, dollars.length - 3) "#{dollars}#{s}

100.0 [dollars, cents] = amount.toString().split(".") s = "$" s += @commasFor(dollars) s += "." s += @paddingFor(cents) s #private commasFor: (dollars) -> s = "" while dollars.length > 3 s = ",#{dollars.slice(-3)}#{s}" dollars = dollars.substring(0, dollars.length - 3) "#{dollars}#{s}" paddingFor: (cents = "") -> while cents.length < 2 cents += "0" cents

100.0 [dollars, cents] = amount.toString().split(".") "$#{@commasFor(dollars)}.#{@paddingFor(cents)}" #private commasFor: (dollars) -> s = "" while dollars.length > 3 s = ",#{dollars.slice(-3)}#{s}" dollars = dollars.substring(0, dollars.length - 3) "#{dollars}#{s}" paddingFor: (cents = "") -> while cents.length < 2 cents += "0" cents

app.format.DollarizesCents = -> dollarize: (pennies) -> amount = (pennies /
100.0).toFixed(2) [dollars, cents] = amount.toString().split(".") "$#{@commasFor(dollars)}.#{cents}" #private commasFor: (dollars) -> s = "" while dollars.length > 3 s = ",#{dollars.slice(-3)}#{s}" dollars = dollars.substring(0, dollars.length - 3) "#{dollars}#{s}"

app.format.DollarizesCents = -> dollarize: (pennies) -> amount = (pennies /
100.0).toFixed(2) [dollars, cents] = amount.toString().split(".") "$#{@commasFor(dollars)}.#{cents}" #private commasFor: (dollars) -> dollars.replace /(\d)(?=(\d{3})+$)/g, "\$1,"

what about the DOM?

I want my asp/jsp/erb!

No you don't.

I want to load HTML ﬁxture ﬁles!

No you don't.

describe "app.views.Invoice", -> Given -> @subject = app.views.Invoice()

describe "app.views.Invoice", -> Given -> @subject = app.views.Invoice() describe "#render",
->

-> Given -> @$el = $('<div></div>'). appendTo('body')

-> Given -> @$el = $('<div></div>'). appendTo('body') When -> @subject.render(@$el)

-> Given -> @$el = $('<div></div>'). appendTo('body') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total')

app.views.Invoice = () -> render: ($el) -> $el.append("<div class=\"total\"></div>")

test pollution

describe "app.views.Invoice", -> Given -> @model = app.models.Invoice() Given ->
@subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = $('<div></div>'). appendTo('body') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total')

@subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = $('<div></div>'). appendTo('body') afterEach -> @$el.remove() When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total')

@subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total')

jasmine-ﬁxture a x()

it's jQuery in reverse!

$button = affix('.button')

$button = affix('.button') #=> <div class="button"></div>

$button = affix('.button') #=> <div class="button"></div> $button.affix('input#firstName[value="Joe"]')

$button = affix('.button') #=> <div class="button"></div> $button.affix('input#firstName[value="Joe"]') #=> <div class="button">
<input id="firstName" value="Joe"/> </div>

<input id="firstName" value="Joe"/> </div> affix('pre code div.example')

<input id="firstName" value="Joe"/> </div> affix('pre code div.example') #=> <pre><code><div class="example"></div></code></pre>

<input id="firstName" value="Joe"/> </div> affix('pre code div.example') #=> <pre><code><div class="example"></div></code></pre> # And it deletes affixed elements afterEach spec!

Now, formatted price

-> Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total')

describe "app.views.Invoice", -> Given -> @model = app.models.Invoice price: 38
quantity: 2 Given -> @subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el.find('.total')). toHaveText("$0.76")

app.views.Invoice = (config) -> render: ($el) -> $el.append "<div class=\"total\">"+
config.model.formattedTotal()+ "</div>"

spec leakage

the view spec knows how the model's formattedTotal works

that's not very DRY

collaboration > implementation

describe "app.views.Invoice", -> Given -> @model = app.models.Invoice price: 38
quantity: 2 Given -> @subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total') Then -> expect(@$el.find('.total')). toHaveText("$0.76")

describe "app.views.Invoice", -> Given -> @model = {} Given ->
@subject = app.views.Invoice model: @model describe "#render", -> Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total') Then -> expect(@$el.find('.total')). toHaveText("$0.76")

describe "app.views.Invoice", -> Given -> @model = {} Given ->
@subject = app.views.Invoice model: @model describe "#render", -> Given -> @model.formattedTotal = jasmine.createSpy().andReturn("$foo") Given -> @$el = affix('div') When -> @subject.render(@$el) Then -> expect(@$el).toContain('.total') Then -> expect(@$el.find('.total')). toHaveText("$foo")

If you're not open to changing your code's design, TDD
won't help.

TDD helps us to: - think hard - respond to
pain - keep moving forward (tests are a side e ect)

When a solution isn't obvious, defer to a new object
and fake it 'til you make it.

Shared factories & ﬁxtures lead to a Tragedy of the
Commons

Isolate subjects from collaborators because it'll hurt so good.

http://test-double.com @searls http://github.com/searls http://tryjasmine.com

confidence.js

confidence.js

More Decks by Justin Searls

Other Decks in Programming

Featured

Transcript