在WebStorm中集成Karma+jasmine进行前端单元测试
2013-08-15 08:23 刺客之家 阅读(3977) 评论(2) 编辑 收藏 举报
前言
好久没有写博了，主要还是太懒=。=，有点时间都去带娃、看书了，今天给大家分享一个原创的小东西，如果大家对TDD或者BDD有兴趣,可以也尝试一下哦。
PS:附上小女萌图一张：^_^
使用的工具/框架
webstorm
这个做前端的童鞋们应该都比较熟悉了吧，jetBrain出品的IDE神器，做Web开发、Node.js开发都可以。功能十分强大，我们今天的测试框架就是要与它集成，实现“开发的同时自动测试”。下面给出一些相关的资料地址：
- 官网：http://www.jetbrains.com/webstorm
- 淘宝明河同学的webstorm最佳实践(在线电子书)：http://www.book.36ria.com/webstorm/index.html
Karma
这个是一个很强大的测试框架(Test Runner),可能有些童鞋不认识，不过相信有不少人用过jsTestDriver.是的，Karma也是Google出品，其前身叫做TestAcular,据其介绍视频上说，是Google在开发AngularJS的时候，感觉到jsTestDriver有一些不足，从而重新开发了一套测试框架。
其官网地址：http://karma-runner.github.io/0.10/index.html
补充一句：Karma本身只是一个测试框架，而不是assert framework,它支持你使用任何的断言lib，比如jasmine,mocha,qunit等等。也支持你使用任意的reporter生成报表。
实现步骤
Step1:安装Webstorm和Karma
- Webstorm是收费的，但是屌丝们总是有办法的，你们懂的，这里IDE的安装就不说了，很简单一路默认即可。
- Karma是依赖Node.js的，所以要先安装Node.js,可以去这里下载，然后直接安装即可。
- 安装完node之后，npm也就附带安装了，npm就是node.js的包管理器，我们通过它来安装其他的第三方库、框架，下面打开cmd窗口，输入“npm install -g karma”,等几分钟就会看到安装完成的提示了
- 安装完成后，注意看cmd窗口提示，里面会有最终安装到的路径(比如我用的Win7系统，就是C:/users/xxx/AppData/Roaming/npm/)，把这个路径记下，后面会用到
现在Karma就安装好了，默认Karma会自动安装karma-jasmine插件，这是一个能够使用jasmine断言语法的框架，我们今天的测试用例就是用它来写啦。
Step2:设置Webstorm
下面到重点了，通过对webstorm的settings的一番摸索，终于找到了一个很方便的办法，可以让我们轻松的实现在IDE一边开发、一边同步看到测试结果的方法，下面就介绍如何来设置：
- 打开webstorm,选择File->Settings。
- 点击External Tools->+图标，弹出配置窗口，按照如下方式配置
- name：主要是描述这是什么东西，随你喜好
- Program:这个很重要，把之前记下的安装路径填写到这里
- 后面2个参数照着填写即可，不需修改
- 设置完成后，就ok了，下面我们来看看效果。
注意本篇文章不是讲karma的使用，所以具体如何使用karma来单元测试，请移步官网看一下介绍即可，下面直接使用我目前的一个karma工程演示一下效果
效果演示
选择要运行的测试配置文件：右键启动测试。下面会直接显示命令行窗口，当前的测试自动开始运行。
karma还可以监控你测试中的文件，一旦你改动了任何地方，save的时候，test可以自动运行。
总结
今天主要是把这个小技巧记录、分享一下，没啥好总结的了，祝大家玩的开心~。
感谢支持
精彩的还在后面，请大家多多支持，给点动力哈~
如果本文对您有帮助的话，请别吝啬手中的推荐票哦~
