Edited at

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

More than 1 year has passed since last update.

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上に公開しているのでそちらを見てください。