JasmineでAngularJSサービスをテストするにはどうすればよいですか？
（関連する質問がここにあります： JasmineテストではAngularJSモジュールが表示されません ）
Angularをブートストラップせずにサービスをテストしたいだけです。
私はいくつかの例とチュートリアルを見ましたが、どこにも行きません。
ファイルは3つしかありません。
myService.js：AngularJSサービスを定義する場所
test_myService.js：サービスのJasmineテストを定義します。
specRunner.html：通常のジャスミン構成のHTMLファイル。以前の2つの他のファイルとJasmine、Angularjs、angular-mocks.jsをインポートします。
これはサービスのコードです（テストしていないときに期待どおりに動作します）：
var myModule = angular.module('myModule', []);
myModule.factory('myService', function(){
var serviceImplementation = {};
serviceImplementation.one = 1;
serviceImplementation.two = 2;
serviceImplementation.three = 3;
return serviceImplementation
});
サービスを単独でテストしようとしているので、サービスにアクセスしてメソッドを確認できるはずです。私の質問は、AngularJSをブートストラップせずにテストにサービスを注入するにはどうすればよいですか？
たとえば、次のようにJasmineでサービスのメソッドに対して返された値をテストするにはどうすればよいですか：
describe('myService test', function(){
describe('when I call myService.one', function(){
it('returns 1', function(){
myModule = angular.module('myModule');
//something is missing here..
expect( myService.one ).toEqual(1);
})
})
});
問題は、上記の例ではサービスをインスタンス化するファクトリメソッドが呼び出されないことです（モジュールを作成するだけではサービスはインスタンス化されません）。
サービスをインスタンス化するには、サービスが定義されているモジュールで angular.injector を呼び出す必要があります。次に、サービスの新しいインジェクタオブジェクトに問い合わせて、サービスが最終的にインスタンス化されたときにのみ問い合わせることができます。
このような何かが動作します：
describe('myService test', function(){
describe('when I call myService.one', function(){
it('returns 1', function(){
var $injector = angular.injector([ 'myModule' ]);
var myService = $injector.get( 'myService' );
expect( myService.one ).toEqual(1);
})
})
});
別の方法は、「 invoke 」を使用してサービスを関数に渡すことです。
describe('myService test', function(){
describe('when I call myService.one', function(){
it('returns 1', function(){
myTestFunction = function(aService){
expect( aService.one ).toEqual(1);
}
//we only need the following line if the name of the
//parameter in myTestFunction is not 'myService' or if
//the code is going to be minify.
myTestFunction.$inject = [ 'myService' ];
var myInjector = angular.injector([ 'myModule' ]);
myInjector.invoke( myTestFunction );
})
})
});
そして最後に、それを行うための「適切な」方法は、「 beforeEach 」ジャスミンブロックで「 inject 」および「 module 」を使用することです。それを行うとき、「inject」関数は標準のangularjsパッケージではなく、ngMockモジュールにあり、ジャスミンでのみ機能することを理解する必要があります。
describe('myService test', function(){
describe('when I call myService.one', function(){
beforeEach(module('myModule'));
it('returns 1', inject(function(myService){ //parameter name = service name
expect( myService.one ).toEqual(1);
}))
})
});
上記の答えはおそらく問題なく動作しますが（試したことはありません:)）、多くの場合、実行するテストが多いため、テスト自体を挿入しません。 it（）ケースを記述ブロックにグループ化し、各記述ブロックのbeforeEach（）またはbeforeAll（）でインジェクションを実行します。
また、RobertはAngular $ injectorを使用してテストにサービスまたはファクトリを認識させる必要があると言っているという点でも正しいです。 Angularは、アプリケーションでもこのインジェクター自体を使用して、使用可能なものをアプリケーションに通知します。ただし、複数の場所で呼び出すことができ、明示的にではなくimplicitlyと呼ぶこともできます。以下の私の仕様テストファイルの例では、beforeEach（）ブロックがインジェクターを暗黙的に呼び出して、テスト内で割り当てられるようにします。
物事のグループ化とブロック前の使用に戻り、ここに小さな例を示します。 Catサービスを作成しているので、テストしたいので、サービスを記述してテストするための簡単なセットアップは次のようになります。
app.js
var catsApp = angular.module('catsApp', ['ngMockE2E']);
angular.module('catsApp.mocks', [])
.value('StaticCatsData', function() {
return [{
id: 1,
title: "Commando",
name: "Kitty MeowMeow",
score: 123
}, {
id: 2,
title: "Raw Deal",
name: "Basketpaws",
score: 17
}, {
id: 3,
title: "Predator",
name: "Noseboops",
score: 184
}];
});
catsApp.factory('LoggingService', ['$log', function($log) {
// Private Helper: Object or String or what passed
// for logging? Let's make it String-readable...
function _parseStuffIntoMessage(stuff) {
var message = "";
if (typeof stuff !== "string") {
message = JSON.stringify(stuff)
} else {
message = stuff;
}
return message;
}
/**
* @summary
* Write a log statement for debug or informational purposes.
*/
var write = function(stuff) {
var log_msg = _parseStuffIntoMessage(stuff);
$log.log(log_msg);
}
/**
* @summary
* Write's an error out to the console.
*/
var error = function(stuff) {
var err_msg = _parseStuffIntoMessage(stuff);
$log.error(err_msg);
}
return {
error: error,
write: write
};
}])
catsApp.factory('CatsService', ['$http', 'LoggingService', function($http, Logging) {
/*
response:
data, status, headers, config, statusText
*/
var Success_Callback = function(response) {
Logging.write("CatsService::getAllCats()::Success!");
return {"status": status, "data": data};
}
var Error_Callback = function(response) {
Logging.error("CatsService::getAllCats()::Error!");
return {"status": status, "data": data};
}
var allCats = function() {
console.log('# Cats.allCats()');
return $http.get('/cats')
.then(Success_Callback, Error_Callback);
}
return {
getAllCats: allCats
};
}]);
var CatsController = function(Cats, $scope) {
var vm = this;
vm.cats = [];
// ========================
/**
* @summary
* Initializes the controller.
*/
vm.activate = function() {
console.log('* CatsCtrl.activate()!');
// Get ALL the cats!
Cats.getAllCats().then(
function(litter) {
console.log('> ', litter);
vm.cats = litter;
console.log('>>> ', vm.cats);
}
);
}
vm.activate();
}
CatsController.$inject = ['CatsService', '$scope'];
catsApp.controller('CatsCtrl', CatsController);
仕様：Cats Controller
'use strict';
describe('Unit Tests: Cats Controller', function() {
var $scope, $q, deferred, $controller, $rootScope, catsCtrl, mockCatsData, createCatsCtrl;
beforeEach(module('catsApp'));
beforeEach(module('catsApp.mocks'));
var catsServiceMock;
beforeEach(inject(function(_$q_, _$controller_, $injector, StaticCatsData) {
$q = _$q_;
$controller = _$controller_;
deferred = $q.defer();
mockCatsData = StaticCatsData();
// ToDo:
// Put catsServiceMock inside of module "catsApp.mocks" ?
catsServiceMock = {
getAllCats: function() {
// Just give back the data we expect.
deferred.resolve(mockCatsData);
// Mock the Promise, too, so it can run
// and call .then() as expected
return deferred.promise;
}
};
}));
// Controller MOCK
var createCatsController;
// beforeEach(inject(function (_$rootScope_, $controller, FakeCatsService) {
beforeEach(inject(function (_$rootScope_, $controller, CatsService) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
createCatsController = function() {
return $controller('CatsCtrl', {
'$scope': $scope,
CatsService: catsServiceMock
});
};
}));
// ==========================
it('should have NO cats loaded at first', function() {
catsCtrl = createCatsController();
expect(catsCtrl.cats).toBeDefined();
expect(catsCtrl.cats.length).toEqual(0);
});
it('should call "activate()" on load, but only once', function() {
catsCtrl = createCatsController();
spyOn(catsCtrl, 'activate').and.returnValue(mockCatsData);
// *** For some reason, Auto-Executing init functions
// aren't working for me in Plunkr?
// I have to call it once manually instead of relying on
// $scope creation to do it... Sorry, not sure why.
catsCtrl.activate();
$rootScope.$digest(); // ELSE ...then() does NOT resolve.
expect(catsCtrl.activate).toBeDefined();
expect(catsCtrl.activate).toHaveBeenCalled();
expect(catsCtrl.activate.calls.count()).toEqual(1);
// Test/Expect additional conditions for
// "Yes, the controller was activated right!"
// (A) - there is be cats
expect(catsCtrl.cats.length).toBeGreaterThan(0);
});
// (B) - there is be cats SUCH THAT
// can haz these properties...
it('each cat will have a NAME, TITLE and SCORE', function() {
catsCtrl = createCatsController();
spyOn(catsCtrl, 'activate').and.returnValue(mockCatsData);
// *** and again...
catsCtrl.activate();
$rootScope.$digest(); // ELSE ...then() does NOT resolve.
var names = _.map(catsCtrl.cats, function(cat) { return cat.name; })
var titles = _.map(catsCtrl.cats, function(cat) { return cat.title; })
var scores = _.map(catsCtrl.cats, function(cat) { return cat.score; })
expect(names.length).toEqual(3);
expect(titles.length).toEqual(3);
expect(scores.length).toEqual(3);
});
});
仕様：Cats Service
'use strict';
describe('Unit Tests: Cats Service', function() {
var $scope, $rootScope, $log, cats, logging, $httpBackend, mockCatsData;
beforeEach(module('catsApp'));
beforeEach(module('catsApp.mocks'));
describe('has a method: getAllCats() that', function() {
beforeEach(inject(function($q, _$rootScope_, _$httpBackend_, _$log_, $injector, StaticCatsData) {
cats = $injector.get('CatsService');
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
// We don't want to test the resolving of *actual data*
// in a unit test.
// The "proper" place for that is in Integration Test, which
// is basically a unit test that is less mocked - you test
// the endpoints and responses and APIs instead of the
// specific service behaviors.
mockCatsData = StaticCatsData();
// For handling Promises and deferrals in our Service calls...
var deferred = $q.defer();
deferred.resolve(mockCatsData); // always resolved, you can do it from your spec
// jasmine 2.0
// Spy + Promise Mocking
// spyOn(obj, 'method'), (assumes obj.method is a function)
spyOn(cats, 'getAllCats').and.returnValue(deferred.promise);
/*
To mock $http as a dependency, use $httpBackend to
setup HTTP calls and expectations.
*/
$httpBackend.whenGET('/cats').respond(200, mockCatsData);
}));
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
})
it(' exists/is defined', function() {
expect( cats.getAllCats ).toBeDefined();
expect( typeof cats.getAllCats ).toEqual("function");
});
it(' returns an array of Cats, where each cat has a NAME, TITLE and SCORE', function() {
cats.getAllCats().then(function(data) {
var names = _.map(data, function(cat) { return cat.name; })
var titles = _.map(data, function(cat) { return cat.title; })
var scores = _.map(data, function(cat) { return cat.score; })
expect(names.length).toEqual(3);
expect(titles.length).toEqual(3);
expect(scores.length).toEqual(3);
})
});
})
describe('has a method: getAllCats() that also logs', function() {
var cats, $log, logging;
beforeEach(inject(
function(_$log_, $injector) {
cats = $injector.get('CatsService');
$log = _$log_;
logging = $injector.get('LoggingService');
spyOn(cats, 'getAllCats').and.callThrough();
}
))
it('that on SUCCESS, $logs to the console a success message', function() {
cats.getAllCats().then(function(data) {
expect(logging.write).toHaveBeenCalled();
expect( $log.log.logs ).toContain(["CatsService::getAllCats()::Success!"]);
})
});
})
});
EDITいくつかのコメントに基づいて、答えを少し複雑に更新し、Plunkrのデモも作成しました単体テスト。具体的には、「コントローラーのサービス自体に$ logなどの単純な依存関係がある場合はどうでしょうか」というコメントの1つです。 -これは、テストケースの例に含まれています。それが役に立てば幸い！惑星をテストまたはハック!!!
別のディレクティブを必要とするディレクティブをテストする必要がありました Google Places Autocomplete 、私はそれを単にモックするべきかどうかを議論していました...とにかくこれはgPlacesAutocompleteを必要とするディレクティブのエラーを投げることなく機能しました。
describe('Test directives:', function() {
beforeEach(module(...));
beforeEach(module(...));
beforeEach(function() {
angular.module('google.places', [])
.directive('gPlacesAutocomplete',function() {
return {
require: ['ngModel'],
restrict: 'A',
scope:{},
controller: function() { return {}; }
};
});
});
beforeEach(module('google.places'));
});