Selecting a Backbone.js application to test

Devising and implementing a test plan is fundamentally a practical exercise, and we can better achieve our goal of overall application reliability by applying test lessons and techniques to a real application-whether it is one that has just been started or an existing application in need of better test coverage.

If you already have a Backbone.js application in development, you can most likely skip to the next section of this chapter. One potential issue we want to identify is the complexity of the existing application, especially one with minimal or no existing tests. Complicated dependencies, non-modular design, and highly coupled application components may require extensive mocking and stubbing to even permit a base level of test framework integration. Ultimately, the test infrastructure written around a legacy application will likely be quite different from the one written around a modular, decoupled application such as Notes. Accordingly, you may wish to use our reference application as a learning tool instead.

We provide a small reference Backbone.js application to use along with this book, simply named Notes. Notes is an online note manager that allows a user to create, view, and edit notes using the Markdown (http://daringfireball.net/projects/markdown/) language. You can try out an online demo of the application at http://backbone-testing.com/notes/app/.

The full source code of Notes is available as part of the examples repository (see the Preface for the download instructions). We actually provide two versions of the Notes application that share most of the same underlying code. They are as follows:

• Local Application: The notes/ directory in the examples repository contains an application backed by HTML5 localStorage (https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage) for persistent, client-side storage in a web browser. The application can be run without a network connection from a URL based on file://, and will be used for most of the examples in this book.
• Server Application: The notes-rest/ directory in the examples repository contains an application backed by a MongoDB database and served by a Node.js web server (available at notes-rest/server.js). The examples repository contains further instructions on installing and running the backend server.

Getting acquainted with the Notes application

The Notes application initially presents a user with a list of existing note titles with buttons for editing/deleting individual notes. The page also provides a Write a new note input form for creating notes and a simple search box for a user to filter displayed notes by title.

Notes list

Clicking on a note title, such as Things to do in Washington, DC., activates the single note view and displays the note with rendered HTML (headings, bulleted lists, and so on):

Single note view

The single note editor provides form inputs for title and Markdown text data. Any changes to the title or text are immediately saved to the backing datastore and made available for viewing:

A single-note-editing form

The anatomy of the Notes application

The JavaScript script tags in the notes/app/index.html web page illustrate the program files and the overall structure of the application:

<!-- JavaScript Core Libraries --> <script src="js/lib/underscore.js"></script> <script src="js/lib/jquery.js"></script> <script src="js/lib/backbone.js"></script> <script src="js/lib/backbone.localStorage.js"></script> <script src="js/lib/bootstrap/js/bootstrap.js"></script> <script src="js/lib/showdown/showdown.js"></script> <!-- JavaScript Application Libraries --> <script src="js/app/namespace.js"></script> <script src="js/app/config.js"></script> <script src="js/app/models/note.js"></script> <script src="js/app/collections/notes.js"></script> <script src="js/app/templates/templates.js"></script> <script src="js/app/views/note-nav.js"></script> <script src="js/app/views/note-view.js"></script> <script src="js/app/views/note.js"></script> <script src="js/app/views/notes-item.js"></script> <script src="js/app/views/notes-filter.js"></script> <script src="js/app/views/notes.js"></script> <script src="js/app/routers/router.js"></script> <!-- Bootstrap and start application. --> <script src="js/app/app.js"></script>

Don't worry if the long list of JavaScript libraries and application files looks foreboding. We will introduce each application piece as we test it. The examples in this book stand on their own without the need to look at the full source code of the Notes application. At the same time, downloading, running, and testing the Notes application is a useful exercise, particularly as you advance to the later chapters of this book and want to see the entire test collection put together in a single package.

Working our way through the JavaScript libraries, we start with the familiar core of Backbone.js (v1.0.0), Underscore.js (v1.4.4), and jQuery (v2.0.2). The additional vendor libraries in notes/app/js/lib/ include:

• Backbone.localStorage: This allows us to save model data into the localStorage database for the notes/app/ example application-https://github.com/jeromegn/Backbone.localStorage
• Bootstrap: This is a popular user interface layout and components library-http://twitter.github.io/bootstrap/
• Showdown: This converts Markdown text (for example, ## Heading) to formatted HTML (for example, <h2>Heading</h2>)-https://github.com/coreyti/showdown

In terms of application structure and event flow, the key components of Notes can loosely be presented in a hierarchical fashion as follows:

app App.Routers.Router App.Views.Notes App.Views.NotesFilter App.Views.NotesItem App.Collections.Notes App.Templates App.Views.Note App.Views.NoteNav App.Views.NoteView App.Models.Note App.Templates

The application app bootstraps various application parts and starts up the router App.Routers.Router. The router routes hash fragments to either the list view App.Views.Notes or the single note view App.Views.Note. Both of these views use Underscore.js template strings from App.Templates. The list view App.Views.Notes contains two additional view objects for filtering and displaying list items, and a collection of notes. The App.Views.Note single note view contains two views objects for menu bar navigation actions and rendering Markup, and a note model.

Diving into the application files, the notes/app/js/app/ directory decomposes into module groups, starting with some helper utilities:

• namespace.js: This sets up a global namespace for our application classes (App) and instance (app)
• config.js: This sets up configuration variables for the application instance, which we will be overriding in some of our tests

The application has a single model and collection that abstract the note data:

• App.Models.Note (models/note.js): This is a model class that represents a note
• App.Collections.Notes (collections/notes.js): This is a collection that wraps App.Models.Note model instances, representing a list of notes

All view templates are maintained in one file:

• App.Templates (templates/templates.js): This is an object literal that contains the Underscore.js template strings for rendering HTML sections for various views

The single note page has three view objects-a parent view (App.Views.Note) containing a child view (App.Views.NoteView) that renders a note, and a helper view (App.Views.NoteNav) for interacting with the navigation bar.

• App.Views.NoteNav (views/note-nav.js): This is a helper view that controls the note navigation bar options View, Edit, and Delete and listens for / triggers events for interaction with other views.
• App.Views.NoteView (views/note-view.js): This is a child view that renders note Markdown data as HTML.
• App.Views.Note (views/note.js): This is a parent view that represents a single App.Models.Note model for viewing, editing, and deleting. It contains the App.Views.NoteView child view and the App.Views.NoteNav helper view.

The list of notes on the home page has a similar assortment of...