Comment tester un service AngularJS avec Jasmine?
(il y a une question connexe ici: Jasmine test does not see AngularJS module )
je veux juste tester un service sans bootstrapping Angular.
j'ai regardé quelques exemples et le tutoriel mais je ne vais nulle part.
Je n'ai que trois fichiers:
-
myService.js: où je définis un service AngularJS
-
test_myService.js: où j'ai défini un test Jasmine pour le service.
-
specRunner.html: un fichier HTML avec la configuration normale de jasmine et où j'importe les deux autres fichiers précédents et le jasmin, Angularjs et angular-Mock.js.
C'est le code pour le service (qui fonctionne comme prévu quand je ne suis pas de test):
var myModule = angular.module('myModule', []);
myModule.factory('myService', function(){
var serviceImplementation = {};
serviceImplementation.one = 1;
serviceImplementation.two = 2;
serviceImplementation.three = 3;
return serviceImplementation
});
comme je suis en essayant de tester le service isolément, je devrais pouvoir y accéder et vérifier leurs méthodes. Ma question Est: Comment puis-je injecter le service dans mon test sans bootstrapping AngularJS?
par exemple, comment puis-je tester la valeur retournée pour une méthode du service avec Jasmine comme ceci:
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);
})
})
});
4 réponses
le problème est que la méthode d'usine, qui instancie le service, n'est pas appelée dans l'exemple ci-dessus (seule la création du module n'instancie pas le service).
pour le service à instancier angular.injecteur doit être appelée avec le module où notre service est défini. Ensuite, nous pouvons demander au nouvel objet injecteur pour le service et son seulement alors quand le service est finalement instancié.
quelque chose comme ceci fonctionne:
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);
})
})
});
une autre façon serait de passer le service à une fonction utilisant ' invoquer ':
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 );
})
})
});
et, enfin, la manière" correcte "de le faire est d'utiliser" injecter "et" module "dans un avant chaque " bloc jasmin. En le faisant, nous devons nous rendre compte que la fonction "injecter" n'est pas dans la norme angularjs package, mais dans le module ngMock et qu'il ne fonctionne qu'avec jasmine.
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);
}))
})
});
bien que la réponse ci-dessus fonctionne probablement très bien (je ne l'ai pas essayé :) ), j'ai souvent beaucoup plus de tests à exécuter, donc je n'injecte pas dans les tests eux-mêmes. Je vais grouper les cas () dans describe blocks et exécuter mon injection dans un beforeeeach() ou beforeAll() dans chaque describe block.
Robert a également raison en ce qu'il dit que vous devez utiliser L'injecteur angulaire $pour faire les tests au courant du service ou de l'usine. Angulaire utilise cet injecteur lui-même dans vos applications, indiquer à l'application ce qui est disponible. Cependant, il peut être appelé à plus d'un endroit, et il peut aussi être appelé implicitement au lieu de explicitement. Vous remarquerez dans mon exemple de fichier de test spec ci-dessous, le bloc beforeEach () appelle implicitement injecteur pour rendre les choses disponibles pour être affectées à l'intérieur des tests.
pour revenir à grouper des choses et utiliser des blocs avant, voici un petit exemple. Je fais un service de chat et je veux le tester, donc mon installation simple pour écrire et tester le Service ressemblerait à ceci:
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);
Spec: Les Chats Contrôleur
'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);
});
});
Spec: Les Chats De 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 Basé sur certains commentaires, j'ai mis à jour ma réponse est un peu plus complexe, et J'ai aussi fait une démonstration de Plunkr. Plus précisément, l'un des commentaires mentionnait "que se passe-t-il si le service D'un contrôleur a lui-même une simple dépendance, comme $log?"- qui est inclus dans l'exemple avec les cas d'essai. Espérons que cela aide! Tester ou pirater la planète!!!
j'avais besoin de tester une directive qui nécessitait une autre directive, Google Places Autocomplete , je me demandais si je devais simplement me moquer... quoi qu'il en soit cela a fonctionné sans jeter toutes les erreurs pour la directive qui a exigé 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'));
});
si vous voulez tester un contrôleur, vous pouvez l'injecter et le tester comme ci-dessous.
describe('When access Controller', function () {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function (_$controller_) {
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
describe('$scope.objectState', function () {
it('is saying hello', function () {
var $scope = {};
var controller = $controller('yourController', { $scope: $scope });
expect($scope.objectState).toEqual('hello');
});
});
});