ContinuouslY Integrated JS DevelopmenT
with Buster.js @ Fitbit
Garrick Cheung
twitter: @garrickcheung
Senior frontend dev @
Slides heavily inspired by Tiago Rodrigues (@trodrigues)
Testing
You're testing your code... right?
Testing
If you don't test your code... how do you know it's working properly?
Testing
What if you make a change? How do you keep track of what needs to be tested?
JS Unit tests!
Of course, just write the tests and run them after making changes. An obvious record of what is tested.
Testing @ Fitbit
- Buster.js
- Phantom.js
- Jenkins (building, deployment, CI)
- Selenium (yes.. about that..)
Buster.js
- Full fledged JS testing framework
- Works very well in node.js and browsers
- "Beta", but very stable @v0.7.13
Why Buster.js?
It's like Mocha, Jasmine and JSTestDriver had a genetically engineered baby
Mostly all the features of all of those frameworks, but well put together
And it has a test runner!
Buster.js
- Open various browsers
- Run tests
- ????
- Profit!
Buster.js
Support for AMD
$ npm install buster-amd
Buster.JS
Support for AMD
var config = module.exports;
config["web-module"] = { environment: "browser", rootPath: "js", sources: ["someModule.js"], tests: ["test/*-test.js"], libs: ["require.js"], extensions: [require("buster-amd")] };
Buster.js
Support for AMD
// someModule.js
define([], function() {
return { name: "module" };
});
Buster.js
Support for AMD
// someModule-test.js
define(["someModule"], function(mod) {
buster.testCase("some test", {
"test that fails" : function() {
assert.match(mod, {name: "wrong name"});
},
"test that succeeds" : function() {
assert.match(mod, {name: "module"});
}
});
});
Running Buster.js Tests with Phantom.js
$ npm install buster phantomjs
# Run buster-server to capture phantomjs in a separate process
$ ./node_modules/.bin/buster-server --capture-headless
# Run tests
$ ./node_modules/.bin/buster-test --browser
Buster.js with Jenkins
$ ./node_modules/buster/bin/buster-test --reporter xml > test/test-report.xml
Buster.js With Selenium
$ npm install buster-selenium
Buster.js With Selenium
var config = module.exports;
config["Selenium Tests"] = {
rootPath: "js",
environment: "node",
extensions: [require("buster-selenium")],
tests: ["test/wd-test.js"],
"buster-selenium": {
driver: 'wd',
config: {
server: {},
desiredCapabilities: {
browserName: 'phantomjs'
}
}
}
};
Buster.js with Selenium
var buster = require('buster');
var assert = buster.assert;
// globalize describe/before/after/it functions
buster.spec.expose();
describe('WD', function() {
before(function() {
// New browser instance with WD's promise API
var browser = this.browser = this.webdriver.browser('promise');
return browser.init();
});
after(function() {
// Returned promise will wait for the browser
// to close before completing this test
return this.browser.quit();
});
it('goes to Google', function() {
var driver = this.webdriver.driver;
var browser = this.browser;
return browser.get('http://www.google.com').then(function() {
return browser.title();
}).then(function(title) {
assert.equals(title, 'Google');
return browser.elementByName('q');
}).then(function(input) {
return input.type('webdriver');
}).then(function() {
return browser.elementByName('btnG');
}).then(function(button) {
return button.click();
}).then(function() {
var defer = (driver.Q || browser.Q).defer();
browser.waitForCondition('document.title === "webdriver - Google Search"', 5000, defer.resolve);
return defer.promise;
}).then(function() {
return browser.title();
}).then(function(title) {
assert.equals(title, 'webdriver - Google Search');
});
})
});
Buster.js with Selenium
# Run the tests
$ ./node_modules/.bin/buster-test --node
Tests are done
And so is this presentation, thank you.
Continuously Integrated JS DevelopmenTwith Buster.js
By Garrick Cheung
Continuously Integrated JS DevelopmenTwith Buster.js
- 2,340