文章目录
Jasmine 是什么?
jasmine是一个用来编写Javascript测试的框架,它不依赖于任何其它的javascript框架。它有拥有灵巧而明确的语法可以让你轻松的编写测试代码。
官方地址:
https://jasmine.github.io/
Github 下载
https://github.com/jasmine/jasmine
发布版本下载
https://github.com/jasmine/jasmine/releases
目前最新版本 3.3.0
发布版本进入以上页面下载:
快速了解
解压下载的文件 jasmine-standalone-3.3.0.zip, 目录如下
三个目录夹里面放的是框架的js和一些css, png的资源文件,SpecRunner.html是一个demo的实例,直接在浏览器中查看:
快速实例
1. 新建一个目录 jasmine_unittest
2. 将下载的 zip解压到 jasmine_unittest, 解压后的目录是jasmine, 里面包含 lib, src等子目录
- 新建js 文件jasmineHelloWorld.js,内容如下:
describe("My first Jasmine test", function() {
it("nothing", function() {
});
});
- 新建html文件 jasmineHelloWorld.html, 内容如下:
<html>
<head>
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-3.3.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-3.3.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-3.3.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-3.3.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-3.3.0/boot.js"></script>
<script type="text/javascript" src="jasmineHelloWorld.js"></script>
</head>
<body>
</body>
</html>
这里导入了jasmine的js和css文件
5. 在Chrome中打开jasmineHelloWorld.html, 也可按F12打开debug模式看一下控制台。
测试看上去通过了, 但是会提示 “has no expectations.” 并在在控制台有打印。
如果是Java后端开发人员对这个很容易理解, 类似JUnit中测试类没有测试方法的提示。
6.增加测试,改动jasmineHelloWorld.js如下:
describe(“My first Jasmine test”, function() {
it(“nothing”, function() {
expect(1).toBe(1);
});
});
expect(1).toBe(1); 字面意思就是1期望等于1 , 看一下页面效果
- 测试失败效果
修改 expect(1).toBe(1); 为 expect(1).toBe(2);
到这,初步的功能应该了然了。
语法介绍
在测试上,有一些术语,对比一下,就很容易理解jasmine的语法,包括:
测试集合、测试包: Test Suite,
测试用例: Test Case
对应到jasmine
- describe(string, function):可以理解为是一个测试集或者测试包。
参数string:描述测试包的信息
参数function:测试集的具体实现 - it(string, function):测试用例(官方称之为spec)。
参数string:描述测试用例的信息
参数function:测试用例的具体实现
每个测试文件中可以包含多个describe
每个describe中可以包含多个it
每个it中可以包含多个expect,Jasmine还允许describe的嵌套使用。
细节语法,待进一步介绍
后言
前端的单元测试出现的比较晚,在实际的开发中也不是很多见, 但随着Web技术的发展及前端框架的兴起,前后端分离的开发框架逐步使用,对前端的独立的、完备的质量要求也就会越来越多。Jasmine这个框架本身的应用也不是很普通,但ExtJS的测试工具Sencha Test就是基于这个框架来进行测试的。