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