在WebStorm中集成Karma+jasmine进行前端单元测试
2013-08-15 10:59
309 查看
在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
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/),把这个路径记下,后面会用到
Step2:设置Webstorm
下面到重点了,通过对webstorm的settings的一番摸索,终于找到了一个很方便的办法,可以让我们轻松的实现在IDE一边开发、一边同步看到测试结果的方法,下面就介绍如何来设置:打开webstorm,选择File->Settings。
点击External Tools->+图标,弹出配置窗口,按照如下方式配置
name:主要是描述这是什么东西,随你喜好
Program:这个很重要,把之前记下的安装路径填写到这里
后面2个参数照着填写即可,不需修改
设置完成后,就ok了,下面我们来看看效果。
效果演示
选择要运行的测试配置文件:右键启动测试。下面会直接显示命令行窗口,当前的测试自动开始运行。karma还可以监控你测试中的文件,一旦你改动了任何地方,save的时候,test可以自动运行。
总结
今天主要是把这个小技巧记录、分享一下,没啥好总结的了,祝大家玩的开心~。感谢支持
精彩的还在后面,请大家多多支持,给点动力哈~如果本文对您有帮助的话,请别吝啬手中的推荐票哦~
相关文章推荐
- 在WebStorm中集成Karma+jasmine进行前端单元测试
- 在WebStorm中集成Karma+jasmine进行前端单元测试
- 集成 Karma 和 Jasmine 进行单元测试
- Karma(原名Testacular)与WebStorm进行集成
- Karma:1. 集成 Karma 和 Jasmine 进行单元测试
- Karma:1. 集成 Karma 和 Jasmine 进行单元测试
- Karma(原名Testacular)与WebStorm进行集成
- 安装和使用Karma-Jasmine进行自动化测试
- 使用Jasmine和Karma对AngularJS页面程序进行测试
- 通过缓存安装Karma和Jasmine并进行AngularJS单元测试
- Karma 4 - Karma 集成 Webpack 进行单元测试
- Karma:2. 集成 Karma 和 mocha 进行单元测试
- Karma 4 - Karma 集成 Webpack 进行单元测试
- 使用Jasmine和Karma对AngularJS页面程序进行测试
- Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告
- WebStorm集成Mocha + Chai进行js单元测试
- webstorm入门4-karma/jasmine/coverage/coveralls/phantomjs/travis-ci单元测试
- VS.NET中集成CVS-igloo替换VSS进行源代码管理
- SourceInsight与PC-LINT集成进行代码静态分析
- fir.im Weekly - 如何愉悦地进行持续集成