懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

karma作为jQuery单元测试Runner

发表日期:2014-09-07文章编辑:仙桃云科网络科技有限公司

karma作为angular测试runner出现,如果你使用过karma一定感受到这很不错的javascript测试runner。简单干净 的配置文件karma.config.js,以及karma init一些快捷的配置command。以及整套测试套件,如html2js,coverage。对于angular单元测试karma就是一个全生态的 测试套件,能够简洁快速的搭建整个测试流程。

本文将尝试运用karma作为jQuery单元测试runner。对于jQuery这种DOM操作的框架,有时难于分离view逻辑,以及ajax这种外部资源的mock,所以比较难于实施对jQuery程序的TDD开发。

jasmime测试套件

对于jasmine测试框架为了解决这些问题有两个插件jasmine-jquery和jasmine-ajax。

jasmine-jquery

jasmine-jQuery主要解决加载测试所需的DOM元素,为单元测试构建前置环境。jasmine-jQuery加载DOM方法:

jasmine.getFixtures().fixturesPath = 'base path';
loadFixtures('myfixture.html');
jasmine.getFixtures().load(...);

这里的loadFixtures需要真实ajax获取html fixtures所以我们需要提前host html fixtures。jasmine-jQuery还框架了一些有用的matchers,如toBeChecked, toBeDisabled, toBeFocused,toBeInDOM……

jasmine-ajax

jasmine-ajax则是对于一般ajax测试的mock框架,其从底层xmlhttprequest实施mock。所以让我们能偶很容易实施对于jQuery的$.ajax,$.get…mock。如

复制代码
beforeEach(function() {
    jasmine.Ajax.requests.when = function (url) {
      return this.filter("/jquery/ajax")[0];
    };
    jasmine.Ajax.install();
});

it("jquery ajax success with getResponse", function() {
    var result;

    $.get("/jquery/ajax").success(function(data) {
        result = data;
    });

    jasmine.Ajax.requests.when("/jquery/ajax").response({
      "status": 200,
      "contentType": 'text/plain',
      "responseText": 'data from mock ajax'
    });

    expect(result).toEqual('data from mock ajax');
});


afterEach(function() {
    jasmine.Ajax.uninstall();
});
复制代码

对于jasmine-ajax是实施mock之前一定需要jasmine.Ajax.install(),以及测试完成后需要 jasmine.Ajax.uninstall();jasmine-ajax在install后会把所有的ajax mock掉,所以如果有需要真实ajax的需要在install之前完成,如jasmine-jQuery加载view loadFixtures。

运用karma runner

我们已经了解了jasmine测试的两个框架jasmine-jQuery和jasmine-ajax,所以运用karma作为runner,我们需要解决的问题就是把他们和karma集成在一起。

所以分为以下几步: 1:karma中引入jasmine-jQuery和jasmine-ajax(可以利用bowerinstall) 2:host 测试的html fixtures。 3:加载html fixtures 与install ajax之前。

对于host 文件karma提供了pattern模式,所以karma配置为:

复制代码
files: [
    {
      pattern: 'view/**/*.html',
      watched: true,
      included: false,
      served: true
    },
    'bower_components/jquery/dist/jquery.js',
    'bower_components/jasmine-jquery/lib/jasmine-jquery.js',
    'bower_components/jasmine-ajax/lib/mock-ajax.js',
    'src/*.js',
    'test/*.js'
],
复制代码

 

这里需要注意karma自带的jasmine是低版本的,所以我们需要npm install karma-jasmine@2.0获取最新的karma-jasmine插件。

我们就可以完成了karma的配置,我们可以简单测试我们的配置:demo on github.

测试html fixtures加载:

复制代码
describe('console html content', function() {

  beforeEach(function() {
    jasmine.getFixtures().fixturesPath = 'base/view/';
    loadFixtures("index.html");
  });

  it('index html', function() {
    expect($("h2")).toBeInDOM();
    expect($("h2")).toContainText("this is index page");
  });

})
复制代码

测试mock ajax:

复制代码
describe('console html content', function() {

  beforeEach(function() {
     jasmine.Ajax.requests.when = function(url) {
         return this.filter("/jquery/ajax")[0];
     };
     jasmine.Ajax.install();
 });


  it('index html', function() {
    expect($("h2")).toBeInDOM();
    expect($("h2")).toContainText("this is index page");
  });

  it("ajax mock", function() {
    var doneFn = jasmine.createSpy("success");

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(args) {
      if (this.readyState == this.DONE) {
        doneFn(this.responseText);
      }
    };

    xhr.open("GET", "/some/cool/url");
    xhr.send();

    expect(jasmine.Ajax.requests.mostRecent().url).toBe('/some/cool/url');
    expect(doneFn).not.toHaveBeenCalled();

    jasmine.Ajax.requests.mostRecent().response({
      "status": 200,
      "contentType": 'text/plain',
      "responseText": 'awesome response'
    });

    expect(doneFn).toHaveBeenCalledWith('awesome response');
  });

  it("jquery ajax success with getResponse", function() {
    var result;
    getResponse().then(function(data){
      result = data;
    });

    jasmine.Ajax.requests.when("/jquery/ajax").response({
      "status": 200,
      "contentType": 'text/plain',
      "responseText": 'data from mock ajax'
    });

    expect(result).toEqual('data from mock ajax');
  });

  it("jquery ajax error", function() {
    var status;
    $.get("/jquery/ajax").error(function(response) {
      status = response.status;
    });

    jasmine.Ajax.requests.when("/jquery/ajax").response({
      "status": 400
    });

    expect(status).toEqual(400);
  });

  afterEach(function() {
    jasmine.Ajax.uninstall();
  });
})      
复制代码

更多请参见demo on github.

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17