【jasmine + Karma】 による AngularJs 単体テストをしてみた

AngularのUnitTestをjasmineで行ってみました。
環境としては、前回の
【jasmine + Karma】 による javascript 単体テストをしてみた
をベースとして、これにAngularJsを追加していこうと思います。

前回からの変更内容

AngularJs と angular-mocks をPackage.jsonに追加します。

注意)
angular-mock ではなくて、 angular-mocks 複数形なのに注意してください。
始め、angular-mockというものをnpm installしてしまい、ハマってしまったので共有します。

pacakge.json

+  "dependencies": {
+    "angular": "^1.6.1",
+    "angular-mocks": "^1.6.1"
+  }

Karmaで読み込むJSファイルにangularライブラリを追加します。

karma.conf.js

 files: [
 +      "node_modules/angular/angular.js",
 +      "node_modules/angular-mocks/angular-mocks.js",
        "src/script/js/*.js",
        "spec/*.js"
 ],		      

これで準備がととにましたので、次にプロダクトコードを作成していきます。

プロダクトコードの作成

プロダクトコードは、demoAngular.jsとし、簡単なcontrollerとfilterを作成します。
テストは、このcontrollerとfilterについて行うことにします。

filterは、既存のnumberFilterを拡張したものを作成しました。
値が、0以上の時は既存のfilterを適応、それ以外は"-"となるようなfilterとなっています。

demoAngular.js

angular.module('demoApp', [])
  .controller('demoAppCtl', ['$scope', function($scope) {
      $scope.name = "angular-unit-test";

      $scope.demoFunction = function(num) {
          return num * num;
      };
  }])
  .filter('numberCustomFilter', ['$filter', function ($filter) {
     return function (num) {
         if (num != null) {
             if (num >= 0) {
                 return $filter('number')(num);
             }
         }
         return "-";
     }
  }]);

テストコードの作成

Angularの単体テストの場合は、まず、angular.moduleをloadを行します。

AngularSpec.js

// load the angular module
beforeEach(module('demoApp'));

Controllerのテストコードを作成

DIのMock化を行う

Directiveについては、inject() でmock化します。

各ケースで共有してcontrollerのmockを使用するので、beforeEachでcontrollerのmock化を行います。

AngularSpec.js

// inject angular directive
beforeEach(inject(function(_$rootScope_, _$controller_) {
    var rootScope = _$rootScope_;
    $scope = rootScope.$new();
    $controller = _$controller_;

    // $controller('コントローラ名', { injectしているDirective: mock化したDirective変数名} )
    demoAppCtl = $controller('demoAppCtl', { $scope: $scope });
}));

テストケースの作成

Controllerで定義した$scopeのパラメータと関数についてテストケースを以下のように作成します。

AngularSpec.js

it('$scope パラメータ テスト', function() {
    expect($scope.name).toEqual("angular-unit-test");
});

it('demoFunction テスト', function() {
    expect( $scope.demoFunction(3) ).toEqual(9);
});

テスト実施

  demoAngularUnitTest
    controller test
      ✓ $scope パラメータ テスト
      ✓ demoFunction テスト

おわりに

カスタムフィルターについての単体テストも作成しましたが、やり方はcontorllerと同じなので省略します。
ソースをgithub上に公開しているのでそちらを見てください。