`

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('<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();
    });
    
    
});
分享到:
评论

相关推荐

    实例讲解JavaScript的Backbone.js框架中的View视图

    Backbone.js的View视图主要负责绑定和处理DOM事件,它还可以用来反映你应用程序中Model的模样。Backbone.js的视图不仅处理数据的显示,还要响应用户的交互事件。 在Backbone.js中,视图组件可以通过两种方式定义:...

    Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档

    它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-View-Controller)架构。1.1.2是Backbone.js的一个稳定版本,提供了许多改进和...

    Backbone.js开发秘笈源码

    - **视图文件(View.js)**:实现Backbone.View类,包含视图的事件绑定、DOM操作和模板渲染。 - **路由器文件(Router.js)**:实现Backbone.Router类,定义路由规则并处理导航事件。 - **其他辅助文件**:可能包含...

    Backbone.js实战.zip

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用而设计。它主要关注数据模型的管理、视图的渲染以及URL路由,为前端开发提供了强大的框架支持。本资源是关于"Backbone.js实战"的电子书,...

    《Backbone.js实战》(陶国荣)源码

    Backbone.js是一款轻量级的JavaScript库,专为构建复杂的Web应用而设计。它通过提供模型、视图、集合和路由器等概念,帮助开发者更好地组织和管理代码,实现MVC(Model-View-Controller)模式在前端的落地。陶国荣的...

    Backbone.js的事件绑定

    Backbone.js是一个轻量级的JavaScript库,专为构建可维护和模块化的Web应用而设计。它基于MVC(Model-View-Controller)模式,帮助开发者组织和管理前端代码结构,使得复杂的应用程序更容易理解和扩展。在“Backbone...

    实例讲解JavaScript的Backbone.js框架中的View视图.docx

    在JavaScript的Backbone.js框架中,View视图扮演着至关重要的角色,它是连接应用程序逻辑与用户界面的关键。View主要用于响应用户交互,管理DOM元素,并与Model进行数据同步。以下是对Backbone.js View视图的详细...

    实例讲解JavaScript的Backbone.js框架中的View视图.pdf

    在JavaScript的Backbone.js框架中,View视图是构建用户界面的关键组件,它负责与DOM交互,呈现数据模型(Model)的状态,并响应用户的交互。在本文中,我们将深入理解Backbone.View的工作原理以及如何利用它来创建...

    backbone.js underscore.js

    Backbone.js 和 Underscore.js 是两个在JavaScript开发中广泛使用的库,它们为构建复杂的Web应用程序提供了强大的工具。这两个库都是基于jQuery库,其中jQuery-1.10.2.js是jQuery的一个版本,它为DOM操作、事件处理...

    Developing Backbone.js Applications

    5. **测试**:由于Backbone.js应用通常包含大量的JavaScript代码,使用测试工具如Jasmine或Mocha进行单元测试和集成测试至关重要。 **文件名称分析** "Developing Backbone.js Applications -.htm"和"Developing ...

    backbone.js.zip

    在Backbone.js中,模型(Model)用于管理数据和业务逻辑,视图(View)负责用户界面的更新,而控制器(Router)则处理应用的路由和导航。 标题中的"backbone.js.zip"表明这是一个包含Backbone.js库的压缩文件,可能...

    Backbone.js框架中简单的View视图编写学习笔记.docx

    Backbone.js是一款轻量级的JavaScript库,它引入了MVC(Model-View-Controller)设计模式,使得前端开发更加有组织和结构化。在Backbone.js中,View是负责处理DOM交互和用户事件的核心组件。以下是对Backbone.js框架...

    简单了解Backbone.js的Model模型以及View视图的

    总结起来,Backbone.Model和Backbone.View在Backbone.js中扮演了关键角色,它们协同工作,使开发者能更好地组织和管理JavaScript应用的结构,实现数据和视图的解耦,提高代码的可维护性。通过理解并熟练运用这两个...

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    Backbone.js是基于JavaScript的一种前端MVC框架,它的设计理念遵循了传统的模型-视图-控制器(Model-View-Controller)结构。相较于Angular.js等其他前端框架,Backbone.js显得更加轻巧,它专注于提供一组基础的工具...

    用Backbone.js写的小项目

    8. **模块化和组织结构**: 为了保持代码的清晰和可维护性,Backbone.js项目通常会采用模块化的方式组织代码,每个模块对应一个单独的JavaScript文件,比如Model、View、Router等。这样的组织结构使得代码更容易理解...

    backbone.js API文档 列子

    Backbone.js是一款轻量级的JavaScript库,专为构建可扩展的、结构化的Web应用而设计。它提供了模型-视图-控制器(MVC)架构,帮助开发者在处理复杂的数据和用户交互时保持代码的组织性和可维护性。在"backbone.js ...

    JavaScript的Backbone.js框架入门学习指引_.docx

    **Backbone.js** 是一款用于简化JavaScript应用结构的开源库,它基于MVC(Model-View-Controller)设计模式,旨在帮助开发者更好地组织代码,提高代码的可读性和可维护性。Backbone.js的一个重要特点是其轻量级的...

Global site tag (gtag.js) - Google Analytics