The ecosystem of frontend JavaScript test frameworks is quite rich, with libraries supporting different paradigms, features, and functionality. Choosing tools from this collection is a difficult task, without clear correct answers. In this book, we have settled on three complementary libraries, Mocha, Chai, and Sinon.JS, that provide an aggregate set of features particularly well suited for testing Backbone.js applications. In addition to these libraries, we will use the PhantomJS headless web browser to automate our test infrastructure and run tests from the command line.
Note
Server-side JavaScript testing with Mocha, Chai, and Sinon.JS
Beyond the browser, JavaScript has seen a meteoric rise as a server technology via the immensely popular Node.js framework, supplanting traditional server-side languages and providing developers with a single-language web application stack. Although we will only discuss frontend testing in this book, the three core testing libraries we use are all available as server-side testing modules for Node.js. There are some non-trivial differences in integration and use (for example, Mocha reports are run from the command line and not a browser), but many of the general testing and application design concepts we will cover in this book equally apply to Node.js server applications, and you can conveniently use exactly the same test libraries in your frontend and backend development.
Following the repository structure discussed previously, we will download each of the test library files to the test/js/lib/ directory. After this, we will be ready to write and run a test web page against the libraries. Note that although we pick specific library versions in this book to correspond with the downloadable examples code, we generally recommend using the most recent versions of these libraries.
The Mocha (http://visionmedia.github.io/mocha/) framework supports test suites, specs, and multiple test paradigms. Some of the nifty features offered by Mocha include frontend and backend integration, versatile timeouts, slow test identification, and many different test reporters.
To run Mocha tests in a browser, we just need two files—mocha.js and mocha.css. For version 1.9.0, both these files are available from GitHub at the following locations:
Note
At the time this book went to press, the most current versions of Mocha (1.10.0 and above) have introduced an incompatibility with the Mocha-PhantomJS automation tool that we will use later in this book. You can watch the Mocha (https://github.com/visionmedia/mocha/issues/770) and Mocha-PhantomJS (https://github.com/metaskills/mocha-phantomjs/issues/58) tickets for status updates and possible future fixes.
The JavaScript (mocha.js) file contains the library code and the CSS (mocha.css) file provides the styles for the HTML reporter page. With these files in place, we can organize our tests into suites and specs, run our tests, and get a usable report of test results.
Note
Why Mocha?
Mocha is just one framework from an overall collection of great test libraries. Some of the strengths of the Mocha framework include solid asynchronous test support, server-side compatibility, alternative test interfaces, and flexible configurability. But, we could just as easily go with another test library.
As an example of an alternate framework, Jasmine (http://pivotal.github.io/jasmine/) from Pivotal Labs is another enormously popular JavaScript testing framework. It provides test suite and spec support, a built-in assertion library, and many more features (including test spies)—it is essentially an all-in-one framework. By contrast, Mocha is quite flexible, but you have to add additional components. For example, we leverage Chai for assertions and Sinon.JS for mocks and stubs in the test infrastructure of this book.
Chai (http://chaijs.com/) is a test assertion library that offers an extensive API, support for Behavior-Driven Development (BDD) and Test-Driven Development (TDD) test styles, and a growing plugin ecosystem. BDD and TDD will be introduced in more detail in Chapter 2, Creating a Backbone.js Application Test Plan. In particular, we will use Chai's chainable test functions to write assertions that read very closely to natural language, allowing tests to maximize comprehensibility while minimizing the need for explanatory code comments.
For integration, we need to download a single library file—chai.js. The version (1.7.1) that we want is available at https://raw.github.com/chaijs/chai/1.7.1/chai.js.
Alternatively, the current stable version of Chai can be found at http://chaijs.com/chai.js.
The Sinon.JS library (http://sinonjs.org/) provides a powerful suite of test spies, stubs, and mocks. Spies are functions that analyze and store information about an underlying function and can be used to verify historical behavior of the function under test. Stubs are spies that can replace a function with a different behavior more amenable to testing. Mocks spy on and stub functions as well as verify that certain behavior has occurred during test execution. We will explain these tools in more detail throughout this book.
In practice, Backbone.js applications comprise many different and constantly interacting parts, making our goal of testing isolated program components difficult. A mocking library such as Sinon.JS will allow us to separate testable application behaviors and focus on one thing (for example, a single view or a model) at a time.
Like Chai, we just need a single JavaScript file to use Sinon.JS in our tests. Versioned releases—we will use version 1.7.3—are available at either of the following locations:
Installation of Sinon.JS, along with Mocha and Chai, completes the acquisition phase of our test infrastructure creation.