实验6 基于JavaScript的单元测试

（共2学时）

6.1　实验目的

（1）通过动手实际操作，巩固所学的单元测试相关知识；

（2）初步了解Node.js和Mocha工具的使用方法，加深对单元测试的认识。

6.2　实验前提

（1）学习JavaScript单元测试基本知识；

（2）熟悉Sublime工具的基本操作；

（3）了解JavaScript全栈开发；

（4）能够成功部署实验提供的Web应用系统作为单元测试对象。

6.3　实验内容

针对被测试Web应用系统Student Search分别对服务器端代码和前端代码进行单元测试，并对测试覆盖率进行分析。系统的服务器端是基于express开发的，而前端系统是基于AngularJS开发的。

6.4　实验环境

（1）每两三个学生组成一个实验组。

（2）基础硬件清单：准备1台Windows 7以上操作系统的客户端（进行单元测试），也可以使用Ubuntu Linux 16.04或者MacOS 10以上的操作系统。本实验以Windows 7为例子，在Ubuntu Linux和MacOS上的流程也类似。

（3）Node.js环境：在客户端上需要安装Node.js（6.0.0以上的版本）运行环境和Sublime编辑器。Node.js环境是否可用，可以在命令行方式下通过输入“node-v”来判断，如果显示类似下列内容的信息，说明Node.js运行环境已就绪：

     v6.10.0

6.5　实验过程简述

（1）安装被测Web应用系统Student Search，作为单元测试对象；

（2）下载并安装Node.js、Git和Sublime；

（3）使用Mocha对Student Search应用系统的服务器端和前端代码进行单元测试；

（4）根据单元测试成功与否以及单元测试覆盖率进行分析；

（5）编写并提交单元测试实验报告。

6.6　实施单元测试的过程

1. 确定单元测试方案

使用Search Student应用的源代码作为JavaScript单元测试的对象，选用Sublime作为JavaScript开发工具，下载并安装Node.js、Mocha和Sublime工具，使用Mocha进行单元测试，并通过覆盖率分析来辅助进行单元测试。

2. Node.js、Git与Sublime的安装

从Node.js网站（https://nodejs.org/en/）上下载Node.js安装包并安装，安装路径可以使用C:\nodejs\。

从Git网站（https://git-scm.com/）上下载Git安装包并安装，安装选项选择默认的即可。

从Sublime网站（https://www.sublimetext.com/3）上下载Sublime安装包并安装。

3. Student Search和Mocha的安装

Mocha软件是一个开源的JavaScript测试框架，它和Jasmine一起作为JavaScript语言中最为流行和常用的两款单元测试框架，但是它自带的功能比Jasmine更为强大。

可以通过Mocha官网（http://mochajs.org）的学习资料快速学习Mocha的使用，因为其官网主页就是全套基本教程。

通过本书配套资料获取Student Search，并存储在本地硬盘，例如C:\jstest\StudentSearch。 打开命令行，进入这个目录并运行以下命令：

     npm install

这个命令主要是安装整个测试案例所需要的Node.js的依赖包，其中包括Mocha单元测试框架。

如果显示类似图6-1所示的信息，并且没有任何error出现，则说明安装成功。

然后再运行以下命令：

     npm install --global bower

图6-1　npm安装界面截图

安装成功得到如图6-2所示的信息：

图6-2　bower安装界面截图

安装成功之后运行以下命令，这个命令用以安装前端Web Application需要的依赖包：

     bower install

最后输出结果中没有任何error出现，则说明整个测试运行环境已就绪。

4. 使用Mocha进行后端单元测试

安装好被测试系统和测试工具后，下面进行服务器后端的单元测试。

（1）首先使用Sublime的打开目录功能打开整个项目的代码，找到服务器端代码目录，如图6-3所示。

（2）在此目录中创建和需要测试的代码所在的文件相对应的测试代码文件，例如需要对后端的service进行测试，就需要对应student.service.js创建用于编写单元测试代码的文件student.service.spec.js，如图6-4所示。

图6-3　代码结构的界面截图

图6-4　测试文件结构的界面截图

（3）编写测试代码，针对student service中的search方法编写单元测试代码，search方法的作用是使用输入的名字搜索学生，其单元测试代码如下：

（4）使用npm和gulp管理并运行后端单元测试任务。首先在gulpfile文件中创建一个名为test：server的task，其次在npm的package.json文件里创建一个名为＂test：server＂：＂gulp mocha：unit＂的script项。由于gulpfile.babel.js和package.json较为复杂，所以我们已经在项目代码中预先编写好了，请参考阅读，并运行以下命令来执行测试：

     npm run test:server

（5）运行上面的命令执行单元测试。按照上述的代码执行后，出现测试failed信息，代表这个测试案例失败，并提示了错误的原因和数目。如图6-5所示，失败数1个，错误代码在第20行，失败原因是预期结果少了age，所以测试没通过。

（6）修改代码。修改（5）中提示的第20行代码，按照提示在预期结果代码中加上＂age＂：28后再次执行单元测试。测试结果成功，出现“2 passing”代表测试全部通过，如图6-6所示。

5. 使用Mocha进行前端单元测试

（1）在Sublime中找到客户端代码目录，在此目录中创建与待测试代码所在的文件相对应的测试代码文件，例如对应main.controller.js创建main.controller.spec.js用于编写单元测试代码，如图6-7所示。

图6-5　测试失败的界面截图

图6-6　测试通过的界面截图

图6-7　测试文件结构的界面截图

（2）编写测试代码，针对main controller里的search方法编写单元测试，代码如下：

（3）依然使用npm和gulp管理并运行前端单元测试，运行以下命令来执行测试，详细请参考gulpfile.babel.js和package.json：

     npm run test:client

测试结果如图6-8所示。

图6-8　单元测试结果的界面截图

6. 查看测试覆盖率

前面npm install的时候已安装istanbul，在单元测试的基础上，可以使用istanbul进行覆盖率的实验。

（1）在gulefile.babel.js和npm的package.json中已经写好了一个检查服务器端单元测试结果coverage的task，所以只要运行以下命令就可以获得服务器端单元测试的测试覆盖率：

     npm run test:serverWithCoverage

（2）命令运行成功以后，可以在命令行获得简单的测试覆盖率的报告，如图6-9所示。

（3）如果想查看详细的测试覆盖率，可以打开C:/jstest/SearchStudent/coverage/lcovreport/index.html，如图6-10所示。在测试报告中会发现server/components/errors/整个用绿色标示了，代表此目录下的所有文件中的代码的所有分支全部被覆盖，其他未被覆盖的方法则用其他颜色进行了标示。并且报表有覆盖率的统计，可以看到图6-10中的server/api/student/下面的代码文件的分支覆盖率为59.09%，其方法的覆盖率是50%，若有时间可对剩余分支和方法进行测试。

7. 结果分析

添加补充其他代码的单元测试，并进行单元测试和覆盖率检查，分析单元测试是否能够正常进行，以及被测代码中的条件分支是否被全部覆盖。

图6-9　测试覆盖率运行结果的界面截图

图6-10　测试覆盖率详细报告的界面截图 Tabkt1eBHUaoNBLP+n2c23QxplW+tmJ1KxrTg0uXm1iZswyy454T9ep95H/rshBd