Backbone.js Testing (A Book!)

SeattleJS - Dec. 19th, 2013

Ryan Roemer | @ryan_roemer

@FormidableLabs

The Frontend!

Web apps are getting very frontend heavy.

... 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: Framework
Chai: Assertions
Sinon.JS: Fakes - spies and stubs

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}/);
  });
});