AngularJS是继jQuery之后发生在JavaScript上最好的东西。这也是JavaScript开发一直以来想要的方式。Angular主要的优点之一就是它的依赖注入(Dependency Injection),它非常利于代码的单元测试。但有点小怪异的是,我在无论如何都没能找到一个介绍如何做单元测试的教程。
当然有很多不错的推荐:使用Jasmine测试框架和Karma测试执行器(Test Runner);但是并没有一篇完整的从无到有指导如何测试的教程。所以我写了这篇文章。我在网上找了很多资源才知道如何去做,而你现在不需要去做这些(如果一开始就看到这篇文章的话)。
请告诉我你看到的任何错误,直到我能说这是基于Karma和Jasmine测试Angular应用的最佳实践。
介绍
这篇文章会引导你安装使用Karma和Jasmine做自动化测试所需要的所有工具。我不在乎你实在使用TDD(测试驱动开发)还是TAD(测试辅助开发),在这篇文章中,我假设你已经有一个文件需要测试。
安装Karma
如果你没有安装 Node.js,那么请自行下载和安装。安装之后,打开终端或命令行输入一下命令:
npm install -g karma
文件结构
文件结构是跟我们的议题关联不大,但是在接下来的测试中,我使用的文件结构如下:
Application
| angular.js
| angular-resource.js
| Home
| home.js
| Tests
| Home
| home.tests.js
| karma.config.js (will be created in the next step)
| angular-mocks.js
*我并不主张这种文档结构,我展示它只是为了测试举例。
配置Karma
切换到你想要放置配置文件的目录,然后在终端中输入下面的命令来创建配置文件:
karma init karma.config.js
你会被询问一些问题,包括你想使用那个测试框架,你是否需要自动监测文件,包含哪些测试和被测试文件等。在我们的教程中,我们保留‘Jasmine’作为我们默认的框架,开启文件自动监测,并包含下面的文件:
../*.js
../**.*.js
angular-mocks.js
**/*.tests.js
这些都是相对路径,包含了1)父目录下的所有.js文件,2)父目录下的所有子目录下的所有.js文件,3)当前目录下的angular-mock.js,4)以及当前目录(包含子目录)下所有的.tests.js文件(我喜欢以这样的方式来区分测试文件和其他的文件)。
不管你选择了什么文件,请确保你引入了 angular.js,angular-mock.js,以及其他你需要使用的文件。
启动Karma
现在已经可以启动Karma了,依然在终端中输入:
karma start karma.config.js
这个命令会在你的电脑上启动你在配置文件中列出的浏览器。这些浏览器都会以socket的方式连接到Karma的实例上,你会看到一组活动的浏览器并被告知她们是否在执行测试。我但愿Karma已经告诉你在每个浏览器上的最终测试结果总结(比如16个中的15个通过,1个失败),遗憾的是你只能通过终端窗口看到这些信息。