[译]使用karma进行angular测试

紧随前文如何对Angular Controller进行单元测试,
可是咱们也提到了前文工做流程的不方便，简单总结上前文进行测试的一个流程：

• 修改测试代码;

• 刷新浏览器；

• 查看测试结果；

该方法最大的缺陷就是，咱们每次都得手动的去刷新咱们的浏览器。可是若是咱们须要测试不一样的浏览器咱们又应该如何处理呢？
而本文将提出一个自动化测试的方案，从而解决这些问题。

关于Karma

Karma是一个由AngularJS 团队创造的JavaScript测试工具。前面咱们写过了Jasmine的一篇文章《开始对Angular App进行单元测试》
而Karma提供了很是有用的工具去帮助咱们进行Jasmine的测试。

安装 Karma

你在这里能够看到更为详细的安装
文章，而本文随后也会归纳总结一些。首先你得安装node.js,若是安装了则跳过，没有安装的能够看这里

注意官方文档中有说明，Karma在某些版本的node工做不那么友好。然而做者自己的v0.12.x并没碰见什么问题。打开你的命令行软件，咱们输入下面命令，

mkdir CalculatorKarma
cd CalculatorKarma
echo {} >> package.json bash

接下来我么用npm安装karma

npm install karma --save-dev

若是安装成功， package.json中将会有下面内容:

{
  "devDependencies": {
    "karma": "^0.12.31"
  }
}

接着咱们最好安装下karma-cli,这样能够全局使用karma命令。

npm install -g karma-cli

下一步咱们须要安装一些karma的插件，这样能够Jasmine测试框架可以工做，而且设置Google Chrome 做为咱们的测试浏览器。

npm install karma-jasmine karma-chrome-launcher --save-dev

接下来，package.json会增长一些内容:

{
  "devDependencies": {
    "jasmine-core": "^2.3.4",
    "karma": "^0.12.31",
    "karma-chrome-launcher": "^0.1.12",
    "karma-jasmine": "^0.3.5"
  }
}

写测试用例

接下来咱们能够开始进行测试了，咱们在命令行工具里输入下面的命令:

mkdir tests
touch tests/calculator.controller.test.js

咱们将下面的代码粘贴到calculator.controller.test.js中去。

describe('calculator', function () {

  beforeEach(module('calculatorApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  describe('sum', function () {
        it('1 + 1 should equal 2', function () {
            var $scope = {};
            var controller = $controller('CalculatorController', { $scope: $scope });
            $scope.x = 1;
            $scope.y = 2;
            $scope.sum();
            expect($scope.z).toBe(3);
        });    
    });

});

让测试跑起来

在进行测试以前，咱们建立一个配置文件用于进行karma的一些设置。关于配置的内容您能够阅读 官方文档。

接下来咱们开始建立这个配置文件咱们须要输入下面的内容：

karma init karma.conf.js

而后回答命令行的问题就好了

Which testing framework do you want to use?(你所使用的测试框架？)

接受一个默认的值，好比:jasmine

Do you want to use Require.js ?(你但愿使用 Require.js吗？)
接受一个默认的值,好比:no

Do you want to capture any browsers automatically ?(你想自动捕获浏览器吗？)

接受一个默认的值 好比：chrome

What is the location of your source and test files ?(你测试文件的地址)

输入下面的地址：

tests/*.test.js

固然你并不须要担忧你跳过那些询问，稍后咱们均可以手动修改配置文件。

Should any of the files included by the previous patterns be excluded ?（是否有须要排除的符合前面格式的问文件）

Do you want Karma to watch all the files and run the tests on change ?(是否动态监听文件变化)

接受一个默认的值,好比:yes

接下来咱们能够在根目录看到配置文件karma.conf.js建立成功。

咱们输入下面的命令开始测试

karma start karma.conf.js

测试后的输出就像下面这样：

> @ test /Users/devuser/repos/CalculatorKarma
> ./node_modules/karma/bin/karma start karma.conf.js

INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 42.0.2311 (Mac OS X 10.10.3)]: Connected on socket 2absOkNfa1asasaX0fCJ with id 71338229
Chrome 42.0.2311 (Mac OS X 10.10.3) calculator encountered a declaration exception FAILED
    ReferenceError: module is not defined
        at Suite.<anonymous> (/Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:3:13)
        at /Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:1:1
Chrome 42.0.2311 (Mac OS X 10.10.3): Executed 1 of 1 (1 FAILED) ERROR (0.01 secs / 0.005 secs)

按住ctrl/command+c就能够中止这个进程。

小提示: 咱们能够在package.json中的scripts里加入测试的命令，方便实用

{
    "scripts": {
    "test": "karma start karma.conf.js"
  },
  "devDependencies": {
    "jasmine-core": "^2.3.4",
    "karma": "^0.12.31",
    "karma-chrome-launcher": "^0.1.12",
    "karma-jasmine": "^0.3.5"
  }
}

加入这段代码后，咱们能够输入npm test进行karma的测试了。若是咱们要验证package.json是否修改正确。

经过测试并添加新功能

接下来咱们添加一些controller的逻辑进去.

mkdir app
touch app/calculator.controller.js

而后咱们须要下载angular的类库文件和angular mock的文件。

mkdir lib
curl -o lib/angular.min.js https://code.angularjs.org/1.4.0-rc.2/angular.min.js
curl -o lib/angular-mocks.js https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js

咱们须要将新增的目录加入到配置中去，打开 karma.conf.js 而后添加成下面内容:

// list of files / patterns to load in the browser
files: [
  'lib/angular.min.js',
  'lib/angular-mocks.js',
  'app/*.js',
  'tests/*.js'
],

再次在命令行中输入命令:

npm test

运行结果依旧是失败的，由于咱们并无添加咱们的controller,接下来咱们将下面的代码粘贴到 app/calculator.controller.js。

angular.module('calculatorApp', []).controller('CalculatorController', function CalculatorController($scope) {
  $scope.sum = function() {
    $scope.z = $scope.x + $scope.y;
  };
});

在命令行工具里面咱们能够看到karma检测到了文件变化，从新进行测试，这个时候测试就会经过了。

接下来咱们添加一个新的测试用例，咱们将它增长到calculator.controller.test.js中去，把它放到describe做用域内。

it('z should have default value of zero', function () {
    var $scope = {};
    var controller = $controller('CalculatorController', { $scope: $scope });
    expect($scope.z).toBe(0);
});

命令行这个时候会输出测试不经过，这个时候咱们须要更新咱们的controller代码

angular.module('calculatorApp', []).controller('CalculatorController', function CalculatorController($scope) {
  $scope.z = 0;
  $scope.sum = function() {
    $scope.z = $scope.x + $scope.y;
  };
});

测试经过的输出以下:

更多

原文做者写过一篇文章更为详细的介绍Karam,你们能够去深刻的了解karma的使用。

karma支持不一样的浏览器，咱们能够在测试的时候设置这些浏览器：

• chrome

• safari

• firefox

• IE

除此以外，karma还有不少可供使用的插件，你能够在这里搜索到他们:https://www.npmjs.com/package/karma-ie-launcher

项目代码

---

原文地址: http://www.bradoncode.com/blog/2015/05/19/karma-angularjs-testing/

@ Bradley Braithwaite