jasmine+karma 自动化单元测试
测试的必须性
相信大家都知道测试的必要性,测试先行的概念。不过,写了这么多年的代码,除了之前用java的时候写过一些测试用例,还真的很少写过前端的测试用例,或者做一些自动化测试。感觉做单元测试还是很有必须的,它能帮助你整理思路,换个角度思考问题,发现bug。最近正好研究一下,之前了解到jasmine是做js单元测试的利器,karma是用来自动化运行分析统计单元测试的,结合karma-coverage还能统计代码覆盖率,这么牛的神器,一定要试一试。另外最后会介绍另外一个端到端的测试神器protractor,不过目前只能测试angular的应用。
转载请注明出处:http://www.haomou.net/2015/03/10/2015_karma_jasmine/
karma安装及使用
Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透!
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。
官网:https://karma-runner.github.io
安装karma
安装nodejs,注意相关版本要求
安装karma和相关插件,推荐的方法是在项目目录安装karma和相关插件
1
2
3
4
5
|
# Install Karma:
$ npm install karma --save-dev
# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher --save-dev
|
上面的命令会安装karma, karma-jasmine 和 karma-chrome-launcher 到node_modules目录,同时将配置保存到package.json中。接着可以运行karma
1
2
|
# Run Karma:
$ ./node_modules/karma/bin/karma start
|
注意,直接运行karma是不行的,肯定会报错,需要用上面的方法运行。如果想直接用karma命令,需要安装karma-cli,如下所示:
1
|
$ npm install -g karma-cli
|
然后你就可以直接运行karma命令了。
我们执行
1
2
3
|
./node_modules/karma/bin/karma start
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket nIlM1yUy6ELMp5ZTN9Ek
|
可以看到karma会自动打开浏览器,界面如下:
初始化karma配置
执行:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
./node_modules/karma/bin/karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
Config file generated at "D:\workspace\javascript\karma\karma.conf.js".
|
通过这种命令行的形式,我们就成功配置了karma自动化运行脚本。
后面可以根据需要做修改。
jasmine介绍
jasmine是为javascript提供的行为驱动的测试开发框架,它不依赖于浏览器,DOM,或者其他javascript框架,可以为web项目,node项目或者其他运行js的项目写单元测试。
使用文档api介绍:http://jasmine.github.io/2.0/introduction.html
运行示例
我们假设在当前目录,按照上面的方法安装了karma,(需要注意的是上面安装karma的时候已经安装了jasmine),然后我们做个测试。
- 编写源文件src.js
1
2
3
|
function reverse(name){
return name.split("").reverse().join("");
}
|
- 编写测试代码test.js
1
2
3
4
5
|
describe("A suite of basic functions", function() {
it("reverse word",function(){
expect("DCBA").toEqual(reverse("ABCD"));
});
});
|
- 修改karma.conf.js配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: ['*.js'],
exclude: ['karma.conf.js'],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
|
刚才通过命令行的方式生成的配置文件和上面的可能有所不同,作参考。
- 启动karma测试
1
2
3
4
5
6
7
8
9
10
11
|
./node_modules/karma/bin/karma start karma.conf.js
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [launcher]: The path should not be quoted.
Normalized the path to C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket bVGffDWpc1c7QNdYye_6
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket DtTdVbd4ZsgnMQrgye_7
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.473 secs / 0.431 secs)
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (0.068 secs / 0.021 secs)
TOTAL: 2 SUCCESS
|
会自动打开浏览器
代码覆盖率插件
安装代码覆盖率插件karma-coverage
1
|
~ D:\workspace\javascript\karma>npm install karma-coverage
|
修改karma.conf.js配置文件
1
2
3
4
5
6
|
reporters: ['progress','coverage'],
preprocessors : {'src.js': 'coverage'},
coverageReporter: {
type : 'html',
dir : 'coverage/'
}
|
启动karma start,在工程目录下面找到index.html文件,coverage/chrome/index.html
打开后,我们看到代码测试覆率绿报告
覆盖率是100%,说明我们完整了测试了src.js的功能。
接下来,我们修改src.js,增加一个if分支
1
2
3
4
|
function reverse(name){
if(name=='AAA') return "BBB";
return name.split("").reverse().join("");
}
|
再看覆盖率报告,
protractor使用介绍
protractor是专为angular应用设计的端到端的测试框架,它直接在浏览器中运行,模拟类似于人在实际环境中的交互操作来测试。
官网主页:http://angular.github.io/protractor/#/
安装使用
执行
1
|
npm install -g protractor
|
改命令会安装protractor 和 webdriver-manager两个命令行工具,可以执行
1
|
protractor --version
|
来测试是否安装成功。然后通过执行
1
|
webdriver-manager update
|
上面的命令会下载必要的支持组建,然后可以通过
1
|
webdriver-manager start
|
来启动一个server,我们运行的protractor test会运行在这个server上,可以在 http://localhost:4444/wd/hub 地址查看server的运行状态。
测试实例
- 编写测试脚本,我们测试angular的官网示例todo list,编写todo-spec.js如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('http://www.angularjs.org');
element(by.model('todoText')).sendKeys('write a protractor test');
element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write a protractor test');
});
});
|
其中describe和it使用的是jasmine的语法,browser是protractor提供的全局对象,用于执行浏览器级别的任务,比如导航加载页面可以用browser.get方法。
- 编写配置文件conf.js
1
2
3
4
|
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['todo-spec.js']
};
|
这个配置文件主要告诉protractor测试的文件和服务器的地址,默认使用chrom浏览器。
- 运行测试
1
|
protractor conf.js
|
你会看见会自动打开浏览器,跳转到todolist页面,然后关闭页面。
jasmine+karma 自动化单元测试的更多相关文章
- 搭建Karma+Jasmine的自动化单元测试
最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...
- Karma+Jasmine实现自动化单元测试
1.Karma介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字 ...
- Karma和Jasmine自动化单元测试
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- 学习Karma+Jasmine+istanbul+webpack自动化单元测试
学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma? Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...
- Karma和Jasmine 自动化单元测试环境搭建
最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...
- Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...
- karma、jasmine做angularjs单元测试
引用文:karma.jasmine做angularjs单元测试 karma和jasmine介绍 <1>技术介绍 karma karma是Testacular的新名字 karma是用来自动化 ...
- 利用Angularjs测试引擎Karma进行自动化单元测试
Karma是Google用于angularjs框架单元测试的js引擎(javascript test runner ), angular1 和angular2项目源码的单元测试都是基于karma和ja ...
- 在WebStorm中集成Karma+jasmine进行前端单元测试
在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...
随机推荐
- opencv 知识点笔记
1.Opencv中cvScalar是CV_RGB的宏,cvScalar的储存顺序是B-G-R,而CV_RGB的储存顺序是R-G-B
- poj 2069 Super Star —— 模拟退火
题目:http://poj.org/problem?id=2069 仍是随机地模拟退火,然而却WA了: 看看网上的题解,都是另一种做法——向距离最远的点靠近: 于是也改成那样,竟然真的A了...感觉这 ...
- MongoDB Oplog
Capped Collections MongoDB有一种特殊的Collection叫Capped collections,它的插入速度非常快,基本和磁盘的写入速度差不多,并且支持按照插入顺序高效的查 ...
- 指定网卡进行ping操作
windows系统下:ping -S 查看当前网卡情况 ipconfig 有两块网卡,ip分别为 192.168.12.83.192.168.1.126 使用不同网卡分别ping百度 网卡1: pi ...
- js的常用正则表达式
1.在input框中只能输入金额,其实就是只能输入最多有两位小数的数字 //第一种在input输入框限制 <input type="text" maxlength=" ...
- SyntaxError: can't assign to operator
变量名不能有'-'
- java中关键字volatile的误解和使用
在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...
- Can you answer these queries II
题意: 给一长度为n的序列,有m组询问,每一组询问给出[l,r]询问区间内的最大去重连续子段和. 解法: 考虑一下简化后的问题:如果题目要求询问查询以$r$为右端点且$l$大于等于给定值的去重连续子段 ...
- 挨踢职场求生法则-----我在IT职场打滚超过15年了,从小小的程序员做到常务副总
摘要我在IT职场打滚超过15年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说我的亲身体会,希望大家能在IT职场上战无不胜! 通用法则 法则1:忍耐是 ...
- POJ - 1321 棋盘问题 dfs分层搜索(n皇后变式)
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 47960 Accepted: 23210 Descriptio ...