Full Stack Integration Testing with Node.js

Transcript

1. @SwiftAlphaOne INTEGRATION TESTING @SwiftAlphaOne IN NODE.JS FULL STACK

2. @SwiftAlphaOne @SwiftAlphaOne [email protected] Hi, I’m Swift.

3. @SwiftAlphaOne FULL STACK When  we  say “ ” what  do

    we  mean?  

4. @SwiftAlphaOne it("should list all persons in response", function() { var

   response = readFixtures("persons.json"); var options = {}; var view = new PersonsView({ collection: new Persons() }); view.render(); fakeResponse(response, options, function() { view.collection.fetch(); }); expect(view.$('.persons li').length).toEqual(20); }); Exhibit A

5. @SwiftAlphaOne

6. @SwiftAlphaOne $(function() { /* ... */ var AppView = Backbone.View.extend({

   el: $("#myapp"), initialize: function() { var view = new PersonsView({ collection: new Persons() }); view.collection.fetch(); }, /* ... */ }); var App = new AppView; }); WHAT IF I NEVER CALL RENDER?

7. @SwiftAlphaOne

8. @SwiftAlphaOne WRITING BAD TESTS “ ” IS WORSE THAN NOT

   WRITING TESTS

9. @SwiftAlphaOne Complexity GROW AS YOUR TESTS + More & More

   test Wasted Dev Time

10. @SwiftAlphaOne insert slide(s) about why Node.js is good [ ]

11. @SwiftAlphaOne A BETTER STRATEGY PHASE 1: PHASE 2: PHASE 3:

    Load the page in a browser* Perform the necessary actions Profit. *simulated browsers are ok too (And verify that they behave as expected)

12. @SwiftAlphaOne PHASE 1: BROWSER vs. vs. J DOM S

13. @SwiftAlphaOne PHASE 1: BROWSER Zombie.js, I Choose YOU https://github.com/assaf/zombie

14. @SwiftAlphaOne var browser = new Browser() , fakeData = readFixtures("persons.json");

    fakeAPIResponse('/persons', fakeData); browser.visit("http://localhost:3000/", function () { assert.ok(browser.success); var persons = browser.queryAll(".persons li"); assert.lengthOf(persons, 20); }); Exhibit B

15. @SwiftAlphaOne PHASE 2: THE TESTS V w (Pretty funny how

    all three have green logos...)

16. @SwiftAlphaOne Feature: viewing a list of persons In order to

    figure out who is awesome As a visitor I want to see a list of awesome persons Scenario: viewing a list of persons Given "/api/v1/users" returns the following JSON response: """ [{"name": "swift"}, {"name": "john"}] """ When I visit the home page Then I should see 2 persons Exhibit C

17. @SwiftAlphaOne sharedSteps = module.exports = -> @World = require("../support/world").World @When

    /^I visit the home page$/, (next) -> @visit "/", next @Then /^I should see (\d+) persons$/, (count, next) -> persons = @browser.queryAll(".persons li") assert.lengthOf(persons, parseInt(count)) next() UNDER THE HOOD

18. @SwiftAlphaOne var app = require('../../app') , Browser = require('zombie'); Browser.site

    = 'http://localhost:3000'; function World(callback) { this.browser = new Browser(); this.visit = function(url, callback) { this.browser.visit(url, callback); }; callback(); }; exports.World = World; UNDER THE HOOD (continued...)

19. @SwiftAlphaOne WHAT ABOUT API STUBS/MOCKS? https://github.com/flatiron/nock Nock! Nock! Who’s there?

20. @SwiftAlphaOne fakeAPIResponse = (url, response, next) -> @mock.get(url).reply(200, JSON.parse(response)) next()

    @Given /^"([^"]*)" returns this response:$/, fakeAPIResponse @After "@API", (next) -> @mock.done() next() A SIMPLE NOCK EXAMPLE

21. @SwiftAlphaOne Now, your code is good And you should feel

    good

22. @SwiftAlphaOne Questions?

23. @SwiftAlphaOne @SwiftAlphaOne [email protected] Thanks, I’m Swift.