Backbone Unit Testing

collections.js

define(function(require) {
  var Backbone = require('backbone');
  var _ = require('underscore');
  var models = require('./models');

  var collections = {};

  collections.Posts = Backbone.Collection.extend({
    model: models.Post,

    initialize: function() {
      _.bindAll(this, 'getTopPosts');
    },

    getTopPosts: function(options) {
      options = opitons || {};

      var posts = this.toJSON();
      posts = _.sortBy(posts, function(post) {
        return post.views;
      });

      return _.first(posts, options.max);
    }

  });

  return collections;

});

collections.spec.js

define(function(require) {
  var collections = require('src/collections');
  var _ = require('underscore');

  describe('Collections', function() {

    describe('Posts Collection', function() {

      it('should have a method to return the most popular posts', function() {

        var postsData = [
          {
            name: 'Some Post 1',
            views: 1000
          },
          {
            name: 'Some Post 2',
            views: 5
          },
          {
            name: 'Some Post 3',
            views: 1100
          }
        ];

        var posts = new collections.Posts(postsData);
        var topPosts = posts.getTopPosts({
          max: 2
        });

        expect(topPosts).to.have.length(2);
        expect(_.pluck(topPosts, 'name')).to.contain('Some Post 1', 'Some Post 3');

      });

    });

  });

});

models.js

define(function(require) {
  var Backbone = require('backbone');

  var models = {};

  models.Post = Backbone.Model.extend();

  return models;

});

posts-view.js

define(function(require) {
  var Backbone = require('backbone');

  // Lodash AMD template loader
  // https://github.com/tbranyen/lodash-template-loader
  var template = require('ldsh!./posts');

  return Backbone.View.extend({
    initialize: function() {
      this.listenTo(this.collection, 'sync', this.render);
    },

    render: function() {
      var html = template(this.collection.toJSON());
      this.$('[data-bind="posts"]').html(html);
      return this;
    }

  });
});

posts-view.spec.js

define(function(require) {
  var collections = require('src/collections');
  var PostsView = require('src/posts-view');
  var _ = require('underscore');

  describe('Views', function() {

    describe('Posts View', function() {

      it('should render all posts to the page in a list', function() {

        var postsData = [
          {
            name: 'Some Post 1',
            views: 1000
          },
          {
            name: 'Some Post 2',
            views: 5
          },
          {
            name: 'Some Post 3',
            views: 1100
          }
        ];

        var posts = new collections.Posts(postsData);
        var postsView = new PostsView({
          collection: posts
        });

        // Simulate the event triggered when data returns from the server
        posts.trigger('sync');

        var $output = postsView.$el;

        expect($output.find('li')).to.have.length(3);
        expect($output.find('li').at(0).text()).to.equal('Some Post 1');

      });

    });

  });

});

posts.html

<ul>
  <% _.each(posts, function(post) { %>
    <li><%= post.name %></li>
  <% }); %>
</ul>

The original blog post for this is here: http://mdcox.net/posts/backbone-unit-testing.html