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;
Related
Let's suppose I have a simple service:
angular.module('myModule')
.factory('myService', ['$http', function($http) {
return $http.get('/something');
}]);
Now whenever I inject the service into a controller, the router waits for the promise to resolve before changing the route, which is exactly what I want.
However, there doesn't seem to then be a way to return other data from the service. What if the service needs to also provide some methods? How can I do this while still maintaining the dependency behavior described above?
You can use the Angular implementation to promise pattern $q to create a promise which will be resolved when the $http.get gets resolved, and resolve the main one with the data coming from your HTTP resource and other data and functions:
angular.module('myModule')
.factory('myService', ['$http', '$q',
function($http, $q) {
var deferred = $q.defer();
$http.get('/something').then(function(data) {
deferred.resolve({
data: data,
doStuff: function() {}
});
});
return deferred.promise;
}
]);
BTW, I'm not sure if the result of some HTTP request is exactly a service at all. It seems like the whole GET should be encapsulated by a function of your myService service, and call it in some controller, service, directive or wherever you need to call it, and provide a continuation with .then there instead.
Or, if you're using UI Router, you might be able to call a service function which returns a promise form a route resolver and it will do the job while implementing your services in the right way.
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 assigning various values to local storage in our Jasmine unit tests like so:
beforeEach(inject(function ($controller, $injector, $rootScope) {
$localStorage = $injector.get('$localStorage');
$localStorage.webAPIUrl = 'myUrl';
}
it('Can make API call', function() {
var apiCall = $localStorage.webAPIUrl + params;
httpBackend.expectGET(apiCall).respond({});
});
Unfortunately, anything I set in $localStorage is undefined when I try to retrieve it in the application, so tests like this fail because the angular service in the application utilizes $localStorage.webAPIUrl. These tests were fine previously (when we just stored values like this in window.AppConfig), but now we're running into this problem after switching to ngStorage.
Is there a piece of the puzzle I'm missing, or is there a problem with ngStorage and unit testing?
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 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.