Slide 1

Slide 1 text

oh hi, I didn’t see you there

Slide 2

Slide 2 text

Ruby:Craftsmanship::JavaScript:________

Slide 3

Slide 3 text

Ruby:Craftsmanship::JavaScript:FFFUUU

Slide 4

Slide 4 text

why?

Slide 5

Slide 5 text

why? it’s hard

Slide 6

Slide 6 text

why? it’s hard it’s just glue code

Slide 7

Slide 7 text

why? it’s hard it’s just glue code it’s covered by selenium

Slide 8

Slide 8 text

why? it’s hard it’s just glue code it’s covered by selenium too many tools, not enough convention

Slide 9

Slide 9 text

why? it’s hard it’s just glue code it’s covered by selenium too many tools, not enough convention it’s just UI flair

Slide 10

Slide 10 text

why? it’s hard it’s just glue code it’s covered by selenium too many tools, not enough convention it’s just UI flair page refresh-driven development

Slide 11

Slide 11 text

why? it’s hard no one expects me to do it it’s just glue code it’s covered by selenium too many tools, not enough convention it’s just UI flair page refresh-driven development

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

consequences

Slide 15

Slide 15 text

sacrificing the quality of the user’s experience for the sake of our own familiar practices

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

function(){ return function(){ return function(){ require ‘BBOM.js’ }; }; }; application.js

Slide 18

Slide 18 text

function loadIt(){ /* This separate function simply saves parsing the database for each search. The arrayflg is used to flag that it has been done. */ arrayflg=1; /* First, read in the string from the hidden form element. */ ls=document.ug.ly.value; ctr=0; /* Then parse the long string and load it into the array. */ while (ls.indexOf("*")>-1){ pos=ls.indexOf("*"); db[ctr]=ls.substring(0,pos); /* Similarly, no need to repeatedly convert the strings in the array to lower case. Once is enough. */ dblc[ctr]=db[ctr].toLowerCase(); ls=ls.substring(pos+1,ls.length); ctr++; } } so many comments. What does it do? This code has /* This separate function simply saves parsing the database for each search. The arrayflg is used to flag that it has been done. */ /* First, read in the string from the hidden form element. */ /* Then parse the long string and load it into the array. */ /* Similarly, no need to repeatedly convert the strings in the array to lower case. Once is enough. */ function loadIt(){ arrayflg=1; ls=document.ug.ly.value; ctr=0; while (ls.indexOf("*")>-1){ pos=ls.indexOf("*"); db[ctr]=ls.substring(0,pos); dblc[ctr]=db[ctr].toLowerCase(); ls=ls.substring(pos+1,ls.length); ctr++; } }

Slide 19

Slide 19 text

avoiding front-end work

Slide 20

Slide 20 text

“ “I basically never pair.” http://is.gd/pairing Jay Fields

Slide 21

Slide 21 text

But that’s not what he really said

Slide 22

Slide 22 text

“experience experience experience context context context context context context context context context context context context caveats caveats caveats caveats “I basically never pair.” http://is.gd/pairing Jay Fields

Slide 23

Slide 23 text

“experience experience experience context context context context context context context context context context context context caveats caveats caveats caveats “I don’t do JavaScript.” Unknown

Slide 24

Slide 24 text

Please Start testing your JavaScript before you quit testing your JavaScript.

Slide 25

Slide 25 text

...teach them how to fish. So, we could rescue them, or... they’re drowning in a sea of untested code! I see.

Slide 26

Slide 26 text

codes!

Slide 27

Slide 27 text

Know RSpec?

Slide 28

Slide 28 text

describe “RSpec” do it “looks like Jasmine” do self.should be_familiar end end

Slide 29

Slide 29 text

describe(“Jasmine”, function(){ it(“looks like RSpec”, function(){ expect(this).toBeFamiliar(); }); });

Slide 30

Slide 30 text

describe(“Jasmine”, function(){ it(“looks like RSpec”, function(){ expect(this).toBeFamiliar(); }); }); It looks like you’re trying to write RSpec

Slide 31

Slide 31 text

Now you know Jasmine!

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); });

Slide 34

Slide 34 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); what’s the concern?

Slide 35

Slide 35 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); what’s the concern?

Slide 36

Slide 36 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); what’s the concern?

Slide 37

Slide 37 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); what’s the concern?

Slide 38

Slide 38 text

and it leads to...

Slide 39

Slide 39 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); });

Slide 40

Slide 40 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); $(‘.delete-task’).live(‘click’,function(e) { e.preventDefault(); $(this).remove(); });

Slide 41

Slide 41 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); $(‘.delete-task’).live(‘click’,function(e) { e.preventDefault(); $(this).remove(); }); $(‘.show-task’).live(‘click’,function(e) { e.preventDefault(); $(this).show(); });

Slide 42

Slide 42 text

$('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); }); $(‘.delete-task’).live(‘click’,function(e) { e.preventDefault(); $(this).remove(); }); $(‘.show-task’).live(‘click’,function(e) { e.preventDefault(); $(this).show(); });

Slide 43

Slide 43 text

how might we spec this behavior?

Slide 44

Slide 44 text

describe('#addTask', function(){ var $container; beforeEach(function(){ $container = $('
'); addTask.call($container); }); it('appends a div', function(){ expect($container).toContain('div'); }); it('includes a default text label', function(){ expect($container).toHaveText('New Task!'); }); });

Slide 45

Slide 45 text

describe('#addTask', function(){ var $container; beforeEach(function(){ $container = $('
'); addTask.call($container); }); it('appends a div', function(){ expect($container).toContain('div'); }); it('includes a default text label', function(){ expect($container).toHaveText('New Task!'); }); }); jasmine-jquery http://is.gd/jasminejquery

Slide 46

Slide 46 text

that spec drove...

Slide 47

Slide 47 text

var addTask = function(){ this.append('
New Task!
'); };

Slide 48

Slide 48 text

how might we spec event binding?

Slide 49

Slide 49 text

describe('#clicker',function(){ var handler, event; beforeEach(function(){ handler = jasmine.createSpy('handles clicks'); event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('
'); }); context('when you click the button',function(){ beforeEach(function(){ clicker('.my-button',handler); $('.my-button').trigger(event); }); it('triggers the event handler',function(){ expect(handler).toHaveBeenCalledWith(event); }); it('binds `this` to the jQuery result object',function(){ expect(handler.mostRecentCall.object).toBe('.my-button'); }); it('prevents default browser behavior',function(){ expect(event.preventDefault).toHaveBeenCalled(); }); }); });

Slide 50

Slide 50 text

describe('#clicker',function(){ var handler, event; beforeEach(function(){ handler = jasmine.createSpy('handles clicks'); event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('
'); }); context('when you click the button',function(){ beforeEach(function(){ clicker('.my-button',handler); $('.my-button').trigger(event); }); it('triggers the event handler',function(){ expect(handler).toHaveBeenCalledWith(event); }); it('binds `this` to the jQuery result object',function(){ expect(handler.mostRecentCall.object).toBe('.my-button'); }); it('prevents default browser behavior',function(){ expect(event.preventDefault).toHaveBeenCalled(); }); }); });

Slide 51

Slide 51 text

describe('#clicker',function(){ var handler, event; beforeEach(function(){ handler = jasmine.createSpy('handles clicks'); event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('
'); }); context('when you click the button',function(){ beforeEach(function(){ clicker('.my-button',handler); $('.my-button').trigger(event); }); it('triggers the event handler',function(){ expect(handler).toHaveBeenCalledWith(event); }); it('binds `this` to the jQuery result object',function(){ expect(handler.mostRecentCall.object).toBe('.my-button'); }); it('prevents default browser behavior',function(){ expect(event.preventDefault).toHaveBeenCalled(); }); }); });

Slide 52

Slide 52 text

describe '#clicker', -> handler=event=null; beforeEach -> handler = jasmine.createSpy 'handles clicks' event = $.Event 'click' spyOn event, 'preventDefault' $.jasmine.inject '
' context 'when you click the button', -> beforeEach -> clicker '.my-button', handler $('.my-button').trigger(event) it 'triggers the event handler', -> expect(handler).toHaveBeenCalledWith(event) it 'binds `this` to the jQuery result object', -> expect(handler.mostRecentCall.object).toBe('.my-button') it 'prevents default browser behavior', -> expect(event.preventDefault).toHaveBeenCalled()

Slide 53

Slide 53 text

describe '#clicker', -> handler=event=null; beforeEach -> handler = jasmine.createSpy 'handles clicks' event = $.Event 'click' spyOn event, 'preventDefault' $.jasmine.inject '
' context 'when you click the button', -> beforeEach -> clicker '.my-button', handler $('.my-button').trigger(event) it 'triggers the event handler', -> expect(handler).toHaveBeenCalledWith(event) it 'binds `this` to the jQuery result object', -> expect(handler.mostRecentCall.object).toBe('.my-button') it 'prevents default browser behavior', -> expect(event.preventDefault).toHaveBeenCalled()

Slide 54

Slide 54 text

describe '#clicker', -> handler=event=null; beforeEach -> handler = jasmine.createSpy 'handles clicks' event = $.Event 'click' spyOn event, 'preventDefault' $.jasmine.inject '
' context 'when you click the button', -> beforeEach -> clicker '.my-button', handler $('.my-button').trigger(event) it 'triggers the event handler', -> expect(handler).toHaveBeenCalledWith(event) it 'binds `this` to the jQuery result object', -> expect(handler.mostRecentCall.object).toBe('.my-button') it 'prevents default browser behavior', -> expect(event.preventDefault).toHaveBeenCalled()

Slide 55

Slide 55 text

that spec drove...

Slide 56

Slide 56 text

var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { e.preventDefault(); whenClicked.call($(this),e); }); };

Slide 57

Slide 57 text

clicker('.add-task', addTask); $('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('
New Task!
'); });

Slide 58

Slide 58 text

Conclusion: take the next step

Slide 59

Slide 59 text

try jasmine https://try-jasmine.heroku.com

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

try jasmine-rails https://github.com/searls/jasmine-rails

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Consider coming to our non-profit JavaScript Craftsmanshop next week in Denver @ Uncubed on 9/8 & 9/9 register at http://is.gd/jasmine Use coupon code RMRB for 25% off (of $95)

Slide 66

Slide 66 text

Consider coming to our non-profit JavaScript Craftsmanshop next week in Denver @ Uncubed on 9/8 & 9/9 register at http://is.gd/jasmine Use coupon code RMRB for 25% off (of $95) 2 days for 71-ish dollars

Slide 67

Slide 67 text

ask us questions and we’ll try to help

Slide 68

Slide 68 text

thank you! [email protected] Rocky Mountain Ruby, Boulder, CO September 2, 2011 @searls seefl[email protected] @seeflanigan Thanks to Brandon Keepers (@bkeepers) for the Keynote template! find this talk at http://is.gd/rockyjasmine