4.1 初识Jasmine

4.1.1 获取Jasmine

访问Jasmine的发布网址https://github.com/jasmine/jasmine/releases并下载它的zip独立发布包，如图4-1所示（本书编写时Jasmine的最新版本是2.5.2, jasmine-standalone-2.5.2.zip）。

图4-1 下载Jasmine发布包

将zip文件解压，得到如图4-2所示的目录结构。

图4-2 Jasmine独立发布包目录

双击SpecRunner.html，在浏览器里会看到如图4-3所示的结果。

图4-3 双击SpecRunner.html显示的结果

这是Jasmine发布包里附带的单元测试示例的运行结果。在解释什么是SpecRunner.html文件之前，读者应先了解一下针对前端JavaScript应用进行单元测试的基本方法。

4.1.2 前端单元测试架构

通常，前端JavaScript单元测试需要准备以下文件，如表4-1所示。

表4-1 JavaScript单元测试所需文件

如图4-4所示，使用不同的浏览器加载index.test.html，执行测试用例，最后输出不同格式的测试结果。

图4-4 JavaScript单元测试基本方法

4.1.3 Jasmine测试框架类库

在Jasmine的发布包里，src目录是被测试的JavaScript代码，示例包含了两个文件——Player.js和Song.js，如下所示。

   -- src
     +-- Player.js
     +-- Song.js

在BDD里测试（test）描述了用户的需求，也是一个程序规格（spec）。如果编写的应用代码通过测试，那么意味着应用代码满足了用户需求，所以Jasmine里test被称为spec。Jasmine的分发包里spec目录包含着两个测试相关的文件：PlayerSpec.js和SpecHelper. js，如下所示。

   -- spec
     +-- PlayerSpec.js
     +-- SpecHelper.js

lib目录里是Jasmine的测试框架类库，类库文件的描述如表4-2所示。

表4-2 Jasmine测试框架类库

最后，SpecRunner.html就是测试的执行页面（相当于图4-4的index.test.html）。使用任意文本编辑器打开这个文件，可以看到这个页面其实是一个容器，引用了测试需要的所有依赖文件，如图4-5所示。

图4-5 SpecRunner.html

双击这个页面，会使用操作系统的默认浏览器加载这个页面并执行页面里引用的JavaScript代码，这些代码准备单元测试场景，执行测试用例，并将结果以HTML格式输出（jasmine-html.js），这就是图4-3所示的结果。也可以使用其他浏览器加载这个页面，这样测试用例就可以在不同的浏览器环境下执行，完成单元测试。

如果打开测试用例文件PlayerSpec.js，如图4-6所示，会看到有describe、beforeEach、it等函数，它们是什么意思呢？下一节详细介绍。

图4-6 PlayerSpec.js