SeattleJS - Backbone.js Testing

Backbone.js Testing (A Book!)

SeattleJS - Dec. 19th, 2013

Ryan Roemer@ryan_roemer

@FormidableLabs

The Frontend!

Web apps are getting very frontend heavy.

Formidable Labs

... but Tested?

The frontend is hard to test.

Asynchronous events, timing, browsers, technologies.

My Journey

Began in the difficult days of Rhino and Env.js.


Recently led development on a very large Backbone.js app and needed deeply test.

Getting better

Revisited the area and found things were much better and that the area had become really exciting!

A Book

And then I got roped into writing a book.

A Lightning Talk

About a year ago I gave a SeattleJS lightning talk about a book I was writing...

... and here's the takeaway:

Testing on the Frontend

  • Test harnesses / infrastructure
  • Suites
  • Assertions
  • Fakes
  • Automation

Large App(s) Challenges

  • Wiring various parts together
  • DOM interaction
  • Backend server communication
  • Timing, asynchronous events
  • Single pages with many mini-apps.

Focus

  • Unit tests (not functional tests)
  • Fast, fast, fast!
  • Minimal dependencies, no network
  • Fake it to keep things simple
  • Automate it

Place and Purpose

  • The complement to functional testing
  • Developer-focused
  • Make sure (nearly) all the JS has been imported and run

Test Libraries

Mocha

  • Spec: A test.
  • Suite: A collection of specs or suites.
describe("single level", function () {
  it("should test something");
});

describe("top-level", function () {
  describe("nested", function () {
    it("is slow and async", function (done) {
      setTimeout(function () { done(); }, 300);
    });
  });
});

Chai Assertions

  • Natural language syntax. (to, be, been, have)
  • Chained assertions. (and)
describe("hello", function () {
  it("should say hello", function () {
    expect(hello("World"))
      .to.be.a("string").and
      .to.equal("Hello World!").and
      .to.have.length(12).and
      .to.match(/He[l]{2}/);
  });
});

Sinon.JS Fakes

Dependencies, complexities? Fake it!

Automation

Drive our frontend tests with PhantomJS using Mocha-PhantomJS

And Testem and Karma for multi-browser.

And Sauce

The Tests!

Tests

Coverage

... and the command line.

Since Then ...

I Wrote the Book

  • Long hours, really tiring
  • Really great technical reviewers
  • An awful, wonderful experience

I Wrote About Writing the Book

loose-bits.com

It Got Published

Backbone.js Testing

Thanks!

Ryan Roemer@ryan_roemer


formidablelabs.github.io/seattlejs-lightning-testing

backbone-testing.com