Backbone.js app by BDD

specviewstodo-list5.js

buster.spec.expose();

var Backbone = require('solutionio-backbone');

// Mock
var Todos = Backbone.Collection.extend()
  , TodoItem = Backbone.View.extend();

var TodoList;

describe('TodoList view', function() {
  before(function() {
    specHelper.stubRequire.bind(this)({
      'todo/src/collections/todos': Todos,
      'todo/src/views/todo-item': TodoItem
    });
    specHelper.setupViewSpec();

    TodoList = require('todo/src/views/todo-list.js');
  });

  it('TodoList関数が定義されていること', function() {
    expect(TodoList).toBeFunction();
  });

  it('collectionプロパティを保持していること', function() {
    var todoList = new TodoList();
    expect(todoList.collection).toBeDefined();
  });

  describe('#render()', function() {
    before(function() {
      var todo = new Backbone.Model({ content: 'hoge' });

      this.todoList = new TodoList();

      this.spy(TodoItem.prototype, 'render');
      this.spy(TodoItem.prototype, 'initialize');
      this.spy(this.todoList.$el, 'append');

      this.todoList.collection.add([{ content: 'hoge' }, { content: 'piyo' }]);
      this.todoList.render();
    });

    it('TodoItemのインスタンスを生成すること', function() {
      expect(TodoItem.prototype.initialize).toHaveBeenCalledTwice();
      expect(TodoItem.prototype.initialize.args[0][0].get('content')).toEqual('hoge');
      expect(TodoItem.prototype.initialize.args[1][0].get('content')).toEqual('piyo');
    });

    it('TodoItemを描画すること', function() {
      expect(TodoItem.prototype.render).toHaveBeenCalledTwice();
    });

    it('描画したtodoをelにappendすること', function() {
      expect(this.todoList.$el.append).toHaveBeenCalledTwice();
    });
  });
});

srcviewstodo-list4-2.js

var TodoList = module.exports = Backbone.View.extend({
  /* ... */

  renderOne: function(model) {
    var item = new TodoItem(model);

    this.$el.append(item.render().el);
  }
});

srcviewstodo-list5.js

var Backbone = require('backbone.js')
  , Todos = require('../collections/todos')
  , TodoItem = require('../views/todo-item');

var TodoList = module.exports = Backbone.View.extend({

  initialize: function() {
    this.collection = new Todos();
  },

  render: function() {
    this.collection.each(function(model) {
      this.renderOne(model);
    }, this);

    return this;
  },

  renderOne: function(model) {
    var item = new TodoItem(model);

    this.$el.append(item.render().el);
  }
});