Karma + Jasmine 自动化单元测试

1. Karma介绍

Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

Jasmine是单元测试框架，本单将介绍用Karma让Jasmine测试自动化完成。Jasmine的介绍，请参考文章：
jasmine行为驱动,测试先行

2. 创建项目并安装Karma

首先展示下Demo的目录结构

.
├── js
    └── src.js
├── test
    └── src-test.js
├── node_modules
    ├── karma
    ├── karma-jasmine
    ├── jasmine-core
    ...
    ...
    ...
├── karma.conf.js
└── package.json

创建项目并安装Karma

~: mkdir karma
~: cd karma
~: npm init
~: npm install karma --save-dev

3. 测试是否安装成功

~: karma start

WARN [karma]: No captured browser, open http://localhost:9876/
INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/

从浏览器看到karma界面，可以看到已连接字样connected

4. Karma + Jasmine 配置

初始化karma配置文件karma.conf.js

~: karma init

Wich testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
...
...
...

一路回车后，就会创建karma.conf.js文件，

安装集成包karma-jasmine，如果有提示缺少这个依赖包jasmine-core，也需要装下

1 2	~: npm install karma-jasmine --save-dev ~: npm install jasmine-core --save-dev

5. 自动化单元测试

3步准备工作：
1. 创建源文件：用于实现某种业务逻辑的文件，就是我们平时写的js脚本
2. 创建测试文件：符合jasmineAPI的测试js脚本
3. 修改karma.conf.js配置

创建源文件：用于实现某种业务逻辑的文件，就是我们平时写的js脚本
有一个需求，要实现单词倒写的功能。如：”ABCD” ==> “DCBA”
1
2
3
4
5
~: vi src.js

function reverse(name) {
return name.split("").reverse().join("");
}

创建测试文件：符合jasmineAPI的测试js脚本

describe("A suite of basic functions", function() {
   it("reverse word",function(){
       expect("DCBA").toEqual(reverse("ABCD"));
   });
});

修改karma.conf.js配置文件，我们这里需要修改：files和exclude变量

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        
        // list of files / patterns to load in the browser
        files: [
            'js/*.js',
            'test/*-test.js'
        ],
        
        // list of files to exclude
        exclude: ['karma.conf.js'],

        preprocessors: {},
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        concurrency: Infinity
    })
}

启动karma 单元测试全自动执行

 ~: karma start karma.conf.js

 WARN [karma]: No captured browser, open http://localhost:9876/
 INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/
 INFO [launcher]: Launching browser Chrome with unlimited concurrency
 INFO [launcher]: Starting browser Chrome
 INFO [Chrome 51.0.2704 (Mac OS X 10.11.5)]: Connected on socket /#ryK9l-yJI_SG4K_7AAAA with id 6128391
 Chrome 51.0.2704 (Mac OS X 10.11.5): Executed 1 of 1 SUCCESS (0.005 secs / 0.004 secs)

浏览器会自动打开

注意：

关于运行karma start karma.conf.js报错问题：

 WARN [karma]: No captured browser, open http://localhost:9876/
 INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/
 INFO [launcher]: Launching browser Chrome with unlimited concurrency
 ERROR [launcher]: Cannot load browser "Chrome": it is not registered! Perhaps you are missing some plugin?
 ERROR [karma]: Found 1 load error

解决方法：安装Chrome加载插件

1	~: npm install karma-chrome-launcher --save-dev

接下来我们修改src.js

 describe("A suite of basic functions", function() {
     it("reverse word",function(){
         expect("DCBA").toEqual(reverse("ABCD"));
         expect("Conan").toEqual(reverse("nano"));
     });
 });

由于karma.conf.js配置文件中autoWatch: true，所以src.js文件保存后，会自动执行单元测试。
执行日志如下：提示我们单元测试出错了。

 INFO [watcher]: Changed file "/Users/rxwang/Desktop/Html/Angular/karma/src.js".
 Chrome 51.0.2704 (Mac OS X 10.11.5) A suite of basic functions reverse word FAILED
    Expected 'Conan' to equal 'onan'.
        at Object. (src.js:8:19)
 Chrome 51.0.2704 (Mac OS X 10.11.5): Executed 1 of 1 (1 FAILED) ERROR (0.013 secs / 0.005 secs)

~ End ~