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
Related
I have developed an web application using Angular JS. I am getting few additional CR which needs to implemented in using TTD approach. We have return unit test cases using Jasmine and Karma. The challenge currently we face is when we try to write unit test case for multiple controllers. I have a main page return on Home Controller & its has an broadcast event in another controller. When i write a unit test case Object for the controller which has this broadcast event is not initialized.
Is there any way to inject the second controller as a dependent object. Answers with Reference Sample link or demo code is much appreciated.
You state you are using Jasmine and Karma so I assume you are unit testing. If you are "unit" testing you should test each controller individually while mocking, spy, all injected services.
beforeEach(inject(function ($rootScope, $controller) {
rootScope = $rootScope;
scope = $rootScope.$new();
controller = $controller('MyCtrl as ctrl', {
'$scope': scope
});
}));
it('', function(){
//Arrange
controller.counter = 0; // Your controller is listening on scope.$on to update this counter.
//Act
rootScope.$broadcast('xyz', {});
//Assert
expect(controller.counter == 1).toBe(true);
rootScope.$broadcast('xyz', {});
expect(controller.counter == 2).toBe(true);
rootScope.$broadcast('xyz', {});
expect(controller.counter == 3).toBe(true);
});
Just be careful with broadcast. Only a domain events (model updated/deleted/created), or something global (signin,signout) should travel over $broadcast. Otherwise, it should be replaced with a service + directive. An example is angular material https://material.angularjs.org/latest/api/service/$mdDialog that is 1 directive with a backing service that can be open/closed from anywhere.
You can inject any controller with the $controller service, e.g.
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MyCtrl', {
'$scope': scope
});
}));
see docs here:
https://docs.angularjs.org/api/ngMock/service/$controller
so what you do is inject that controller first, then your other controller. then the first controller will have been instantiated at the time the second gets instantiated.
I am new to angular, it seems to be possible to inject multiple controllers at once. However best practice is to generate a mock controller that behaves as you expect the second controller to behave. This reduces the number of things you are testing at once.
The following link may be helpful for creating a mock controller, http://www.powdertothepeople.tv/2014/08/28/Mocking-Controller-Instantiation-In-AngularJS-Unit-Test/ .
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.
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.
I have bee struggling with this all day. Here is my test
injector = angular.injector(['ngMock','ng', 'cockpit']);
var equal = QUnit.assert.equal;
test('loginService', function () {
var app, service, scope, httpBackend;
app = angular.module('cockpit');
app.config(function ($provide) {
$provide.decorator('httpBackend',
angular.mock.e2e.$httpBackendDecorator);
});
httpBackend = injector.get('$httpBackend');
httpBackend.when("PUT", "/login").respond({ userId: 23 });
service = injector.get('loginService');
service.$http = httpBackend;
service.getUserId('easy', 'path');
httpBackend.flush();
equal(service.userId, 23, 'populates userId property');
});
Inside the getUserId method the $http service has not put method, so when I make the $http.put call, it fails. I must be setting the test up incorrectly.
I did not get that $httpBackend in Angular mocks is a wrapper for the $httpBackend in angular itself. You just have to instantiate it and set it up to intercept the $http calls the way you want. That said, I still can't get $httpBackend.flush() to work. Testing in angular isn't quite as easy as advertised.
$http and $httpBackend are two different services. $http uses $httpBackend. $http is the service which has the put() method.
So, the following line doesn't make sense:
service.$http = httpBackend;
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.