I have angular modules:
var app = angular.module("SearchUI",[]);
in it, I have a service "configService", that maintains bunch of config params:
app.provider("configService",function(){
//stuff here
})
I have ran the jasmine unit tests in configService fineL
describe('configService',function(){
var configService,$httpBackend;
beforeEach(module('SearchUI'));
beforeEach(inject(function(_configService_,$injector){
configService = _configService_;
$httpBackend = $injector.get("$httpBackend");
}));
it('should have default values for configService', function(){
expect(configService.getDefaultSearch()).toEqual(['abstract','title','keyword','keywordplus'
]);
});
//other stuff
all tests pass fine.
however, I am not understanding how to maintain that injection in another service:
i.e in my application:
app.service("SearchService",function($http,$log,configService,$q){
//stuff
search_params = configService.getDefaultSearch();
})
my spec:
describe('SearchService',function(){
var searchService,configService;
beforeEach(module('SearchUI'));
beforeEach(inject(function(_configService_,_SearchService_){
configService = _configService_;
searchService = _SearchService_;
}));
it('SearchService should return results', function(){
var waiting = searchService.SimpleSearch("card","wos",0);
//other stuff
the spec fails because in simplesearch function requires this:
search_params = configService.getDefaultSearch(); //get the default search parameters
my question is, how do I inject the required service in to the ANOTHER service?
Services are simply JavaScript classes and you can create an instance of them without using angular's inject mechanism to facilitate your dependency injection. Instead you can simply create a new instance of the class yourself while supplying the parameters which are required.
Currently you are creating your service via an inline function:
app.service("SearchService",function($http,$log,configService,$q){...
Instead of that by making a small adjustment which will separate out the declaration of the service from its injection into the angular module. Doing so will allow you to gain access from your test to the service class.
function SearchService($http, configService){...
app.service("SearchService", SearchService);
From your test you suite you can prepare your injectables in your beforeEach preprocessor:
describe('configService',function(){
var configService, httpBackend;
beforeEach(module('SearchUI'));
beforeEach(inject(function($httpBackend){
httpBackend = "$httpBackend";
configService = jasmine.createSpyObj('configService', ['getDefaultSearch']);
}));
/* helper method that I create to only have one place where the service is created
If I add a new param/dependency then I only have to change the construction once */
function createService(){
return new SearchService(httpBackend, configService);
}
});
The main reason for taking this approach to testing (controlling the dependency injection manually rather than relying on angular's implementation) is to have full control and to truly isolate the item I am trying to test.
configService and SearchService are init in module app but not in module SearchUI. Replace "beforeEach(module('SearchUI'));" by "beforeEach(module('myapp'));"
Related
I have an AngularJS service which uses it's own methods (bad practice?). When I go to test this, and mock out the internally used method, I get conflicting context.
Here's an example service
angular.module('myModule', []).service('cardWarsService', function() {
return {floopThePig:floopThePig,
winAtCardWars:winAtCardWars};
function winAtCardWars(cards){
....
floopThePig(pigCard)
....
};
function floopThePig(card){
// flooping happens here
}
});
However when I try to mock out floopThePig I get told it's not called. This is how I'm mocking it.
spyOn(cardWarsService, 'floopThePig').and.callThrough();
If I change the call in the service to use this or with var self = this then it works in the test frame work but not in the application.
angular.module('myModule', []).service('cardWarsService', function() {
var self = this;
return {floopThePig:floopThePig,
winAtCardWars:winAtCardWars};
function winAtCardWars(cards){
....
self.floopThePig(pigCard)
....
};
function floopThePig(card){
// flooping happens here
}
});
Place your return object as a stand alone variable.
The issue is that the methods on either side of your return object are different. Your test only mocks the interface. As your application is not using the interface the spy doesn't pick up that it's being used.
This will guarantee our service will work in and out of the test framework
angular.module('myModule', []).service('cardWarsService', function() {
var self = {floopThePig:floopThePig,
winAtCardWars:winAtCardWars};
return self;
function winAtCardWars(cards){
....
floopThePig(pigCard)
....
};
function floopThePig(card){
// flooping happens here
}
});
I've looked at the documentation for angular.mock.module and a couple of examples of others using it but I seem to be running into an issue in my use-case that I don't understand.
I'm running Jasmine (2.4.1) tests with angular (1.4.9) and I have my angular app separated into multiple modules. When I attempt to mock out certain parts of my app for unit testing I want to mock out entire modules (or providers) so that I only expose the pieces I use.
Here is a very simple app that has a main module plunker which depends on plunker.service. plunker.service depends on plunker.constant.
var app = angular.module('plunker', ['plunker.service']);
app.controller('MainCtrl', function($scope, valueService, appService) {
$scope.init = function() {
$scope.appValue = valueService.getValue();
$scope.appIsRunning = appService.getStatus();
};
});
angular.module('plunker.service', ['plunker.constant'])
.service('appService', function(appSettings) {
var vm = this;
vm.getStatus = function () {
if (appSettings.isRunning) {
return true;
} else {
return false;
}
};
})
.service('valueService', function(valueSettings) {
var vm = this;
vm.getValue = function () {
return valueSettings.value;
}
});
angular.module('plunker.constant', [])
.constant('appSettings', { isRunning: true })
.constant('valueSettings', { value: 10 });
In my Jasmine tests I have a beforeEach() that registers my modules using module (aka angular.mock.module).
I have seen 3 ways of using module
string
function with $provide
object
You can see below that I use the module('plunker') (string) to register my main module and I have 3 ways of mocking out my appSettings constant (A, B, C). You will notice that the function with $provide.constant works fine but function with $provide.value does not and object does not.
beforeEach(function() {
module('plunker');
function useFunction(typeofProvider) {
module(function($provide) {
$provide[typeofProvider]('appSettings', { isRunning: false });
});
}
function useObject() {
module({
appSettings: { isRunning: false }
});
}
// A. THIS WORKS! //
useFunction('constant');
// B. THIS DOES NOT //
// useFunction('value');
// C. THIS ALSO DOES NOT!! //
// useObject();
inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
ctrl = $controller('MainCtrl', {
$scope: $scope
});
});
});
I have also seen people use the following syntax...
beforeEach(function() {
var mockService = function () {
var mockValue = 10;
this.value = mockValue;
};
// D.
module('a.module.name', function newProviders($provide){
$provide.service('realService', mockService);
});
});
My questions
In my test code, why does A. work but B. and C. do not?
Is D. equivalent to calling module('a.module.name'); followed by module(function newProviders($provide) { ... });? Does placing both in the same module() call have any special effects on how things are registered or is it just a shorthand? (based on the documentation it should be a shorthand)
Related to Jasmine, specifically, do all beforeEach() calls run in the same top-to-bottom order with every execution?
Here is my plunker for the above app and jasmine code
Thanks
This happens because of how Angular injector works. In fact, there are two different injectors in Angular. The one (available as $injector in config blocks) deals with service providers. Another one (available as $injector anywhere else) deals with service instances. Providers and instances are cached and stored internally.
$provide.constant('service') creates both provider and instance of name 'service' at call time.
All other types of services are lazily instantiated. They create 'serviceProvider' provider at call time, but 'service' instance is created on the first injection.
Since Angular service instance is a singleton, it refers to instance cache before the instantiation. If the instance is in the cache, it is reused and not instantiated. constant service instance is eagerly instantiated, so only another constant can override the instance.
Object properties in angular.mock.module are shortcuts for $provide.value, and useObject() equals to useFunction('value') in this example.
As long as module order stays the same,
module('a.module.name', function ($provide) { ... });
is indeed a shortcut for
module('a.module.name');
module(function ($provide) { ... });
Due to the fact that appSettings object isn't used in config blocks (the primary use of constant service), it is more convenient to make it value.
I'm currently getting started with angular unit testing. As the first controller I wanted to tes looked like this, I got confused.
angular.module('sgmPaperApp')
.controller('AccountCtrl', function ($mdToast, user, $firebaseArray, Ref) {
var vm = this;
vm.data = user;
vm.save = saveUser;
vm.comments = $firebaseArray(Ref.child('comments').orderByChild('person').equalTo(user.$id));
function saveUser() {
vm.data.$save().then(function () {
$mdToast.showSimple('Data saved');
});
}
});
Should I really mock all external services I use? After all that controller isn't very much more then external services and mocking the firebaseArray could be difficult.
Thanks for your advice and helping me get started with testing
You don't need to worry about what the external dependencies do, just mock their APIs.
These are the only mocks I can see. I'm going to assume you're using Jasmine
var Ref, $firebaseArray, $mdToast, user, vm;
beforeEach(function() {
Ref = jasmine.createSpyObj('Ref', ['child', 'orderByChild', 'equalTo']);
Ref.child.and.returnValue(Ref);
Ref.orderByChild.and.returnValue(Ref);
Ref.equalTo.and.returnValue(Ref);
$firebaseArray = jasmine.createSpy('$firebaseArray').and.returnValue('comments');
$mdToast = jasmine.createSpyObj('$mdToast', ['showSimple']);
user = jasmine.createSpyObj('user', ['$save']);
user.$id = 'id';
module('sgmPaperApp'); // you should consider separate modules per "thing"
inject(function($controller) {
vm = $controller('AccountCtrl', {
$mdToast: $mdToast,
user: user,
$firebaseArray: $firebaseArray,
Ref: Ref
});
});
});
Then you can easily create your tests
it('assigns a bunch of stuff on creation', function() {
expect(vm.data).toBe(user);
expect(vm.comments).toEqual('comments'); // that's what the mock returns
expect(Ref.child).toHaveBeenCalledWith('comments');
expect(Ref.orderByChild).toHaveBeenCalledWith('person');
expect(Ref.equalTo).toHaveBeenCalledWith(user.$id);
expect($firebaseArray).toHaveBeenCalledWith(Ref);
});
You can even test promise based methods like saveUser
it('saves the user and makes some toast', inject(function($q, $rootScope) {
user.$save.and.returnValue($q.when()); // an empty, resolved promise
vm.saveUser();
expect(user.$save).toHaveBeenCalled();
expect($mdToast.showSimple).not.toHaveBeenCalled(); // because the promise hasn't resolved yet
$rootScope.$apply(); // resolves promises
expect($mdToast.showSimple).toHaveBeenCalledWith('Data saved');
}));
So to answer the question we need to consider what we're actually trying to do. If we are trying to unit test, then yes, we need to mock all dependencies.
Mocking your dependencies won't be hard though. You only need to mock what you're using.
For example, $firebaseArray starts off as a function that receives a paramter, we know that much:
var mockFirebaseArray = function(ref) {
};
Next, before we can finish it, we need to mock the Ref:
var mockRef = {
child: function(path) {
this.orderByChild = function(path) {
this.equalTo = function(val) {
};
return this;
};
return this;
}
};
With these things in place we can decide how the test will "pass". We could just use spies. Or, we could set local variables that we can assert later on our way through.
Spies are my preferred method because you can even verify they were called with specific values:
expect(mockFirebaseArray).toHaveBeenCalled();
expect(mockRef.child).toHaveBeenCalledWith('comments');
Now, if you're wanting to write an integration test that's different. In that case I'd still use spies, but you'd actually be executing those dependencies. Generally speaking there is no need to test your dependencies because they should be tested in isolation as well. Furthermore, there is less need to test other people's API's if they are from trustworthy sources.
I have a service, 'Inputs', defined in module 'Puts', that depends on a second service, 'InputCreator'. I need to stub the InputCreator service in order to test the Inputs service.
As I understand the answer here, I should create a module containing my stub service, then create a new 'Test' module, specifying the module under test and then the stub module as dependencies. And then pull the service from the injector. Like so:
beforeEach(function() {
angular.module.('Puts'); // contains the service 'Inputs'
angular.module('Mocks',[])
.service('InputCreator',function(){
var mockInputs = {
//stubbed behaviour goes here
};
return mockInputs;
});
});
angular.module('Test',['Puts', 'Mocks'];
inject(function($injector){
Inputs = $injector.get('Inputs');
});
});
However, the injector function responds with 'unknown InputsProvider <- Inputs'.
Where have I gone astray?
Thanks!
Having figured this out, I thought I'd answer my own question. The big mistake above was using angular.module rather than angular.mock.module, that is convenience referenced as module by angular-mock. They aren't the same thing at all!
Additionally, it's enough to initialize the mock service with angular.mock.module, so long as you do it before you initialize the module under test. There's no need for this 'wrapping the modules in a third module' business as suggested in the question linked above. To wit:
describe("Test Service", function() {
var TestService, getvaluestub;
beforeEach(function() {
// create mock service
var mock = {getvalue:function(){}}
angular.module('dependencymodule',[])
.service('dependencyservice',function () {
return mock;
});
//mock the function we are stubbing, (that, in this case, returns value 4)
getvaluestub = sinon.stub(mock,'getvalue')returns(4);
//instantiate your mock service
module('dependencymodule');
//instantiate the module of the service under test,
//that depends on 'dependencyservice' mocked above
//(ie - testmodule includes the service 'testservice')
module('testmodule');
//inject your test service for testing
inject(function ($injector) {
TestService = $injector.get('testservice');
})
//tests go here.....
If the dependency module already exists, you could either still do all of the above, or you could acquire the service from the $injector, insert your spies and stubs, and >then< instantiate the service under test. It's important that the spies/stubs are set up >before< the dependent service is instantiated, or it will be instantiated without them. It looks like this:
describe("Test Service", function() {
var TestService, DependencyService, getvaluestub;
beforeEach(function() {
// these modules are specified in the application
module('dependencymodule');
module('testmodule');
inject(function ($injector) {
DependencyService = $injector.get('testservice');
getvaluestub = sinon.stub(DependencyService,'getvalue').returns(4);
OtherService = $injector.get('otherservice');
})
});
// test go here
So, there you go. Hopefully this is useful to someone who searches for 'Injecting mocks into angular services'.
See this plunkr for a live example: http://plnkr.co/edit/djQPW7g4HIuxDIm4K8RC
In the code below, the line var promise = serviceThatReturnsPromise(); is run during module configuration time, but I want to mock out the promise that is returned by the service.
Ideally I'd use the $q service to create the mock promise, but I can't do that because serviceThatReturnsPromise() is executed during module configuration time, before I can get access to $q. What's the best way to resolve this chicken and egg problem?
var app = angular.module('plunker', []);
app.factory('serviceUnderTest', function (serviceThatReturnsPromise) {
// We mock out serviceThatReturnsPromise in the test
var promise = serviceThatReturnsPromise();
return function() {
return 4;
};
});
describe('Mocking a promise', function() {
var deferredForMock, service;
beforeEach(module('plunker'));
beforeEach(module(function($provide) {
$provide.factory('serviceThatReturnsPromise', function() {
return function() {
// deferredForMock will be undefined because this is called
// when `serviceUnderTest` is $invoked (i.e. at module configuration),
// but we don't define deferredForMock until the inject() below because
// we need the $q service to create it. How to solve this chicken and
// egg problem?
return deferredForMock.promise;
}
});
}));
beforeEach(inject(function($q, serviceUnderTest) {
service = serviceUnderTest;
deferredForMock = $q.defer();
}));
it('This test won\'t even run', function() {
// we won't even get here because the serviceUnderTest
// service will fail during module configuration
expect(service()).toBe(4);
});
});
I'm not sure I like the solution much, but here it is:
http://plnkr.co/edit/uBwsJxJRjS1qqsKIx5j7?p=preview
You need to ensure that you don't instantiate "serviceUnderTest" until after you've set-up everything. Therefore, I've split the second beforeEach into two separate pieces: the first instantiates and uses $q, the second instantiates and uses serviceUnderTest.
I've also had to include the $rootScope, because Angular's promises are designed to work within a $apply() method.
Hope that helps.