Full Stack Integration Testing with Node.js

These are the slides from my talk at NYC Node. The presentation is an overview of full-stack integration testing and how it can be more efficient and faster with Node.js

Transcript

1. @SwiftAlphaOne INTEGRATION TESTING @SwiftAlphaOne IN NODE.JS FULL STACK
2. @SwiftAlphaOne @SwiftAlphaOne swift@sendgrid.com 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 swift@sendgrid.com Thanks, I’m Swift.