Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cincinnati JS on 12/14/2011

Cincinnati JS on 12/14/2011

This talk is a mash-up talk of "I'm afraid of JavaScript" and "Jasmine Enhancers".
Want JavaScript help or training? Contact us at http://test-double.com

Justin Searls

December 14, 2011
Tweet

More Decks by Justin Searls

Other Decks in Programming

Transcript

  1. stupid things we do: we pair less often we share

    less often we change less often
  2.          

           
  3. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() {

    context("moving up C", function() { it("places it above B", function() { }); }); }); });
  4. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { it("places it above B", function() { }); }); }); });
  5. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { beforeEach(function() { subject.moveUp('C'); }); it("places it above B", function() { }); }); }); });
  6. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { beforeEach(function() { subject.moveUp('C'); }); it("places it above B", function() { expect(subject.get('items')).toEqual(['A','C','B']); }); }); }); });
  7. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { }); }); });
  8. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { it("places B above A", function() { }); }); }); });
  9. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { beforeEach(function() { subject.moveUp('B'); }); it("places B above A", function() { }); }); }); });
  10. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { beforeEach(function() { subject.moveUp('B'); }); it("places B above A", function() { expect(subject.get('items')).toEqual(['B','A','C']); }); }); }); });
  11. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) {

    var items = this.get('items'); var index = _(items).indexOf(item) - 1; } });
  12. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) {

    var items = this.get('items'); var index = _(items).indexOf(item) - 1; items.splice(index,2,item,items[index]); } });
  13. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { }); }); });
  14. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { it("leaves the items as they were", function() { }); }); }); });
  15. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { beforeEach(function() { subject.moveUp('A'); }); it("leaves the items as they were", function() { }); }); }); });
  16. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function()

    { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { beforeEach(function() { subject.moveUp('A'); }); it("leaves the items as they were", function() { expect(subject.get('items')).toEqual(['A','B','C']); }); }); }); });
  17. run it yourself! http://is.gd/logic3 window.CallList = Backbone.Model.extend({ moveUp: function(item) {

    var items = this.get('items'); var index = _(items).indexOf(item) - 1; items.splice(index,2,item,items[index]); } });
  18. run it yourself! http://is.gd/logic3 window.CallList = Backbone.Model.extend({ moveUp: function(item) {

    var items = this.get('items'); var index = _(items).indexOf(item) - 1; if(index >= 0) { items.splice(index,2,item,items[index]); } } });
  19. ->

  20. run it yourself! http://is.gd/view1 describe "CallListView", -> beforeEach -> @subject

    = new CallListView describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp'
  21. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @subject

    = new CallListView describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> it "tells the model to move up the arrow's text", ->
  22. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> it "tells the model to move up the arrow's text", ->
  23. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') it "tells the model to move up the arrow's text", ->
  24. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') it "tells the model to move up the arrow's text", -> jasmine-fixture https://github.com/searls/jasmine-fixture
  25. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') @subject.moveUp target: $upArrow[0] it "tells the model to move up the arrow's text", ->
  26. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') @subject.moveUp target: $upArrow[0] it "tells the model to move up the arrow's text", -> expect(@model.moveUp).toHaveBeenCalledWith 'C'
  27. run it yourself! http://is.gd/view2 class CallListView extends Backbone.View events: "click

    .up-arrow": "moveUp" moveUp: (e) -> @model.moveUp $(e.target).text()
  28. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", ->
  29. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
  30. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar') jasmine-jquery https://github.com/velesin/jasmine-jquery
  31. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
  32. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model

    = jasmine.createSpyObj('CallList',['bind','moveUp','toJSON']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @model.toJSON.andReturn foo: "bar" @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
  33. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> $template

    = inject('<script id="call-list-template" type="text/html"></script>') $template.html('HTML <b>for</b> <%= foo %>') @model = jasmine.createSpyObj('CallList',['bind','moveUp','toJSON']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @model.toJSON.andReturn foo: "bar" @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
  34. run it yourself! http://is.gd/template1 class CallListView extends Backbone.View events: "click

    .up-arrow": "moveUp" initialize: -> @template = _.template($('#call-list-template').html()) moveUp: (e) -> @model.moveUp $(e.target).text()
  35. run it yourself! http://is.gd/template1 class CallListView extends Backbone.View events: "click

    .up-arrow": "moveUp" initialize: -> @template = _.template($('#call-list-template').html()) moveUp: (e) -> @model.moveUp $(e.target).text() render: -> $(@el).html(@template(@model.toJSON()))
  36. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’)
  37. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given
  38. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given When
  39. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given When Then
  40. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() Given When Then
  41. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() When -> @result = @subject.press() Given When Then
  42. beforeEach -> @subject = new Button() @result = @subject.press() it

    “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() When -> @result = @subject.press() Then -> @result == “ohhh yeah” Given When Then
  43. When -> @config = createConfig() Then -> @config.url == "http://moore.chris"

    Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens"
  44. When -> @config = createConfig() Then -> @config.url == "http://moore.chris"

    Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens" Then -> @config.bestDnDFriend == "James Smith"
  45. When -> @config = createConfig() Then -> @config.url == "http://moore.chris"

    Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens" Then -> @config.bestDnDFriend == "James Smith"
  46. When -> @config = createConfig() Then( -> @config.url == "http://moore.chris")

    .Then( -> @config.name == "Peter Kananen") .Then( -> @config.bestMochaFriend == "Josh Owens") .Then( -> @ config.bestDnDFriend == "James Smith")
  47. When -> @config = createConfig() Then( -> @config.url == "http://moore.chris")

    .Then( -> @config.name == "Peter Kananen") .Then( -> @config.bestMochaFriend == "Josh Owens") .Then( -> @ config.bestDnDFriend == "James Smith")
  48. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar') <div class="foo"><div

    class="bar"></div></div> $input = $bar.inject(el: 'input', id: 'woot').val(42)
  49. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar') <div class="foo"><div

    class="bar"></div></div> $input = $bar.inject(el: 'input', id: 'woot').val(42) <div...><div...><input id="woot" value="42"/></div></div>
  50. •g l e e * for the color scheme •clafouti

    for the despair statue •SteveFE for the pouting girl •ifollowtherabbit for another color scheme •mokra for the jaw-dropped baby •Epicality for the third color scheme credits