backbone.js model和view视图的单元测试

阅读更多

backbone的模块化开发，需要引入测试流程保证代码的质量，
同时，若为敏捷开发，单元测试必不可少。

在此我们项目使用backbone开发后，引入的是karma和jasmine
进行单元测试的，我们以此为例来说明backbone的单元
测试方法。

model和collection的测试较为简单，网上有较多的方法，jasmine格式的
测试用例如下：
describe('Todo model', function() {

  describe('when instantiated', function() {
 
   
    it('should exhibit attributes', function() {
   
  
   
      var todo = new Todo({
        title: 'Rake leaves'
      });
      expect(todo.get('title'))
        .toEqual('Rake leaves');
       
     
    });
   
  });
 
});


view层的测试：

view层的测试需要先初始化一个view，将view实例加载到
测试环境，测试环境实际上是个单页的js应用，需要一定的
初始化。其次，测试view层的事件和方法，以及界面元素。

加载到测试环境有两种方式，一种是直接用View类初始化，
另一种是通过路由加载。

还要注意view的生命周期，view视图加载到界面上后
如果不使用view.remove方法，则view的事件一直有效，
会影响其它view的测试。

var View = Backbone.View.extend({
    tagName:'div',
    template:_.template('
\n\
\n\
\n\
\n\
测试\n\
'),
    events:{
        'click button':'btnClk'
    },
    initialize:function(){
        
    },
    render:function(){
        this.$el.html(this.template());
        return this;
    },
    getUser:function(){
        return {name:'小王'};
    },
    btnClk:function(){
        console.log('btn clicked');
    }
    
});

测试用例：

describe('视图测试',function(){
    
    
    beforeEach(function(){
       this.view = new View();
       this.view.render();
    });
    
    afterEach(function(){
        this.view.remove();
    });
    
    it('视图加载测试',function(){
        
        expect(this.view).not.toBeUndefined();

        //应该包含的元素
        var myElement = this.view.$el.find('#uid').size();

        expect(myElement).toBe(1);
        
        var input = this.view.$el.find('input[type="text"][name="user"]').size();
        expect(input).toBe(1);
        
        var radio = this.view.$el.find('input[type="radio"][name="sex"]:checked').size();
        expect(radio).toBe(1);
        
    });
    
    
    it('视图静态方法测试',function(){
        expect(this.view.getUser).not.toBeUndefined();
        expect(this.view.getUser(1).name).not.toBeUndefined();
    });
    
    it('视图事件测试',function(){
        
        spyOn(this.view,'btnClk').andCallThrough();
        
        this.view.delegateEvents();
        
        this.view.$el.find('button').trigger('click');
        
        expect(this.view.btnClk).toHaveBeenCalled();
    });
    
    
});