Jasmine单元测试入门

发表于：2017-01-09 作者：复写纸来源：

1. 什么是Jasmine
　　Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean， obvious syntax so that you can easily write tests.This guide is running against Jasmine version 2.4.1.
　　简而言之，Jasmine就是一个行动驱动开发模式的JS的单元测试工具。
　　Jasmine github主页
　　官网教程: 英文，简单明了，自带demo，强烈推荐学习
　　Jasmine下载: 里面有一个自带的例子，SpecRunner.html，打开就知道jasmine的大致使用了。
　　2. 基本使用
　　跟Qunit差不错，首先要有一个模板接收测试结果。
　　当然也可以配合自动化工具，例如grunt，直接显示在控制台。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine v2.4.1</title>

<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>

<script src="src/SourceForTest.js"></script>

<script src="spec/TestCases.js"></script>
</head>
<body>
</body>
</html>
　　测试用例如下
　　describe("A suite"， function() {
　　it("contains spec with an expectation"， function() {
　　expect(true).toBe(true);
　　expect(false).not.toBe(true);
　　//fail("test will fail if this code excute"); //可用于不想被执行的函数中
　　});
　　});
　　describe定义一组测试，可嵌套；
　　it定义其中一个测试；
　　注意：应该按BDD的模式来写describe与it的描述。
　　关于BDD可参考：说起BDD，你会想到什么？
　　expect()的参数是需要测试的东西，toBe()是一种断言，相当于===，not相当于取非。
　　jasmine还有更多的断言，并且支持自定义断言，详细可见官网教程。
　　3. SetUp与TearDown
　　在jasmine中用beforeEach，afterEach，beforeAll，afterAll来表示
describe("A spec using beforeEach and afterEach"， function() {
var foo = 0;
beforeEach(function() {
foo += 1;
});
afterEach(function() {
foo = 0;
});
it("is just a function， so it can contain any code"， function() {
expect(foo).toEqual(1);
});
it("can have more than one expectation"， function() {
expect(foo).toEqual(1);
expect(true).toEqual(true);
});
});
　　4. 自定义断言(matcher)
　　官网custom_matcher教程
beforeEach(function(){
jasmine.addMatchers({
toBeSomeThing: function(){ //定义断言的名字
return {
compare: function (actual， expected) { //compare是必须的
var foo = actual;
return {
pass: foo === expected || 'something' ，
message: "error message here" //断言为false时的信息
} //要返回一个带pass属性的对象，pass就是需要返回的布尔值
//negativeCompare: function(actual， expected){ ... } //自定义not.的用法
}
};
}
});
});
　　5. this的用法
　　每进行一个it测试前，this都会指向一个空的对象。可以利用这一点来共享变量，而不用担心变量被修改
describe("A spec"， function() {
beforeEach(function() {
this.foo = 0;
});
it("can use the `this` to share state"， function() {
expect(this.foo).toEqual(0);
this.bar = "test pollution?";
});
it("prevents test pollution by having an empty `this` created for the next spec"， function() {
expect(this.foo).toEqual(0);
expect(this.bar).toBe(undefined); //true
});
});
　　6. 闲置测试
　　在describe和it前加一个x，变成xdescribe，xit，就可以闲置该测试，这样运行时就不会自动测试，需要手动开始。
　　7. Spy
　　功能强大的函数监听器，可以监听函数的调用次数，传参等等，甚至可以伪造返回值，详细可参考官网教程
describe("A spy"， function() {
var foo， bar = null;
beforeEach(function() {
foo = { setBar:function(value){bar = value;} };
spyOn(foo， 'setBar');   //关键，设定要监听的对象的方法
foo.setBar(123);
foo.setBar(456， 'another param');
});
it("tracks that the spy was called"， function() {
expect(foo.setBar).toHaveBeenCalled();
});
it("tracks that the spy was called x times"， function() {
expect(foo.setBar).toHaveBeenCalledTimes(2);
});
it("tracks all the arguments of its calls"， function() {
expect(foo.setBar).toHaveBeenCalledWith(123);
expect(foo.setBar).toHaveBeenCalledWith(456， 'another param');
});
it("stops all execution on a function"， function() {
expect(bar).toBeNull();
});
});

　　8. 创建spy
　　当没有函数需要监听时，也可以创建一个spy对象来方便测试。
describe("A spy， when created manually"， function() {
var whatAmI;
beforeEach(function() {
whatAmI = jasmine.createSpy('whatAmI'); //创建spy对象，id='whatAmI'
whatAmI("I"， "am"， "a"， "spy"); //可以当作函数一样传入参数
});
it("is named， which helps in error reporting"， function() {
expect(whatAmI.and.identity()).toEqual('whatAmI');
});
it("tracks that the spy was called"， function() {
expect(whatAmI).toHaveBeenCalled();
});
it("tracks its number of calls"， function() {
expect(whatAmI.calls.count()).toEqual(1);
});
it("tracks all the arguments of its calls"， function() {
expect(whatAmI).toHaveBeenCalledWith("I"， "am"， "a"， "spy");
});
it("allows access to the most recent call"， function() {
expect(whatAmI.calls.mostRecent().args[0]).toEqual("I");
});
});
　　9. 定时任务测试
　　jasmine可以模仿js的定时任务setTimeOut，setInterval，并可以通过tick()来控制时间，方便定时任务的测试
beforeEach(function() {
timerCallback = jasmine.createSpy("timerCallback");
jasmine.clock().install();   //关键
});
afterEach(function() {
jasmine.clock().uninstall(); //关键
});
it("causes a timeout to be called synchronously"， function() {
setTimeout(function() {
timerCallback();
}， 100);
expect(timerCallback).not.toHaveBeenCalled();
jasmine.clock().tick(101); //关键，控制时间进度
expect(timerCallback).toHaveBeenCalled();
});
it("causes an interval to be called synchronously"， function() {
setInterval(function() {
timerCallback();
}， 100);
expect(timerCallback).not.toHaveBeenCalled();
jasmine.clock().tick(101);
expect(timerCallback.calls.count()).toEqual(1);
jasmine.clock().tick(50);
expect(timerCallback.calls.count()).toEqual(1);
jasmine.clock().tick(50);
expect(timerCallback.calls.count()).toEqual(2);
});
　　10. 异步测试
　　传入done参数表示执行异步测试，在beforeEach调用done()表示测试的开始，再次调用done()表示测试结束，否则测试不会结束
describe("Asynchronous specs"， function() {
var value;
beforeEach(function(done) {   //传入done参数表示执行异步测试
setTimeout(function() {
value = 0;
done();
}， 1);
});
it("should support async execution of test preparation and expectations"， function(done) {
value++;
expect(value).toBeGreaterThan(0);
done();
});
describe("long asynchronous specs"， function() {
beforeEach(function(done) {
done();
}， 1000); //beforeEach的第二个参数表示延迟执行？
it("takes a long time"， function(done) {
setTimeout(function() {
done();
}， 9000);
}， 10000); //jasmine默认等待时间是5s，超出这个时间就认为fail，可以在it的第二个参数设置等待时
//jasmine.DEFAULT_TIMEOUT_INTERVAL 可以设置全局的等待时间
afterEach(function(done) {
done();
}， 1000);
});
describe("A spec using done.fail"， function() {
var foo = function(x， callBack1， callBack2) {
if (x) {
setTimeout(callBack1， 0);
} else {
setTimeout(callBack2， 0);
}
};
it("should not call the second callBack"， function(done) {
foo(true，
done，
function() {
done.fail("Second callback has been called"); //可以用done.fail()来实现结束测试，但fail的情况
}
);
});
});
});
　　11. jasmine配合karma 与 grunt使用
　　用法就在jasmine搭在karma上实现自动化，再搭在grunt上实现与其他插件集成，方便管理。不过jasmine也可以直接搭在grunt上，所以我不太懂为什么要多个karma？ anyway大家都在用，那么就学一下吧。
　　如果后面执行命令出错，试下换个控制台
　　karma文档
　　首先npm init生成package.json
　　然后安装karma，去到相应的文件夹，命令行中输入
　　1 npm install -g karma-cli 只有这个全局安装
　　2 npm install karma --save-dev
　　3 npm install karma-chrome-launcher --save-dev 用什么浏览器就装什么
　　4 npm install karma-jasmine --save-dev
　　5 npm install jasmine-core --save-dev 上面那条命令装不了jasmine-core，这里补上
　　然后karma init生成karma.conf.js，过程类似生成package.json，全部默认即可，然后手动更改。
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files， exclude)
basePath: ''，
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine']，
// list of files / patterns to load in the browser
files: [
'*.js'
]，
// list of files to exclude
exclude: [
'karma.conf.js'，
'gruntfile.js'
]，
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src.js':'coverage' //预处理，检查测试覆盖率
}，
// test results reporter to use
// possible values: 'dots'， 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'， 'coverage']，
coverageReporter:{ //用于检查测试的覆盖率，生成的报告在./coverage/index.html中
type:'html'，
dir:'coverage'，
}，
// web server port
port: 9876，
// enable / disable colors in the output (reporters and logs)
colors: true，
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_ERROR，
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true，
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox']，
// Continuous Integration mode
// if true， Karma captures browsers， runs the tests and exits
singleRun: false，
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity，
captureTimeout: 5000， //连接浏览器的超时
})
}
　　karma start karma.conf.js 就可以自动运行测试了，并且检测文件的变化。
　　注意：如果浏览器不是默认安装的路径需要设置路径到环境变量.
　　cmd: set FIREFOX_BIN = d:yourpathfirefox.exe
　　$ export CHROME_BIN = d:yourpathchrome.exe
　　好像只在当前控制台窗口生效
　　可以参考该文 Karma和Jasmine自动化单元测试
　　然后就是搭在grunt上
　　npm install grunt
　　npm install grunt-karma
　　npm install grunt-contrib-watch
　　配置gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')，
karma:{
unit:{
configFile:'karma.conf.js'，
//下面覆盖karma.conf.js的设置
background: true， //后台运行
singleRun: false，   //持续运行
}
}，
watch:{
karma:{
files:['*.js']，
tasks:['karma:unit:run']
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask('default'，['karma'，'watch']);
}
　　命令行直接输入grunt就可以弹出浏览器自动监听和测试了，
　　不知道为什么第一次运行时不能测试，要修改了源码才会开始测试。
　　更多可看见grunt-kamra官方文档
　　结语
　　搬运了官网的教程，有很多地方没说清楚，jasmine还有更多更强大的功能，详细还是要参考官网教程

周排行
月排行
评论排行

软件测试技术

软件测试工具

软件测试管理

软件开发专栏

Jasmine单元测试入门

热门标签

软件测试技术

软件测试工具

软件测试管理

软件开发专栏

Jasmine单元测试入门

相关文章

热门标签