I have a resource factory
angular.module('mean.clusters').factory('Clusters', ['$resource',
function($resource) {
return $resource('clusters/:clusterId/:action', {
clusterId: '#_id'
}, {
update: {method: 'PUT'},
status: {method: 'GET', params: {action:'status'}}
});
}]);
and a controller
angular.module('mean.clusters').controller('ClustersController', ['$scope',
'$location', 'Clusters',
function ($scope, $location, Clusters) {
$scope.create = function () {
var cluster = new Clusters();
cluster.$save(function (response) {
$location.path('clusters/' + response._id);
});
};
$scope.update = function () {
var cluster = $scope.cluster;
cluster.$update(function () {
$location.path('clusters/' + cluster._id);
});
};
$scope.find = function () {
Clusters.query(function (clusters) {
$scope.clusters = clusters;
});
};
}]);
I am writing my unit tests and every example I find is using some form of $httpBackend.expect to mock the response from the server, and I can do that just fine.
My problems is, when unit testing my controller functions I would like to mock the Clusters object. If I'm using $httpBackend.expect, and I introduce a bug in my factory every unit test in my controller will fail.
I would like to have my test of $scope.create test only $scope.create and not also my factory code.
I've tried adding a provider in the beforeEach(module('mean', function ($provide) { part of my tests but I cant seem to get it right.
I also tried
clusterSpy = function (properties){
for(var k in properties)
this[k]=properties[k];
};
clusterSpy.$save = jasmine.createSpy().and.callFake(function (cb) {
cb({_id: '1'});
});
and setting Clusters = clusterSpy; in the before(inject but in the create function, the spy gets lost with
Error: Expected a spy, but got Function.
I have been able to get a spy object to work for the cluster.$update type calls but then it fails at var cluster = new Clusters(); with a 'not a function' error.
I can create a function that works for var cluster = new Clusters(); but then fails for the cluster.$update type calls.
I'm probably mixing terms here but, is there a proper way to mock Clusters with spies on the functions or is there a good reason to just go with $httpBackend.expect?
Looks like I was close a few times but I think I have it figured out now.
The solution was the 'I also tried' part above but I was not returning the spy object from the function.
This works, it can be placed in either the beforeEach(module( or beforeEach(inject sections
Step 1: create the spy object with any functions you want to test and assign it to a variable that's accessible to your tests.
Step 2: make a function that returns the spy object.
Step 3: copy the properties of the spy object to the new function.
clusterSpy = jasmine.createSpyObj('Clusters', ['$save', 'update', 'status']);
clusterSpyFunc = function () {
return clusterSpy
};
for(var k in clusterSpy){
clusterSpyFunc[k]=clusterSpy[k];
}
Step 4: add it to the $controller in the beforeEach(inject section.
ClustersController = $controller('ClustersController', {
$scope: scope,
Clusters: clusterSpyFunc
});
inside your tests you can still add functionality to the methods using
clusterSpy.$save.and.callFake(function (cb) {
cb({_id: '1'});
});
then to check the spy values
expect(clusterSpy.$save).toHaveBeenCalled();
This solves both problems of new Clusters() and Clusters.query not being a function. And now I can unit test my controller with out a dependency on the resource factory.
Another way to mock the Clusters service is this:
describe('Cluster Controller', function() {
var location, scope, controller, MockClusters, passPromise, q;
var cluster = {_id : '1'};
beforeEach(function(){
// since we are outside of angular.js framework,
// we inject the angujar.js services that we need later on
inject(function($rootScope, $controller, $q) {
scope = $rootScope.$new();
controller = $controller;
q = $q;
});
// let's mock the location service
location = {path: jasmine.createSpy('path')};
// let's mock the Clusters service
var MockClusters = function(){};
// since MockClusters is a function object (not literal object)
// we'll need to use the "prototype" property
// for adding methods to the object
MockClusters.prototype.$save = function(success, error) {
var deferred = q.defer();
var promise = deferred.promise;
// since the Clusters controller expect the result to be
// sent back as a callback, we register the success and
// error callbacks with the promise
promise.then(success, error);
// conditionally resolve the promise so we can test
// both paths
if(passPromise){
deferred.resolve(cluster);
} else {
deferred.reject();
}
}
// import the module containing the Clusters controller
module('mean.clusters')
// create an instance of the controller we unit test
// using the services we mocked (except scope)
controller('ClustersController', {
$scope: scope,
$location: location,
Clusters: MockClusters
});
it('save completes successfully', function() {
passPromise = true;
scope.save();
// since MockClusters.$save contains a promise (e.g. an async call)
// we tell angular to process this async call before we can validate
// the response
scope.$apply();
// we can call "toHaveBeenCalledWith" since we mocked "location.path" as a spy
expect(location.path).toHaveBeenCalledWith('clusters/' + cluster._id););
});
it('save doesn''t complete successfully', function() {
passPromise = false;
scope.save();
// since MockClusters.$save contains a promise (e.g. an async call)
// we tell angular to process this async call before we can validate
// the response
scope.$apply();
expect(location.path).toHaveBeenCalledWith('/error'););
});
});
});
Related
THE SITUATION:
I am unit testing my Angular / Ionic app.
I am having troubles with the modal.
At the moment i can test that the modal has been called. That's all so far. I cannot test the proper show() and hide() method of the modal.
I am getting the following errors:
TypeError: $scope.modal_login.show is not a function
Error: show() method does not exist
TypeError: $scope.modal_login.hide is not a function
Error: hide() method does not exist
I think it depends entirely on the spy. I don't know how to properly spy on the modal, and i think that once that is done, everything will work fine.
THE CODE:
The controller:
$scope.open_login_modal = function()
{
var temp = $ionicModal.fromTemplateUrl('templates/login.html',{scope: $scope});
temp.then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
$scope.for_test_only = true;
});
};
$scope.close_login_modal = function()
{
$scope.modal_login.hide();
};
Note: the code of open_login_modal function has been refactored to facilitate the test. The original code was:
$scope.open_login_modal = function()
{
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal_login = modal;
$scope.modal_login.show();
});
};
The test:
describe('App tests', function()
{
beforeEach(module('my_app.controllers'));
function fakeTemplate()
{
return {
then: function(modal){
$scope.modal_login = modal;
}
}
}
beforeEach(inject(function(_$controller_, _$rootScope_)
{
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
};
var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
}));
describe('Modal tests', function()
{
beforeEach(function()
{
$scope.open_login_modal();
spyOn($scope.modal_login, 'show'); // NOT WORKING
spyOn($scope.modal_login, 'hide'); // NOT WORKING
});
it('should open login modal', function()
{
expect($ionicModal.fromTemplateUrl).toHaveBeenCalled(); // OK
expect($ionicModal.fromTemplateUrl.calls.count()).toBe(1); // OK
expect($scope.modal_login.show()).toHaveBeenCalled(); // NOT PASS
expect($scope.for_test_only).toEqual(true); // NOT PASS
});
it('should close login modal', function()
{
$scope.close_login_modal();
expect($scope.modal_login.hide()).toHaveBeenCalled(); // NOT PASS
});
});
});
As you can see from the code $scope.for_test_only it should be equal to true but is not recognized. I get this error message instead:
Expected undefined to equal true.
The same happens to the show() and hide() method. They are not seen by the test.
And i think because they are not declared in the spy.
THE QUESTION:
How can i properly spy on a modal?
Thank you very much!
The question here could be extrapolated to how to properly spy on a promise. You are very much on the right track here.
However, if you want to test that whatever your callback to the success of the promise is called, you have to execute two steps:
Mock the service (in your case $ionicModal) and return some fake function
In that fake function, execute the callback that is passed to you by the production code.
Here is an illustration:
//create a mock of the service (step 1)
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create an example response which just calls your callback (step2)
var successCallback = {
then: function(callback){
callback.apply(arguments);
}
};
$ionicModal.fromTemplateUrl.and.returnValue(successCallback);
Of course, you can always use $q if you don't want to be maintaining the promise on your own:
//in your beforeeach
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create a mock of the modal you gonna pass and resolve at your fake resolve
var modalMock = jasmine.createSpyObj('modal', ['show', 'hide']);
$ionicModal.fromTemplateUrl.and.callFake(function(){
return $q.when(modalMock);
});
//in your test
//call scope $digest to trigger the angular digest/apply lifecycle
$scope.$digest();
//expect stuff to happen
expect(modalMock.show).toHaveBeenCalled();
I have a controller that initializes an object upon initialization of the controller, and would like to test that it was called with the specific params that it is actually called with.
I know that I can test that $scope.autoSaveObj has certain properties that would tell me that it in fact initialized, but how would I spy on the initialization event itself?
Essentially, I want to spy on new autoSaveObj just like I would a method.
The main reason I want to test and spy on the object contructor is so that my karma-coverage plugin will show those lines as covered. It won't show the lines as covered if I just test the state of $scope.autoSaveObject after the initialization.
App.controller('ItemCtrl',[ '$scope', function($scope){
$scope.autoSaveObject = new autoSaveObj({
obj: $scope.item,
saveCallback: function() {
return $scope.saveItem();
},
errorCallback: null,
saveValidation: $scope.validItem,
delay: 2000
});
}]);
My guess is the code example is of a partial controller, because properties in the $scope are used which are not initialized here.
Since autoSaveObj is not defined anywhere, I assumed it is a global function. Consider moving this to a service or factory instead.
The following example shows how to
mock autoSaveObj
verify the call parameters, and
verify that the created instance is actually an instance of the correct type.
angular.module('myApp', []).
controller('ItemCtrl', function($scope, $window) {
// Use the injected $window object, so we don't rely on
// the environment and it can be mocked easily.
$scope.autoSaveObject = new $window.autoSaveObj({
obj: $scope.item,
saveCallback: function() {
return $scope.saveItem();
},
errorCallback: null,
saveValidation: $scope.validItem,
delay: 2000
});
});
describe('ItemCtrl', function() {
var $controller;
var $scope;
var $window;
var controller;
beforeEach(module('myApp', function($provide) {
$window = {
// Create an actual function that can be spied on.
// Using jasmine.createSpy won't allow to use it as a constructor.
autoSaveObj: function autoSaveObj() {}
};
// Provide the mock $window.
$provide.value('$window', $window);
}));
beforeEach(inject(function(_$controller_, $rootScope) {
$controller = _$controller_;
$scope = $rootScope.$new();
}));
it('should instantiate an autoSaveObj', function() {
spyOn($window, 'autoSaveObj');
// Initialize the controller in a function, so it is possible
// to do preparations.
initController();
// Do function call expectations as you would normally.
expect($window.autoSaveObj).toHaveBeenCalledWith(jasmine.objectContaining({
saveCallback: jasmine.any(Function),
delay: 2000
}));
// The autoSaveObject is an instance of autoSaveObj,
// because spyOn was used, not jasmine.createSpy.
expect($scope.autoSaveObject instanceof $window.autoSaveObj).toBe(true);
});
function initController() {
controller = $controller('ItemCtrl', {
$scope: $scope
});
}
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-mocks.js"></script>
I have some issues injecting my factory into testing spec. I am using requireJS to inject controllers and factories etc.
define(['controller', 'loginFactory', 'angular', 'angularMocks'],
function(ctrl, loginFactory, angular){
var scope,
OnBoardingCtrl;
describe('Controller: OnBoarding', function () {
beforeEach(angular.mock.inject(function ($rootScope, $controller, $location) {
angular.module('app');
scope = $rootScope.$new();
OnBoardingCtrl = $controller(ctrl, {
'$scope': scope,
'loginFactory': loginFactory,
});
}));
it('Should check endpoint', inject(function ($http, $httpBackend) {
var successCallback = jasmine.createSpy();
var url = 'login?un=test&pw=test';
var response = {"token":1}
$httpBackend.expectGET(url)
.respond(200, response);
$http.get(url).success(successCallback);
expect(successCallback).not.toHaveBeenCalled();
$httpBackend.flush();
expect(successCallback.token).toBe(1);
}));
});
}
);
How ever I keep getting TypeError: 'undefined' is not an object (evaluating 'successCallback.token) For reference my LoginFactory looks like this:
var LoginFactory = function ($q, $http) {
return {
getData: function (url) {
var deferred = $q.defer();
$http.get('http://local/'+url)
.then(function () {
deferred.resolve(true);
}, function () {
deferred.resolve(false);
});
return deferred.promise;
}
};
};
LoginFactory.$inject = ['$q', '$http'];
factories.factory('LoginFactory', LoginFactory);
return LoginFactory;
Thanks in advance!
As you mentioned already, successCallback.token is the point where your code is breaking because jasmine.createSpy() returns a function but it has no clue about your token from your mock response served by $httpBackend. From the official docs,
When there is not a function to spy on, jasmine.createSpy can create a “bare” spy.
This spy acts as any other spy – tracking calls, arguments, etc.
But there is no implementation behind it. Spies are JavaScript objects
and can be used as such.
So removing this line expect(successCallback.token).toBe(1); will resolve the error but if you actually want to verify the mock response from $httpBackend, you need to do that in success callback on $http (or) in the promise object's then method like below
$http.get(url).success(function(response){
expect(response.token).toBe(1);
});
Note that here I just modified your code to show the example, ideally you don't code the HTTP call separately in your test case, you invoke the actual function making the HTTP call and verify the expectations.
For more details on $httpBackend, have a look at this link.
I'm not new to unit testing (C#) but I am very new to unit testing in AngularJS.
I'm trying to test my controller and so far have been able to get several tests to work properly, however there are some that are proving to be rather difficult.
I have $scope method that makes a call to our Authentication service which returns a promise. In the "then" function I am checking to see if the user was indeed authenticated and based on that I will call a private function that will go out and make other Service calls.
Currently the test is failing with the following error:
Expected spy getConfigurationStatuses to have been called.
Error: Expected spy getConfigurationStatuses to have been called.
If anyone can please help point me in the right direction I would really appreciate it. I'll post the code below -Thanks for any help!
Here's my specs (the one that is not working is the "should call specific configurations if user is authenticated" spec:
describe('EnvironmentCtrl specs', function(){
var $rootScope = null, $scope = null, ctrl = null;
var Authentication = {
getCredentials: function(){ return true; }
};
var Environment = { getConfigurationStatuses: function(){ return true; } };
beforeEach(module('ngRoute'));
beforeEach(module('environment'));
beforeEach(module(function($provide){
$provide.value('SITE_ROOT', '/');
}));
beforeEach(inject(function(_$rootScope_, _$controller_, _$timeout_, _$location_, _$q_, _Authentication_, _Environment_){
$rootScope = _$rootScope_;
$controller = _$controller_;
$timeout = _$timeout_;
$location = _$location_;
$q = _$q_;
Authentication = _Authentication_;
Environment = _Environment_;
spyOn(Authentication, 'getCredentials').andCallThrough();
spyOn(Environment, 'getConfigurationStatuses').andCallThrough();
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
ctrl = $controller('EnvironmentCtrl', {$rootScope: $rootScope,$scope: $scope, $timeout: $timeout,
Eventor: {}, Controller: {}, Environment: Environment,Authentication: Authentication, ErrorService:{} });
}));
describe('When initializing the EnvironmentCtrl', function(){
// this one works fine!
it('should set default values on the scope object', function(){
expect($scope.controllerName).toEqual('EnvironmentCtrl');
expect($scope.environmentStatusType).toEqual('configurations');
expect($scope.configurationsSelected).toBe(true);
expect($scope.isDataLoaded).toBe(false);
});
// this works fine!
it('should make a call to authenticate the user', function(){
$scope.determineViewToDisplay();
expect(Authentication.getCredentials).toHaveBeenCalled();
});
// this one doesn't work!
it('should call specific configurations if user is authenticated', function(){
$scope.determineViewToDisplay();
$rootScope.isUserAuthenticated = true;
expect(Environment.getConfigurationStatuses).toHaveBeenCalled();
});
});
});
Here's the three functions that are involved in the unit tests:
$scope.determineViewToDisplay = function () {
Authentication.getCredentials().then(function(){
if ($rootScope.isUserAuthenticated === true) {
$scope.isAnonymous = false;
handleAuthenticatedUserView();
} else {
Eventor.publish('event:login', false);
$scope.isAnonymous = true;
handleAnonymousUserView();
}
}, function(err){
ErrorService.handleError(err, null, $scope.controllerName);
});
};
function handleAuthenticatedUserView() {
$scope.configurationStatusTimer = $timeout(function(){
displayConfigurationStatuses(true);
}, 5);
}
function displayConfigurationStatuses(isAuthenticated) {
Environment.getConfigurationStatuses(isAuthenticated).then(function(statuses){
setConfigurationsIconStatus(statuses);
$scope.configurationStatuses = statuses;
$scope.isDataLoaded = true;
amplify.store($rootScope.productCustomerName + '-configurationStatuses', statuses, {expires: 120000});
$rootScope.showLoadingIndicator = false;
}, function(err){
ErrorService.handleError(err, null, $scope.controllerName);
});
}
It looks like determineViewToDisplay() only calls handleAuthenticatedUserView if
$rootScope.isUserAuthenticated === true
but you're not setting $rootScope.isUserAuthenticated to true until after you call
$scope.determineViewToDisplay()
so handleAuthenticatedUserView() never gets called, and in turn displayConfigurationStatuses() never gets called.
I know this is an older question but...
Could it be the fact that the getCredentials method is actually an async operation? That is why you will see the 'should make a call to authenticate the user' pass, because the call to that function is synchronous. getCredentials returns a promise and keeps going. This causes your assertions to run before the resolve/reject handlers run (which is where your function under test is eventually called).
You can use the 'done' (or older 'runs/waitsFor') syntax in Jasmine with async operations to ensure your assertions aren't run until all promises have been resolved.
Also I just noticed that displayConfigurationStatuses is called within a timeout (more async). You may have to mock the $timeout service to execute immediately or maybe make handleAnonymousUserView return a promise that is resolved once the timeout executes.
I recently dug a little deeper into unit testing. I was wondering if there is a way to use spies in production code as well. I've a tracking service. It would be nice to access other services and maybe even controllers, without haveing to alter their code.
Is there a way to spy on methods being called from services and controllers in the application code and what would be the best way to do so?
EDIT
Atm. I'm using this pattern for spying on services:
var vSetFNTrigger = function (sEvent, fnTrigger) {
fnTrigger.obj[fnTrigger.sMethod] = (function () {
var fnCached = fnTrigger.obj[fnTrigger.sMethod];
return function () {
$rootScope.$broadcast(sEvent, {});
return fnCached.apply(this, arguments);
};
})();
};
fnTrigger: {
obj: formData, // the service
sMethod: 'qPost' // the method to spy on
},
EDIT 2
I forgot to add a return to the inner function.
There should be nothing stopping you from doing this, although I think it is the wrong tool for the job.
If you are in Angular, you should consider using a decorator pattern. You can even use the provider decorator to intercept pretty much anything in Angular.
For instance, you might have a spy function that looks like this:
function createSpy(serviceName, source, spyNames, rootScope) {
var spy = angular.extend(angular.isFunction(source) ? function () {
console.log("Called " + serviceName + '()', arguments);
// broadcast with rootScope
return source.apply(source, arguments);
} : {}, source);
spyNames.forEach(function(name) {
var original = spy[name];
spy[name] = function() {
console.log("Called " + serviceName + '.' + name, arguments);
// broadcast with rootScope
return original.apply(spy, arguments);
};
});
return spy;
}
Then, you can create a generic function to generate a decorator:
function decorateWithSpy($provide, service, spyNames) {
$provide.decorator(service, function($delegate, $rootScope) {
return createSpy(service, $delegate, spyNames, $rootScope);
});
}
You can configure your spies like this:
app.config(function($provide) {
decorateWithSpy($provide, '$http', ['get']);
decorateWithSpy($provide, '$compile', []);
});
Doing this causes all of my $http and $compile functions to get printed to the console.