Backbone.js applications are quite amenable to testing separation. Backbone.js provides a small number of core components that mostly avoid interdependencies. Our goal in this section is to identify the different parts of a Backbone.js application that can be unit tested in isolation and start thinking about the features of each one that we should test. Many components can simply be instantiated alone while others will need some extra mocking or patching help in our tests.
Backbone.js models most often are independent entities that can be instantiated with a simple new MyModel({foo: 123}) invocation. Accordingly, we can create standalone model objects in our tests without references to any other objects. Our model tests should include the assertions that:
- Objects can be instantiated with supplied and/or default values
- Data can be synchronized with a backing datastore (for example,
localStorageor a REST server) - Custom and built-in events fire and/or are consumed on appropriate state changes
- Validation logic accurately distinguishes the correctness of attribute data
Collections customarily have a single dependency on a model, declared like model: MyModel in the class definition. We can either directly instantiate collections in our tests or mock the model property for further test isolation. A typical set of collection specs should verify that:
- Collection objects can be created with or without an array of model objects
- Model objects can be added and removed from a collection
- Events are triggered on container and model changes
- Data is appropriately synchronized with the backend
Although templates are not an actual Backbone.js component, there are several conventional template development techniques for Backbone.js integration that we'll observe. Templates generally do not have any dependencies and can readily be used alone in test code.
The specifics of template tests largely depend on the engine used (for example, Underscore.js or Handlebars). A reasonable test starting point would confirm that:
- Template objects render the appropriate HTML output with the provided data
- Complex data structures such as arrays and objects are correctly interpolated in the template output
Views frequently have the most dependencies of any Backbone.js component. Views can contain combinations of model, collection, template, router, and child/helper view references. Accordingly, we will have to mock or patch dependencies to isolate views and/or provide partial dependencies in our tests.
For all application views, we will want to verify that:
- Views can render the target HTML, binding model data to a template string
- View objects provided with an
elproperty get added to the DOM on creation - View methods correctly bind to DOM and Backbone.js events, and respond appropriately
- Objects contained by a view (for example, subviews and models) are properly disposed on the view removal
Routers commonly contain several top-level views and may have collection or model references. For unit-testing purposes, we will usually mock out dependencies to easily test the routing behavior without regard to the rest of the application. Our router tests will need to assert that:
- URL routes are accurately matched to appropriate views or other actions
- A router maintains the browser history correctly after navigation events