When making use of a service in a controller test do you need to initialize the service in the same way you would the controller? By this I mean do you need to pass it its own dependencies?
For example I can initialize my controller like so:
// Instantiate the controller
searchController = $controller( 'VisibilitySearchController',{
$scope: scope,
dataService: dataService
});
}));
so do I need to initialize the service according to the components it needs like $http, $resource etc as well as make spyOn calls on its functions? Or is this/should this be sufficient? (Note - my tests fail when I do the following )
// Instantiate the dataService
dataService = $injector.get( 'dataService' );
it throws this error:
* Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- dataService
The relevant part of the service:
myAppServices.factory('dataService', ['$http', '$resource', 'authService', 'messageService', function ($http, $resource, authService, messageService) {
}
Side note
Note - we are using Maven as our build tool and only make use of Jasmine at this point - trying to bring Karma in as our test-runner as a Maven plugin.
You must provide all the dependencies but you can mock them. This can be done by jasmine like this for example:
var mockedDataService = jasmine.createSpyObj('dataService', ['getData', 'getOtherData']);
And then you inject this mocked service to $provider:
beforeEach(function () {
module(function ($provide) {
$provide.value('dataService', mockedDataService );
});
}
Instance of this mocked service can be retrieved like this then:
inject(function (dataService) {
var dataServiceInstance = dataService;
});
This will provider mocked dataService anytime it is needed. However if you need fully functional dataService you must instantiate it but always you can mock any of its dependecies.
While you can inject dependencies into the controller manually you don't need to do it as long as you have loaded the module the service belongs to.
In your case it looks like you have not loaded the ngResource module.
If you add beforeEach(module('ngResource')) to your test (and make sure the actual script file it lives in is included in Jasmine's fileset) you should not need to inject it manually.
Note that you do not need to load angular core services like $http, but since $resource is not part of core it needs to be loaded like this.
Injecting dependencies manually is mostly useful if you want to provide a mock implementation.
Related
I have a service depending on $controller service. Inside of this service, $controller service takes a controller name and locals to instantiate this controller.
When I unit test this service, I would like to pass a dummy controller name, so I can test this service properly.
From reading angular.js source code, I know $controller service looks for registered controllers by controller name. Controllers are registered through register method of $controllerProvider. How can I access this method in unit test. I'm using Jasmine here for unit testing.
Any advices are appreciated.
If you are trying to test Angular's $controller service, and assuming you are using ngMocks, you can use $controller normally. In Angular's documentation, there's an example on how to use it.
Anyway, here's the sample from the docs:
describe('myDirectiveController', function() {
it('test case', inject(function($controller) {
// Your code goes here
});
});
beforeEach(function () {
module('myApp', function ($controllerProvider) {
$controllerProvider.register(dummyController, function () { });
});
});
I ended up with this. when my service call $controller(dummyController, controllerlocals), it was able to find this dummyController registered in its local variable controllers.
Hope this would help people have the same scenario
I'm new to angular and unit-testing.
I have an application module MyApp including basic things an services, that are needed in all other modules, like service for logging loggingService
I also have an module for handling everything about map&geo-positon, called MapModule and I have an main module for application logic, called MainModule
The MainModule contains a controller, that I like to test: messageSendCtrl
The controller has some dependencies, like services from MapModule.
And: MainModule and MapModule has dependencies to the MyApp, because the loggingServiceis needed everywhere.
The code looks like that (pseudo-code):
MyApp
var MyApp = angular
.module('MyApp', ['ngRoute','MainModule','MapModule']);
MyApp.service('loggingService', function (one, two) {
[..] /*logging data somewhere for debugging application*/
});
MainModule
var MainModule = angular
.module('MainModule', []);
MainModule.controller('messageSendCtrl',
function($scope,$http, $location, locationService, loggingService) {
[...]
});
MapModule
var MapModule = angular
.module('MapModule', ['uiGmapgoogle-maps']);
MapModule.service('locationService', function (loggingService) {
[...]
What I like to test is the messageSendCtrl from the MainModule. (probably) I was able to inject the location service into the test environment. But injecting the locationService was not successful.
Probably because locationService also uses the loggingService.
Running the test results in
Error: [$injector:unpr] Unknown provider: loggingServiceProvider <- loggingService <- locationService
My test looks like that:
describe('saving a document', function() {
beforeEach(module('MainModule'));
beforeEach(module('MyApp'));
beforeEach(module('MapModule'));
describe ('messageSendCtrl', function () {
var scope,ctrl,locationService,loggingService;
beforeEach(inject(function($rootScope, $controller,_locationService_,_loggingService_) {
scope = $rootScope.$new();
ctrl = $controller('messageSendCtrl',
{$scope: scope,
locationService: _locationService_,
loggingService : _loggingService_ });
}));
it('should actual not saved', function(){
expect(scope.result).to.equal('unsaved');
});
})
});
So who can I solve the dependencies? Or is there an design problem at my application?
there are multiple things going on, let's check it one by one:
at your test, you don't need do load all your modules, load just that module, that you want to test, your ctrl is in your MainModule, so use just
beforeEach(module('MainModule'));
every module should declare its dependencies, so your MainModule declaration should look like this: var MainModule = angular.module('MainModule', ['MyApp']); because one of your controller in your MainModule dependent on a service that is in an other module (MyApp)
it is easier to test if one module do just one thing, so if you have a logging service, make a logging service module for that, and include that module where you want to use logging.
So don't make modules that is responsible for several different things, because if an other module need logging, that module will get every other service that your "godmodule" contains, and that makes difficult to test, and find bugs.
I am unclear of exactly how decorator works in conjunction with the angular $injector, so any explanation is helpful.
Considering my myTempService:
$provide.decorator('myTempService', function($delegate) {
$delegate.controller = // some service to get the current controller
return $delegate;
});
When myTempService is injected into my controller, I need myTempService.controller to be the controller's name:
.controller('MainCtrl', function (myTempService) {
console.log(myTempService.controller); // MainCtrl
});
When you are using .value(), .service(), .factory() and .provider() to register a service, what you pass in as the second parameter will actually be ended up as a part of a Service Provider Constructor.
When an angular's bootstrap process begin, each of those registered service provider constructors will be used to create a Service Provider Instance.
During a Configuration Phase, the service provider instances are available to be injected, and you can use them to change default configuration of to be created service instances.
angular.module('myApp').config(function ($httpProvider) {
// $httpProvider is a provider instance of the $http service
$httpProvider.interceptors.push(function () {});
});
Before entering a Run Phase, each of service provider instance will be used to create a Service Instance.
Then the Decorators will come into play at this point. Before those service instances will be used for injecting to various places, each service instance will be passed into its registered decorators as $delegate parameter if any. The result of the decorator function will be used instead of the
original service instance.
angular.module('myApp').config(function ($provide) {
$provide.decorator('$http', function ($delegate) {
// monkey patching
var originalGet = $delegate.get;
$delegate.get = function () {
console.log('$http.get is called');
return originalGet.apply(this, arguments);
};
return $delegate;
});
});
Therefore, in a decorator function, you have choices to:
Just do something and return the original service instance e.g. print out something for debugging purpose.
Set initial values of the service, that for some reasons cannot be done in a config phase.
Monkey patch the original service instance and return it.
Create and return a wrapper/proxy service over the original service instance.
In unit testing, you could return a mock/spy object instead.
Finally, the service instances will be available for injecting into all of the places e.g. run blocks, controllers, directives, filters etc. for the entire life of the application.
Is it possible to do DI in a provider method?
In this example
angular.module('greet',[])
.provider('greeter',function() {
this.$get=function() {
};
})
.service('greeterService',function($http){
console.log($http);
})
;
Injecting $http into service appears to be the correct implementation, but it doesn't work in a provider method and it throws an error:
Unknown provider: $http
Does the provider method work with DI to inject services?
You can certainly inject $http to provider. Just make sure it appears in $get, not the function constructor. As follows:
angular.module('greet',[]).provider('greeter',function() {
this.$get = function($http) {
};
});
You can inject constants and other providers into a provider. Not services or factories - with one exception. It seems that you can inject the $injector service into a provider - at least, you can in AngularJS 1.3.16.
.provider('foo', ['$injector', function ($injector) {
var messagePrefix = $injector.get('msgPrefix');
this.message = '';
this.$get = function() {
var that = this;
return function() {
return messagePrefix + that.message;
}
};
}])
You can use the injector outside the $get method, but you still can't get services from it at configure time.
See here for a demo.
Following up on IgrCndd's answer, here's a pattern that might avoid potential nastiness:
angular.module('greet',[]).provider('greeter', function() {
var $http;
function logIt() {
console.log($http);
}
this.$get = ['$http', function(_$http_) {
$http = _$http_;
return {
logIt: logIt
};
}];
});
Note how similar this is to the equivalent service, making conversion between the two less troublesome:
angular.module('greet',[]).factory('greeter', ['$http', function($http) {
function logIt() {
console.log($http);
}
return {
logIt: logIt
};
});
You actually have to inject the dependency on $get and then store it to use on what you retrieve from $get. Not beautiful at all...
No, you can not inject a service into the provider itself.
Injecting a service into a provider's $get method is the same as injecting a service into a factory, but you can not inject it into the provider function directly.
The difference between $get and the provider itself is that the provider runs during the module loading phase whereas the $get is run when instantiating the service you are providing.
This implies that you can not use any service at all during the module loading/configuration phase of your modules. That is all the stuff you run inside your config blocks, such as when defining your app routes or states, can not make use of any service.
The only other thing you can inject into config blocks besides providers are constants.
You could do something like IgrCndd suggested. But if you needed to consume the provider in a config block, which is the provider's purpose after all, you will not have your values injected until much after. So it's not going to work unless you do some nasty hack using promises.
Further reading on injectables
I have been writing some Jasmine unit tests in Angular. In the first example I'm testing a controller.
myApp.controller('MyCtrl', function($scope, Config){
...
});
I have a configuration service (Config) that keeps configuration from the database and is injected into my controller. As this is a unit test, I want to mock out that configuration service altogether, rather than allowing execution to pass through it and using $httpBackend. Examples I found taught me about a $controller function I can use like this, in order to get an instance of my controller with my mocks injected in place of the usual collaborator:
beforeEach(inject(function($controller, $rootScope){
var scope = $rootScope.$new();
var configMock = {
theOnlyPropertyMyControllerNeeds: 'value'
};
ctrl = $controller('MyCtrl', {
$scope:scope,
Config: configMock
});
}));
But I also have other services that use the Config service. To help unit test them, I assumed there would be a similar $service function I could use to instantiate a service with whatever mocks I want to provide. There isn't. I tried $injector.get, but it doesn't seem to let me pass in my mocks. After searching for a while, the best I could come up with in order to instantiate a service in isolation (avoid instantiating its collaborators) is this:
beforeEach(function() {
mockConfig = {
thePropertyMyServiceUses: 'value'
};
module(function($provide) {
$provide.value('Config', mockConfig);
});
inject(function($injector) {
myService = $injector.get('MyService');
});
});
Is this the right way? It seems to be overriding the entire application's definition of the Config service, which seems maybe like overkill.
Is it the only way? Why is there no $service helper method?
For unit testing, it is common that you override a service for the sake of testing. However, you can use $provide to override an existing service instead of using inject, as long as you load the application before hand.
Assuming that you created Config using something like:
angular.moduel('...', [...]).factory('Config', function (...) {...});
If so, try this:
...
beforeEach(module("<Name of you App>"));
beforeEach(
module(function ($provide) {
$provide.factory('Config', function (...) {...});
});
);
...
After that, when you initialise your controller, it will get the mocked Config.