Testing Realtime web apps with Cucumber.js

Paul Jensen's presentation from CukeUp 2013, London UK.

Transcript

1. Testing Realtime web apps with Cucumber.js Paul Jensen
2. About me I work at Axisto Media I’m a Ruby on Rails / Node.js developer I’m a Core contributor to SocketStream
3. April 2012
4. I was fired from a startup
6. It felt like a death sentence on my career
7. A few weeks later, I decided I wanted to prove that I wasn’t a crap developer.
8. So I built an app called Dashku
10. July 2012
11. I posted Dashku to Hacker News
12. About a week later, Chris Matthieu at Bechtel got in touch
13. “Hi, we’d like to use Dashku within our company”
14. “Sure, but there’s a small thing...”
15. “...it’s a 2 month prototype. It has no tests!”
16. “We’d like to use it anyway”
17. :)
18. : o
19. *Truth is I needed money, so I offered to write a test suite for Dashku.
20. The road to testing Dashku
21. Dashku was powered by C ff S r p SockJS
22. The client was written in... A custom stack
23. The client was written in... A custom stack ✔ x x x
24. - The app is a single page app - Client-Server interaction happens over the WebSocket protocol. - The client-side framework is custom. - The tech stack is bleeding edge.
25. How do you test this application?
26. It had to be in the browser
27. In the past at AOL, we kind of did this
29. We tested this app using Ruby & RSpec to drive a web browser
30. This was a bit like...
32. It worked, but it wasn’t ideal (we seeded data outside of business logic)
33. For Dashku, I wanted to use Cucumber, & I wanted to test it all in Node.js
34. I wanted to be like...
36. We needed a tool to run Cucumber features in Node.js
38. Cucumber.js was the most important part of our test suite
39. We could write tests like this Feature: login In order to use the site As a user I want to login Scenario: Login (with username) Given a user exists with username "paulbjensen" and email "paulbjensen@gmail.com" and password "123456" And a dashboard exists with name "Your Dashboard" for user "paulbjensen" And I am on the homepage And I follow "Login" And the "login" modal should appear And I fill in "identifier" with "paulbjensen" And I fill in "password" with "123456" And I press "Login" Then the "login" modal should disappear And I should be on the dashboard page
40. We would then need to hook up the Cucumber steps to... - Seed/Clean the database with data - Open a web browser - Click buttons, fill in text fields - Check that the app did what we expected
41. We then needed a tool to power a web browser
44. Soda & Selenium Launcher could power a web browser via Selenium and Node.js
45. How could we make Cucumber.js work with Soda and Selenium Launcher?
46. Start with Cucumber.js’ world file
47. features/support/world.coffee World = (callback) -> callback {} exports.World = World
48. Make the World file available to your Step Definitions
49. features/step_definitions/myStepDefinitions.coffee module.exports = -> @World = require("../support/world.coffee").World
50. Let’s find a way to power the web browser via the step definitions
51. An example of Soda’s API browser .chain .session() .open('/') .type('q', 'Hello World') .end(function(err){ browser.testComplete(function() { console.log('done'); if(err) throw err; }); });
52. features/support/world.coffee selenium = require 'selenium-launcher' soda = require 'soda' # We want to spin up the selenium server & client once browser = null World = (callback) -> if browser is null # Boot the selenium server selenium (err, selenium) => # Boot the selenium client browser = soda.createClient host: selenium.host port: selenium.port url: "http://localhost:3000" browser: "firefox"
53. features/support/world.coffee # Make Soda's browser object available to # the step definitions @browser = browser callback {@browser} # Kill the selenium server when the process ends process.on 'exit', -> selenium.kill() else # Make Soda's browser object available to # the step definitions @browser = browser callback {@browser} exports.World = World
54. features/step_definitions/myStepDefinitions.coffee # A helper function to DRY up calls to Soda's API wrap = (funk, cb) -> funk.end (err) -> if err? cb.fail err else cb() module.exports = -> @World = require("../support/world.coffee").World @Given /^I am on the homepage$/, (callback) -> wrap @browser.chain.session().open('/'), callback
55. With this in place, we can power the web browser from our Cucumber steps
56. We then needed to boot the SocketStream application, and seed the database
57. To boot SocketStream, simply load the file where the app is booted.
58. features/support/world.coffee selenium = require 'selenium-launcher' soda = require 'soda' process.env["SS_ENV"] = "cucumber" ss = require 'socketstream' config = require '../../server/config.coffee' app = require '../../app.coffee' browser = null World = (callback) ->
59. To Seed/Clear the database, expose your models in the Step definitions file
60. server/internals.coffee # Internals, where all the config is loaded and set into the application ss = require 'socketstream' app = models : {} controllers : {} schemas : {} helpers : {} app.config = require('./config')[ss.env] require("./db") app require("./helpers") app require("./controllers/dashboard") app require("./controllers/widget") app ss.api.add 'app', app
61. server/db.coffee # npm modules mongoose = require 'mongoose' redis = require 'redis' ss = require 'socketstream' module.exports = (app) -> # Redis-related configuration app.Redis = redis.createClient app.config.redis.port, app.config.redis.host app.Redis.auth(app.config.redis.pass) if ss.env is 'production' # MongoDB-related configuration mongoose.connect "mongodb://#{app.config.db}" require("#{__dirname}/models/user.coffee") app require("#{__dirname}/models/widget.coffee") app require("#{__dirname}/models/dashboard.coffee") app require("#{__dirname}/models/widgetTemplate.coffee") app
62. server/models/widgetTemplate.coffee #### WidgetTemplate model #### mongoose = require 'mongoose' module.exports = (app) -> app.schemas.WidgetTemplates = new mongoose.Schema name : type: String html : type: String css : type: String script : type: String scriptType : type: String, default: 'javascript' json : type: String snapshotUrl : type: String width : type: Number, default: 200 height : type: Number, default: 180 createdAt : type: Date, default: Date.now updatedAt : type: Date, default: Date.now WidgetTemplate = mongoose.model 'WidgetTemplate', app.schemas.WidgetTemplates app.models.WidgetTemplate = WidgetTemplate
63. features/stepDefinitions/myStepDefinitions.coffee fs = require "fs" ss = require 'socketstream' User = ss.api.app.models.User Dashboard = ss.api.app.models.Dashboard WidgetTemplate = ss.api.app.models.WidgetTemplate widgetController = ss.api.app.controllers.widget module.exports = -> @World = require("../support/world.coffee").World @Before (callback) -> User.remove {}, (err) -> Dashboard.remove {}, (err) -> WidgetTemplate.remove {}, (err) -> callback()
64. features/stepDefinitions/myStepDefinitions.coffee @Given /^a user exists with username "([^"]*)" and email "([^"]*)" and password "([^"]*)"$/, (username, email, password, callback) -> user = new User {username, email, password} user.save (err, doc) -> if err? callback.fail err else callback()
65. features/stepDefinitions/myStepDefinitions.coffee @Given /^there should be a user with username "([^"]*)"$/, (username, callback) -> User.find {username}, (err, docs) -> if !err? and docs.length is 1 callback() else callback.fail "Expected there to be 1 user record with username #{username}, but found #{docs.length}"
66. There was no magic bullet - you just have to stitch the libraries together
67. But once you stitch them together, it feels like magic
68. Let’s see it in action
69. Tips for using Soda
70. 1 - Whatever you do, put this in your Step Definitions file @After (callback) -> wrap @browser.chain.testComplete(), callback
71. ... or this will happen.
72. 2 - waitForElementPresent is your friend @Given /^I click on the "([^"]*)" button$/, (name, callback) -> detectButton name, (selector) => wrap @browser .chain .waitForElementPresent(selector) .click(selector) , callback
73. Use waitFor to delay executing the next chained call, until a condition is met
74. 3 - Master XPATH selectors and the selenium commands reference @Then /^there should be an "([^"]*)" item in the Dashboards menu list$/, (item, callback) -> wrap @browser.chain.assertElementPresent("//span[contains(text(),'#{item}')]"), callback
75. http:// release.seleniumhq.org/ selenium-core/1.0.1/ reference.html
76. Other tips
77. You can use Travis to run your cucumber.js tests
79. .travis.yml language: node_js node_js: - 0.8 services: - mongodb - redis-server before_install: - "export DISPLAY=:99.0" - "sh -e /etc/init.d/xvfb start" script: npm test && npm run-script cuke
80. github.com/anephenix/dashku
81. Also, if you’re thinking of building a SocketStream app, and would like to use Cucumber.js with it...
82. github.com/anephenix/ss-cucumber
83. ss-cucumber will generate files and folders to help you use Cucumber.js with SocketStream
84. Example npm install -g ss-cucumber cd <PATH_TO_SOCKETSTREAM_APP> ss-cucumber init
85. Final Thoughts
86. If I wasn’t fired a year ago, none of this would exist.
87. Bleeding-edge Realtime-web apps can be tested using Cucumber!
88. “- Everything around you that you call life was made up by people that were no smarter than you ... and you can change it, you can influence it, you can build your own things that other people can use. Once you learn that, you'll never be the same again." Steve Jobs
89. Thank You @paulbjensen