摘要：前面我們寫(xiě)過(guò)了的一篇文章開(kāi)始對(duì)進(jìn)行單元測(cè)試而提供了非常有用的工具去幫助我們進(jìn)行的測(cè)試。接下來(lái)，會(huì)增加一些內(nèi)容寫(xiě)測(cè)試用例接下來(lái)我們可以開(kāi)始進(jìn)行測(cè)試了，我們?cè)诿钚泄ぞ呃镙斎胂旅娴拿钗覀儗⑾旅娴拇a粘貼到中去。

緊隨前文如何對(duì)Angular Controller進(jìn)行單元測(cè)試,
但是我們也提到了前文工作流程的不方便，簡(jiǎn)單總結(jié)上前文進(jìn)行測(cè)試的一個(gè)流程：

修改測(cè)試代碼;

刷新瀏覽器；

查看測(cè)試結(jié)果；

該方法最大的缺陷就是，我們每次都得手動(dòng)的去刷新我們的瀏覽器。但是如果我們需要測(cè)試不同的瀏覽器我們又應(yīng)該如何處理呢？
而本文將提出一個(gè)自動(dòng)化測(cè)試的方案，從而解決這些問(wèn)題。

Karma是一個(gè)由AngularJS 團(tuán)隊(duì)創(chuàng)造的JavaScript測(cè)試工具。前面我們寫(xiě)過(guò)了Jasmine的一篇文章《開(kāi)始對(duì)Angular App進(jìn)行單元測(cè)試》
而Karma提供了非常有用的工具去幫助我們進(jìn)行Jasmine的測(cè)試。

你在這里可以看到更為詳細(xì)的安裝
文章，而本文隨后也會(huì)概括總結(jié)一些。首先你得安裝node.js,如果安裝了則跳過(guò)，沒(méi)有安裝的可以看這里

注意官方文檔中有說(shuō)明，Karma在某些版本的node工作不那么友好。然而作者本身的v0.12.x并沒(méi)遇見(jiàn)什么問(wèn)題。打開(kāi)你的命令行軟件，我們輸入下面命令，

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

接下來(lái)我么用npm安裝karma

npm install karma --save-dev

如果安裝成功， package.json中將會(huì)有下面內(nèi)容:

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

接著我們最好安裝下karma-cli,這樣可以全局使用karma命令。

npm install -g karma-cli

下一步我們需要安裝一些karma的插件，這樣可以Jasmine測(cè)試框架能夠工作，并且設(shè)置Google Chrome 作為我們的測(cè)試瀏覽器。

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

接下來(lái)，package.json會(huì)增加一些內(nèi)容:

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

接下來(lái)我們可以開(kāi)始進(jìn)行測(cè)試了，我們?cè)诿钚泄ぞ呃镙斎胂旅娴拿?

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);
        });    
    });

});

在進(jìn)行測(cè)試之前，我們創(chuàng)建一個(gè)配置文件用于進(jìn)行karma的一些設(shè)置。關(guān)于配置的內(nèi)容您可以閱讀 官方文檔。

接下來(lái)我們開(kāi)始創(chuàng)建這個(gè)配置文件我們需要輸入下面的內(nèi)容：

karma init karma.conf.js

然后回答命令行的問(wèn)題就行了

Which testing framework do you want to use?(你所使用的測(cè)試框架？)

接受一個(gè)默認(rèn)的值，比如:jasmine

Do you want to use Require.js ?(你希望使用 Require.js嗎？)
接受一個(gè)默認(rèn)的值,比如:no

Do you want to capture any browsers automatically ?(你想自動(dòng)捕獲瀏覽器嗎？)

接受一個(gè)默認(rèn)的值 比如：chrome

What is the location of your source and test files ?(你測(cè)試文件的地址)

輸入下面的地址：

tests/*.test.js

當(dāng)然你并不需要擔(dān)心你跳過(guò)那些詢問(wèn)，稍后我們都可以手動(dòng)修改配置文件。

Should any of the files included by the previous patterns be excluded ?（是否有需要排除的符合前面格式的問(wèn)文件）

Do you want Karma to watch all the files and run the tests on change ?(是否動(dòng)態(tài)監(jiān)聽(tīng)文件變化)

接受一個(gè)默認(rèn)的值,比如:yes

接下來(lái)我們可以在根目錄看到配置文件karma.conf.js創(chuàng)建成功。

我們輸入下面的命令開(kāi)始測(cè)試

karma start karma.conf.js

測(cè)試后的輸出就像下面這樣：

> @ 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. (/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就可以停止這個(gè)進(jìn)程。

小提示: 我們可以在package.json中的scripts里加入測(cè)試的命令，方便實(shí)用

{
    "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進(jìn)行karma的測(cè)試了。如果我們要驗(yàn)證package.json是否修改正確。

接下來(lái)我們添加一些controller的邏輯進(jìn)去.

mkdir app
touch app/calculator.controller.js

然后我們需要下載angular的類庫(kù)文件和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

我們需要將新增的目錄加入到配置中去，打開(kāi) karma.conf.js 然后添加成下面內(nèi)容:

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

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

npm test

運(yùn)行結(jié)果依舊是失敗的，因?yàn)槲覀儾](méi)有添加我們的controller,接下來(lái)我們將下面的代碼粘貼到 app/calculator.controller.js。

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

在命令行工具里面我們可以看到karma檢測(cè)到了文件變化，重新進(jìn)行測(cè)試，這個(gè)時(shí)候測(cè)試就會(huì)通過(guò)了。

接下來(lái)我們添加一個(gè)新的測(cè)試用例，我們將它增加到calculator.controller.test.js中去，把它放到describe作用域內(nèi)。

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

命令行這個(gè)時(shí)候會(huì)輸出測(cè)試不通過(guò)，這個(gè)時(shí)候我們需要更新我們的controller代碼

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

測(cè)試通過(guò)的輸出如下:

原文作者寫(xiě)過(guò)一篇文章更為詳細(xì)的介紹Karam,大家可以去深入的了解karma的使用。

karma支持不同的瀏覽器，我們可以在測(cè)試的時(shí)候設(shè)置這些瀏覽器：

chrome

safari

firefox

IE

除此之外，karma還有很多可供使用的插件，你可以在這里搜索到他們:https://www.npmjs.com/package/karma-ie-launcher

項(xiàng)目代碼

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

@ Bradley Braithwaite