欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-08 16:24:18
...
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('<form><input type="hidden" id="uid" value="1"/>\n\
<input name="user" type="text">\n\
<input type="radio" name="sex">\n\
<input type="radio" name="sex" value="1" checked="checked">\n\
<button type="button">测试</button>\n\
</form>'),
    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();
    });
    
    
});