在WebStorm中集成Karma+jasmine进行前端单元测试

 

前言

好久没有写博了，主要还是太懒=。=，有点时间都去带娃、看书了，今天给大家分享一个原创的小东西，如果大家对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

1. Webstorm是收费的，但是屌丝们总是有办法的，你们懂的，这里IDE的安装就不说了，很简单一路默认即可。
2. Karma是依赖Node.js的，所以要先安装Node.js,可以去这里下载，然后直接安装即可。
3. 安装完node之后，npm也就附带安装了，npm就是node.js的包管理器，我们通过它来安装其他的第三方库、框架，下面打开cmd窗口，输入“npm install -g karma”,等几分钟就会看到安装完成的提示了
4. 安装完成后，注意看cmd窗口提示，里面会有最终安装到的路径(比如我用的Win7系统，就是C:/users/xxx/AppData/Roaming/npm/)，把这个路径记下，后面会用到

现在Karma就安装好了，默认Karma会自动安装karma-jasmine插件，这是一个能够使用jasmine断言语法的框架，我们今天的测试用例就是用它来写啦。

Step2:设置Webstorm

下面到重点了，通过对webstorm的settings的一番摸索，终于找到了一个很方便的办法，可以让我们轻松的实现在IDE一边开发、一边同步看到测试结果的方法，下面就介绍如何来设置：

1. 打开webstorm,选择File->Settings。
2. 点击External Tools->+图标，弹出配置窗口，按照如下方式配置
   1. name：主要是描述这是什么东西，随你喜好
   2. Program:这个很重要，把之前记下的安装路径填写到这里
   3. 后面2个参数照着填写即可，不需修改
3. 设置完成后，就ok了，下面我们来看看效果。

注意本篇文章不是讲karma的使用，所以具体如何使用karma来单元测试，请移步官网看一下介绍即可，下面直接使用我目前的一个karma工程演示一下效果

 

效果演示

 

选择要运行的测试配置文件：右键启动测试。下面会直接显示命令行窗口，当前的测试自动开始运行。

 

karma还可以监控你测试中的文件，一旦你改动了任何地方，save的时候，test可以自动运行。

 

总结

今天主要是把这个小技巧记录、分享一下，没啥好总结的了，祝大家玩的开心~。

感谢支持

精彩的还在后面，请大家多多支持，给点动力哈~

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~