[譯]使用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