Jasmine を使って AngularJS の単体テストコードを書く。
#コントローラとかを個別の関数として定義している場合
フォルダ構成
|-test.html : テストを動かすための html.
|-controllers.js : コントローラを定義した js.
|-app.js : AngularJS の設定をしている js.
|-test.js : Jasmine のテストコード.
|-jasmine/ : Jasmine のファイル類.
`-angular/ : AngularJS のファイル類.
controllers.js
var mine = {
controllers: {
SampleController: function($scope) {
$scope.message = 'Hello SampleController!!';
$scope.click = function() {
$scope.message = 'clicked!!';
};
}
}
};
app.js
angular
.module('mine', [])
.controller('SampleController', mine.controllers.SampleController);
test.js
describe('suite', function() {
var controller,
$scope;
beforeEach(function() {
$scope = {};
controller = new mine.controllers.SampleController($scope);
});
it('spec', function() {
expect($scope.message).toBe('Hello SampleController!!');
$scope.click();
expect($scope.message).toBe('clicked!!');
});
});
test.html
<!doctype html>
<html>
<head>
<link href="jasmine/jasmine.css" rel="stylesheet"/>
<script src="jasmine/jasmine.js"></script>
<script src="jasmine/jasmine-html.js"></script>
<script src="jasmine/boot.js"></script>
<script src="jasmine/console.js"></script>
<script src="angular/angular.min.js"></script>
<script src="controllers.js"></script>
<script src="app.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
- 普通にコントローラをインスタンス化して、スタブの
$scopeを渡してテストしている。 - 必要に応じて Jasmine のスパイ機能とかを使えばいい気がする。
#コントローラとかを個別の関数として定義していない場合
フォルダ構成
|-test.html : テストを動かすための html.
|-app.js : AngularJS の設定をしている js. コントローラの定義もまとめている.
|-test.js : Jasmine のテストコード.
|-jasmine/ : Jasmine のファイル類.
`-angular/ : AngularJS のファイル類.
app.js
angular
.module('mine', [])
.controller('SampleController', function($scope) {
$scope.message = 'Hello SampleController!!';
$scope.click = function() {
$scope.message = 'clicked';
};
});
test.js
describe('suite', function() {
var controller, $scope;
beforeEach(function() {
module('mine');
inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
controller = $controller('SampleController', {
$scope: $scope
});
});
});
it('spec', function() {
expect($scope.message).toBe('Hello SampleController!!');
$scope.click();
expect($scope.message).toBe('clicked');
});
});
test.html
<!doctype html>
<html>
<head>
<link href="jasmine/jasmine.css" rel="stylesheet"/>
<script src="jasmine/jasmine.js"></script>
<script src="jasmine/jasmine-html.js"></script>
<script src="jasmine/boot.js"></script>
<script src="jasmine/console.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-mocks.js"></script>
<script src="app.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
-
angular.module().controller()を使って匿名関数でコントローラを定義しているケース。 - mine モジュールからコントローラを取得する必要がある。
-
angular-mocks.jsを使うことで、テストコード中でモジュール内の各インスタンスを取得できる。 -
module('mine');で、 mine モジュールを読み込んでいる。 -
inject()に渡した関数内で必要なスコープやコントローラを取り出している。
#参考