Testing your Backbone from the outside-in

In the world of dynamic, asynchronous, real-time client-server applications, testing is hard. Fortunately, we already have the tools available to create full suites of acceptance, integration and unit tests, and use behaviour-driven design (BDD) methodologies to tease out a working implementation from the starting point of users' needs.

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