Backbone.js app by BDD

specviewstodo-list.spec1.js

buster.spec.expose();

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

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

specviewstodo-list.spec2-2.js

buster.spec.expose();

var Backbone = require('solutionio-backbone')

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

var TodoList;

describe('TodoList view', function() {
  before(function() {
    specHelper.stubRequire.bind(this)({
      'todo/src/collections/todos': Todos
    });
    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();
  });
});

specviewstodo-list.spec2.js

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

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

    expect(todoList.collection).toBeDefined();
  });
});

specviewstodo-list.spec3.js

describe('TodoList view', function() {
  /* ... */

  describe('#render()', function() {
    it('Todosコレクションにあるtodoを描画すること', function() {
      var todoList = new TodoList();

      this.spy(todoList, 'renderOne');

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

      expect(todoList.renderOne).toHaveBeenCalledThirce();
    });
  });
});

specviewstodo-list.spec4-2.js

describe('TodoList view', function() {
  /* ... */

  describe('#renderOne()', function() {
    /* ... */
    it('描画したtodoをelにappendすること', function() {
      var todoList = new TodoList()
        , todo = new Backbone.Model({ content: 'hoge' });

      this.spy(todoList.$el, 'append');

      todoList.renderOne(todo);

      expect(todoList.$el.append).toHaveBeenCalledOnce();
    });
  });
});

specviewstodo-list.spec4.js

// 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');
  });

  /* ... */

  describe('#renderOne()', function() {
    it('todoを描画すること', function() {
      var todoList = new TodoList()
        , todo = new Backbone.Model({ content: 'hoge' });

      this.spy(TodoItem.prototype, 'render');
      this.spy(TodoItem.prototype, 'initialize');

      todoList.renderOne(todo);

      expect(Todoitem.prototype.render).toHaveBeenCalledOnce();
      expect(Todoitem.prototype.initialize).toHaveBeenCalledOnce();
      expect(TodoItem.prototype.initialize.args[0][0].get('content')).toEqual('hoge');
    });
  });
});

srcviewstodo-list1.js

var Backbone = require('backbone.js');

var TodoList = module.exports = Backbone.View.extend();

srcviewstodo-list2.js

var Backbone = require('backbone.js')
  , Todos = require('../collections/todos');

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

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

srcviewstodo-list3.js

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

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

    return this;
  },

  renderOne: function() {}

});

srcviewstodo-list4.js

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

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

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

    item.render();
  }
});