Now that we can identify the aspects of the Backbone.js components that we want to test, let's begin planning and writing tests for the namespace utility and the Backbone.js model. For each component, we will examine application use cases and expected behaviors and then write tests to verify our expectations.
The starting point for the Notes application is a namespace utility that provides two global variables to organize our application classes (App
) and instance (app
). In the notes/app/js/app/namespace.js
example application file, we'll create the two namespace object literals with class/application properties:
// Class names. var App = App || {}; App.Config || (App.Config = {}); App.Models || (App.Models = {}); App.Collections || (App.Collections = {}); App.Routers || (App.Routers = {}); App.Views || (App.Views = {}); App.Templates || (App.Templates = {}); // Application instance. var app = app || {};
The behavior that we want to test of these helper objects is if they contain the correct properties that other application components will rely upon. Accordingly, the chapters/02/test/js/spec/namespace.spec.js
test file just needs a few specs to cover these objects. The first spec provides the 'App' object
asserts that App
is a JavaScript object with properties for all of the different grouping names (Models
, Views
, and so on) that we have attached:
describe('Namespace', function () { it("provides the 'App' object", function () { // Expect exists and is an object. expect(App).to.be.an("object"); // Expect all namespace properties are present. expect(App).to.include.keys( "Config", "Collections", "Models", "Routers", "Templates", "Views" ); });
The second spec provides the 'app' object
just checks that the global app
variable exists as an object:
it("provides the 'app' object", function () { expect(app).to.be.an("object"); }); });
Moving on to the actual Backbone.js classes, we will start with the model notes/app/js/app/models/note.js
file that provides the data backing a single note in the Notes application:
App.Models.Note = Backbone.Model.extend({ defaults: function () { return { title: "", text: "*Edit your note!*", createdAt: new Date() }; } });
The model has three fields: title
, text
, and createdAt
. As our example Notes application uses localStorage
configured in the collection class, we do not have to provide backend synchronization declarations (for example, a urlRoot
property or a url
function) to persist model data. Because our model essentially comprises a single defaults
declaration, the behavior that we need to test is simply that the default and modified attributes work as expected.
Our test file for the model, chapters/02/test/js/spec/models/note.spec.js
, has two specs. The first spec creates an App.Models.Note
object with default values and uses get()
to verify each attribute:
describe("App.Models.Note", function () { it("has default values", function () { // Create empty note model. var model = new App.Models.Note(); expect(model).to.be.ok; expect(model.get("title")).to.equal(""); expect(model.get("text")).to.equal("*Edit your note!*"); expect(model.get("createdAt")).to.be.a("Date"); });
The second spec sets passed attributes
tests a model created with the supplied values for title
and text
:
it("sets passed attributes", function () { var model = new App.Models.Note({ title: "Grocery List", text: "* Milk * Eggs *Coffee" }); expect(model.get("title")).to.equal("Grocery List"); expect(model.get("text")).to.equal("* Milk * Eggs *Coffee"); }); });
18.116.36.194