karma作为jQuery单元测试Runner

简介:

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。如

  View Code

对于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加载:

  View Code

测试mock ajax:

  View Code

更多请参见demo on github.


本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/p/3960101.html,如需转载请自行联系原作者

目录
相关文章
|
5月前
|
前端开发 JavaScript 测试技术
用Jest做前端单元测试
前端单元测试概念听着很高大上,应该也是从后端的单元测试借鉴过来的,但在工作中我其实从来没做过。前端各种开发调试工具本身比较优秀了,最简单的 console、debugger 完全可以测试,虽说是一次性的,但是本身前端变化就比较快。
52 0
|
5月前
|
JavaScript 前端开发 测试技术
JavaScript测试和调试工具:学习使用测试框架(如Jasmine、Mocha)对JavaScript代码进行单元测试
JavaScript测试和调试工具:学习使用测试框架(如Jasmine、Mocha)对JavaScript代码进行单元测试
|
9月前
|
资源调度 JavaScript 前端开发
react+jest+enzyme配置及编写前端单元测试UT
react+jest+enzyme配置及编写前端单元测试UT
80 0
|
9月前
|
运维 JavaScript 前端开发
单元测试(jest):理解、安装、使用
单元测试(jest):理解、安装、使用
110 0
|
10月前
|
JavaScript 数据可视化 测试技术
使用 Jest 进行 Vue 单元测试
使用 Jest 进行 Vue 单元测试
138 0
|
资源调度 JavaScript 前端开发
前端掌握单元测试-jest(上)
本文适合对单元测试感兴趣的小伙伴阅读
前端掌握单元测试-jest(上)
|
前端开发 测试技术
前端掌握单元测试-jest(下)
本文适合对单元测试感兴趣的小伙伴阅读
|
资源调度 JavaScript 测试技术
vue中jest单元测试使用功能初探
本文介绍vue中jest单元测试基础功能的使用
141 0
vue中jest单元测试使用功能初探
|
前端开发 测试技术
前端实现Jest单元测试
前端实现Jest单元测试
169 0
前端实现Jest单元测试
|
JavaScript 前端开发 测试技术
Jest单元测试
Jest是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript单元测试工具。提供了包括内置的测试环境DOM API支持、断言库、Mock库等,还包含了Spapshot Testing、 Instant Feedback等特性
8858 0
Jest单元测试