Testing your Backbone from the outside-in

Transcript

1. Testin your Backbone from the outside-in Jim Newbery @froots101

2. JavaScript 2004 LOL DHTML MENUS!

3. JavaScript 2012 ZOMG CALLBACKS! REALTIME! NETWORKING! MEMORY! MOBILE!

4. Backbone.js — TDD

5. • decoupled units • few dependencies • conventions

6. The TDD cycle

7. RED failin test GREEN test passes REFACTOR

8. How do we know when we’re finished?

9. Behaviour-driven development

10. Focus on • business value • user oals • communication

11. Outside-in approach • User oals • Scenarios • Behavioural interactions

12. The BDD Cycle

13. RED GREEN RE- FACTOR Unit RED failin test GREEN test

    passes REFACTOR Acceptance

14. Tools

15. Automated Acceptance Testin is a pain in the arse

16. Acceptance testin pains • Slow • Non-deterministic • Difficult to

    debu • Incomplete browser features

17. “Write as few as possible, but no fewer” — Brandon

    Keepers

18. Can I write my acceptance tests in JavaScript?

19. JS acceptance test options • Cucumber.js & Zombie • CasperJS

    & PhantomJS

20. Example Snippetron: a revolutionary code snippet mana er

21. A user story As an efficient developer, I would like

    to save a snippet, So that I can retrieve it later

22. A BDD scenario Given I have no snippets yet When

    I fill out and submit the snippet form Then I should see a messa e sayin my save was successful

23. Snippetron Create a snippet Snippet title My first snippet Snippet

    contents var  a  =  5  *  5; Create snippet

24. Snippetron Create a snippet Snippet title Snippet contents Create snippet

    Snippet “My first snippet” saved!

25. CasperJS A scriptin and navi ation utility for PhantomJS

26. Some CasperJS assertions assert() assertEquals() assertExists() assertHttpStatus() assertMatch() assertResourceExists() assertTitle()

    assertUrlMatch() assertEval()

27. Useful acceptance testin features back()  &  forward() click() debugHTML() fill()

    getGlobal() mouseEvent() userAgent() viewport() capture() waitForSelector() waitForResource() waitUntilVisible()

28. var  baseUrl  =  "http://localhost:3000"; casper.test.comment("Scenario:  Create  a  snippet"); casper.test.comment("Given  I

     am  on  the  home   page"); casper.start(baseUrl,  function()  {    this.test.comment("When  I  fill  out  the  form");    this.fill("form.create-­‐snippet",  {        "title":  "Alert  example",        "content":  "alert('Hello  World!');"    });    this.test.comment("And  I  submit  the  form");    this.click("input[type='submit']"); }); ...

29. ... casper.test.comment("Then  I  should  see  a  message"); casper.waitUntilVisible(".message",  function()  {

       this.test.assertTextExists("Snippet  'Alert  example'  saved!"); },  function()  {    this.debugHTML();    this.test.fail("Create  snippet  message  timed  out"); },  3000); casper.run(function()  {    this.test.done(); });

30. CasperJS test output d1

31. Cucumber.js Pure JS port of the popular BDD story runner

32. Cucumber.js feature Feature:  Saving  a  snippet    As  an  efficient

     developer    I  would  like  to  save  a  snippet    So  that  I  can  retrieve  it  later

33. Cucumber.js scenario Scenario:  Successful  save    Given  I  am  on

     the  home  page    When  I  enter  "My  Snippet"  in  the  "Snippet  title"  field    And  I  enter  "Snippet  content"  in  the  "Snippet  content"  field    And  I  click  the  "Create  snippet"  button    Then  I  should  see  a  message  with  "Snippet  'My  Snippet'  saved!"

34. Cucumber.js step definitions this.Given(/^I  am  on  the  home  page$/,  function

    (callback)  {    this.visit("/",  callback); }); this.When(/^I  enter  "([^"]*)"  in  the  "([^"]*)"  field$/,   function(val,  fieldSelector,  callback)  {    this.browser.fill(fieldSelector,  val,  callback); });

35. Cucumber.js step definitions this.Then(/^I  should  see  a  message  with  "([^"]*)"$/,

       function(messageText,  callback)  {    if  (this.browser.text(".message")  !==  messageText)  {        callback.fail(new  Error("Expected  to  see  a  message  with   text  '"  +  messageText  +  '"'));    }  else  {        callback();    } });

36. A failin Cucumber.js scenario

37. Time for a unit test RED GREEN RE- FACTOR Unit

    RED failin test Acceptance

38. RED failin test Acceptance GREEN RE- FACTOR GREEN test passes

    REFACTOR RED Unit

39. What unit to work on? A failin acceptance test can

    provide a clue CasperJS Cucumber.js

40. Plannin & Communication submit handler Form view Snippet model creates

    + saves Server POST request show messa e success handler response submit user

41. Unit testin

42. Many many tools • QUnit • Jasmine BDD • Mocha

    • Node.js test frameworks • Countless others

43. BusterJS a JavaScript testin toolkit

44. BusterJS features • Multiple-browser testin • TDD or BDD syntax

    styles • inte rated test doubles: spies, stubs & mocks

45. Why use test doubles? • Isolate subject of test •

    Ensure determinism • Protect from slow, inconsistent or incomplete dependencies

46. SinonJS – a BDDer’s best friend • Send objects on

    spyin missions • Stub method responses • Stand-ins for server interactions • Manipulate space-time* *Well, time

47. Example Savin a model

48. describe("Snippet.Model",  function()  {    describe("when  saved",  function()  {    

       beforeEach(function()  {            this.server  =  sinon.fakeServer.create();                        this.attrs  =  {                title:  "My  Snippet",                content:  "My  Snippet  content"            };            this.subject  =  new  Snippet.Model();            this.subject.save(this.attrs);        });        afterEach(function()  {            this.server.restore();        }); ...

49. ...        it("makes  a  request  to  the  root",

     function()  {            expect(this.server.requests[0].url).toEqual("/");        });        it("submits  the  correct  body",  function()  {            var  body  =  JSON.parse(this.server.requests [0].requestBody);            expect(body.title).toEqual(this.attrs.title);            expect(body.content).toEqual(this.attrs.content);        });    }); });

50. Browser slavery

51. The BusterJS test runner

52. Fulfillin the example

53. var  Snippet  =  {    Model:  Backbone.Model.extend({  urlRoot:  "/"  }),

    };

54. The joy of reen - BusterJS

55. … a few cycles later …

56. var  Snippet  =  {    Model:  Backbone.Model.extend({  urlRoot:  "/"  }),

       Views:  {        Form:  Backbone.View.extend({            events:  {                "submit":  "create"            },            create:  function(ev)  {                ev.preventDefault();                this.model  =  new  Snippet.Model();                this.model.save({                    "title":  this.$("[name='title']").val(),                    "content":  this.$("[name='content']").val()                });            }        })    } };

57. The joy of reen - BusterJS

58. The joy of reen – CasperJS

59. The joy of reen-ish – Cucumber.js

60. The joy of reen

61. Hold your horses

62. RED Unit Refactorin is important GREEN GREEN test passes RE-

    FACTOR REFACTOR

63. What’s next? • Next acceptance test? • Exceptional circumstances •

    e. . validation, double submit • Exploratory testin

64. More techniques: tinnedfruit.com cjohansen.no addyosmani.com

65. This is just the start

66. Thanks! @froots101 Fork it! https:// ithub.com/froots/snippetron