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

 

前言

好久没有写博了,主要还是太懒=。=,有点时间都去带娃、看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣,可以也尝试一下哦

PS:附上小女萌图一张:^_^

在WebStorm中集成Karma+jasmine进行前端单元测试_第1张图片

使用的工具/框架

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->+图标,弹出配置窗口,按照如下方式配置在WebStorm中集成Karma+jasmine进行前端单元测试_第2张图片
    1. name:主要是描述这是什么东西,随你喜好
    2. Program:这个很重要,把之前记下的安装路径填写到这里
    3. 后面2个参数照着填写即可,不需修改
  3. 设置完成后,就ok了,下面我们来看看效果。

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

 

效果演示

 

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

在WebStorm中集成Karma+jasmine进行前端单元测试_第3张图片

 

在WebStorm中集成Karma+jasmine进行前端单元测试_第4张图片

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

在WebStorm中集成Karma+jasmine进行前端单元测试_第5张图片

 

总结

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

感谢支持

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

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

你可能感兴趣的:(在WebStorm中集成Karma+jasmine进行前端单元测试)