I have this simple test:
describe('My Controller', function() {
beforeEach(function() {
module('myApp');
return inject(function($injector) {
var $controller = $injector.get('$controller');
this.rootScope = $injector.get('$rootScope');
this.scope = this.rootScope.$new();
this.controller = $controller('MyCtrl', {
'$scope': this.scope,
});
});
});
it('should have a controller', function() {
expect(this.controller).toBeDefined();
});
});
the controller looks like this:
angular.module('myApp').controller('MyCtrl', ['$scope', '$state', '$filter', '$q', 'BookingService', 'ngToast', '$uibModal',
function($scope, $state, $filter, $q, BookingService, ngToast, $uibModal) {
$scope.bs = BookingService;
$scope.roundTrip = false;
$scope.reservationDetails = {};
$scope.originAddress = false;
$scope.destinationAddress = false;
$scope.reservationDetails.roundTrip = false;
$scope.seatReservationDepart = {};
$scope.charter = false;
}]);
The test keeps failing and the terminal is not really giving any useful information as to why.
Don't use this in your test, it refers to different things in different parts of your suite.
Instead, initialize a scope "container" in the describe namespace:
describe('My Controller', function() {
var scope = {};
beforeEach(function() {
module('myApp');
return inject(function($injector) {
var $controller = $injector.get('$controller');
this.rootScope = $injector.get('$rootScope');
this.scope = this.rootScope.$new();
scope.controller = $controller('MyCtrl', {
'$scope': this.scope,
});
});
});
it('should have a controller', function() {
expect(scope.controller).toBeDefined();
});
});
Related
I'm trying to test a method that deletes an item from a list after user confirmation.
Controller:
app.controller('mainCtrl', ['$scope', '$window', 'dataService', function($scope, $window, dataService) {
var vm = this;
vm.delete = function(id, index) {
if($window.confirm('Are you sure?')) {
dataService.deleteById(id).then(function() {
vm.list.splice(index, 1)
});
}
};
}]);
Sevice:
app.service('dataService', ['$http', function($http) {
this.deleteById = function(id) {
return $http.delete('delete-item?id=' + id);
};
}]);
Test:
describe('Testing RecipesController', function() {
var scope, ctrl, dataServiceMock, q, deferred, window;
beforeEach(function() {
dataServiceMock = {
deleteById: function() {
deferred = q.defer();
return deferred.promise;
}
};
});
beforeEach(function() {
module('app');
inject(function($rootScope, $controller, $q, $window) {
q = $q;
window = $window;
scope = $rootScope.$new();
ctrl = $controller('mainCtrl', {
$scope: scope,
dataService: dataServiceMock
});
});
});
it('should delete recipe if the user clicked "OK"', function() {
spyOn(window, 'confirm').and.returnValue(true);
spyOn(dataServiceMock, 'deleteById').and.callThrough();
var item= {
id: 2,
name: 'Shirt'
};
ctrl.list = ['Hat', 'Shirt'];
ctrl.delete(item, 1);
expect(dataServiceMock.deleteById).toHaveBeenCalled();
expect(ctrl.list.length).toBe(1);
});
});
I successfully mocked the confirm dialog and the delete method, and the test to check if the method been called even passes.
But, The promise.then() isn't working.
After I run the test I got this message "Expected 2 to be 1".
I see one thing for sure, which is that you never resolve or reject your promise in the data service mock. Try changing the mock to this:
beforeEach(function() {
dataServiceMock = {
deleteById: function() {
deferred = q.defer();
deferred.resolve({ /* whatever data you want to resolve with */ });
return deferred.promise;
// You could also shorten this whole mock function to just:
// return $q.resolve({ /* some data */ });
}
};
});
Also, don't forget to execute the $digest() function on the $rootScope at the end of your test... you're actually executing it on your controller's scope, NOT the root scope.
Hold onto the actual $rootScope object - change your beforeEach to:
var $rScope;
beforeEach(function() {
module('app');
inject(function($rootScope, $controller, $q, $window) {
q = $q;
window = $window;
$rScope = $rootScope;
ctrl = $controller('mainCtrl', {
$scope: $rootScope.$new(),
dataService: dataServiceMock
});
});
});
Then in your test, execute $digest on the root scope at the end:
it('should delete recipe if the user clicked "OK"', function() {
// all your test codez...
$rScope.$digest();
});
Here is my controller:
angular.module('someapp', [])
.controller('TestCtrl', function($scope, dataservice, $stateParams) {
$scope.messageid = parseInt($stateParams.messageid);
});
spec file:
describe('TestCtrl', function() {
beforeEach(module('someapp'));
var $controller;
$stateParameters = { messageid: 100 };
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('should set value of messageid', function() {
var controller = $controller('TestCtrl', {
$stateParams: $stateParameters
});
expect($scope.messageid).toEqual($stateParameters.messageid);
});
});
But it's giving error: TypeError: $controller is not a function
can anyone help me to resolve this?
angular.module('someapp', [])
.controller('TestCtrl', ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.messageid = parseInt($stateParams.messageid);
}]);
describe('TestCtrl', function() {
beforeEach(module('someapp'));
var $controller;
$stateParameters = { messageid: 100 };
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('should set value of messageid', function() {
var controller = $controller('TestCtrl', {
$stateParams: $stateParameters;
});
expect($scope.messageid).toEqual($stateParameters.messageid);
});
});
describe('TestCtrl', function() {
var $scope, dataservice;
beforeEach(module('someapp'));
module(function ($provide) {
// Mock dataservice
$provide.service('dataservice', function () {
// Assuming you have a getData function in dataservice
this.getData = jasmine.createSpy('getData');
});
});
//var $controller;
var $stateParameters = { messageid: 100 };
beforeEach(inject(function(_$controller_, _$rootScope_, _dataservice_){
$scope = _$rootScope_.$new();
dataservice = _dataservice_
$controller('TestCtrl', {
$scope : $scope,
dataservice: dataservice,
$stateParams: $stateParameters
});
}));
it('should set value of messageid', function() {
expect($scope.messageid).toEqual($stateParameters.messageid);
});
});
I'm trying to test scope function which will check due amount, but while running the test I'm getting validateAmount is not a function.
app.js
var ManagmentApp = angular.module("ManagemntApp", ['ngRoute', 'angularModalService', 'ng-fusioncharts']);
ManagmentApp.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/CandidateForm.html',
controller: 'cntrlrCandidate'
}).when('/CandidateList',{
templateUrl: 'templates/CandidateList.html',
controller: 'cntrlrCandidateList'
}).when('/CandidatesProfile', {
templateUrl: 'templates/CandidateProfiles.html',
controller: 'cntrlrCandidateProfile'
}).when('/HostelStatistics', {
templateUrl: 'templates/HostelStatistics.html',
controller: 'cntrlHostelStatistics'
}).when('/:id', {
templateUrl: 'templates/CandidateForm.html',
controller: 'cntrlrCandidate'
});
}]);
cntrlrCandidate.js
ManagmentApp.controller("cntrlrCandidate", ["$scope", "$routeParams", "HostelManagementService", "$filter","HostelManagementIndexDBService", function ($scope, $routeParams, HostelManagementService, $filter,HostelManagementIndexDBService) {
$scope.validateAmount = function () {
var vrAmount = $scope.Candidate.Amount;
var vrTotalAmount = $scope.PerMonthCharge;
if (+vrAmount < +vrTotalAmount) {
$scope.IsValidAmount = false;
$scope.Candidate.DueAmount = (+vrTotalAmount - +vrAmount);
} else {
$scope.IsValidAmount = true;
$scope.Candidate.DueAmount = 0;
}
}
}]);
test.js
describe("ManagemntApp ", function() {
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
cntrlrCandidate = function() {
return $controller('cntrlrCandidate', {
'$scope': scope
});
};;
}));
it('test amount', function() {
scope.Candidate={};
scope.Candidate.Amount=2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
I couldn't figure out what making notice.
This is the error I'm getting.
Update1:
When I wrote like this the error message is below.
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
// cntrlrCandidate = function() {
cntrlrCandidate= $controller('cntrlrCandidate', {
'$scope': scope
});
// };;
}));
Please check this error:
Update 2:
I tried this way, please correct me if I did anything wrong.
describe("ManagemntApp ", function() {
var HostelManagementIndexDBService,HostelManagementService;
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(inject(function ($controller,$rootScope){
scope = $rootScope.$new();
// cntrlrCandidate = function() {
HostelManagementService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
cntrlrCandidate= $controller('cntrlrCandidate', {
'$scope': scope
});
// };;
}));
it('return will pass the Amount', function() {
scope.Candidate={};
scope.Candidate.Amount=2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
cntrlrCandidate = function() {
return $controller('cntrlrCandidate', {
'$scope': scope
});
};
You have defined the function cntrlrCandidate but not calling anywhere.
You need to call it first then you will get your controller;
Add this line after the cntrlrCandidate defination;
var ctrlCandidate =cntrlrCandidate ();
OR
better if you define like this instead of defining above function.
cntrlrCandidate = $controller('cntrlrCandidate', {'$scope': scope});
EDIT :
Your controller required following Dependency HostelManagementService and HostelManagementIndexDBService which you not provided.So,you need to mock up it.
Add the following script.
var HostelManagementIndexDBService,HostelManagementService; //declare at top
// add in beforeEach
HostelManagementIndexDBService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
UPDATE :
describe("ManagemntApp ", function() {
var HostelManagementIndexDBService, HostelManagementService;
beforeEach(module('ManagemntApp'));
var scope;
var cntrlrCandidate,
$location;
beforeEach(function() {
HostelManagementService = {};
HostelManagementIndexDBService = {};
module(function($provide) {
$provide.value('HostelManagementService', HostelManagementService);
$provide.value('HostelManagementIndexDBService', HostelManagementIndexDBService);
});
inject(function($controller, $rootScope) {
scope = $rootScope.$new();
cntrlrCandidate = $controller('cntrlrCandidate', { '$scope': scope });
})
});
it('return will pass the Amount', function() {
scope.Candidate = {};
scope.Candidate.Amount = 2000;
scope.validateAmount();
expect(scope.IsValidAmount).toEqual(true);
});
});
I have a promise in a controller that I'm trying to test and I'm getting Error: Unexpected request: POST /v1/users.
I'm trying to spyOn the AuthService.changePassword which returns a promise and test whether it got called or not. Not sure why it's actually making the POST call...
controller
angular.module('example')
.controller('ChangePasswordCtrl', ['AuthService', '$state',
function(AuthService, $state) {
var vm = this;
vm.submitted = false;
vm.submit = function(valid) {
vm.submitted = true;
if (!valid) return false;
AuthService.changePassword(vm.email)
.then(function(res) {
$state.go('reset.confirmation');
}, function(err) {
vm.hasError = true;
});
};
}
]);
unit test
describe('ChangePasswordCtrl', function() {
var ctrl, scope, AuthService, $q, $state, deferred;
beforeEach(module('example'));
function _inject() {
inject(function($controller, $rootScope, _AuthService_, _$state_, _$q_) {
scope = $rootScope.$new();
$state = _$state_;
$q = _$q_;
AuthService = _AuthService_;
ctrl = $controller('ChangePasswordCtrl', {
$scope: scope
});
});
}
describe('#submit', function() {
beforeEach(function() {
_inject();
deferred = $q.defer();
spyOn(AuthService, 'changePassword').and.returnValue(deferred.promise);
spyOn($state, 'go');
});
describe('when email address is valid', function() {
it('should call the changePassword method on the AuthService', function() {
ctrl.submit(true);
scope.$digest();
expect(ctrl.submitted).toBe(true);
expect(AuthService.changePassword).toHaveBeenCalled();
});
});
});
});
Your spec code works for me (the real implementation of AuthService.changePassword doesn't get called): http://jsfiddle.net/7W2XB/7/
angular.module('example', [])
.factory('AuthService', function() {
return {
changePassword: function() {
throw new Error('Should not be called');
}
};
})
.controller('ChangePasswordCtrl', ['AuthService',
function(AuthService) {
var vm = this;
vm.submitted = false;
vm.submit = function(valid) {
vm.submitted = true;
if (!valid) return false;
AuthService.changePassword(vm.email)
.then(function(res) {
$state.go('reset.confirmation');
}, function(err) {
vm.hasError = true;
});
};
}
]);
describe('ChangePasswordCtrl', function() {
var ctrl, scope, AuthService, $q, deferred;
function _inject() {
module('ui.router');
module('example');
inject(function($controller, $rootScope, _AuthService_, _$state_, _$q_) {
scope = $rootScope.$new();
$state = _$state_;
$q = _$q_;
AuthService = _AuthService_;
ctrl = $controller('ChangePasswordCtrl', {
$scope: scope
});
});
}
describe('#submit', function() {
beforeEach(function() {
_inject();
deferred = $q.defer();
spyOn(AuthService, 'changePassword').and.returnValue(deferred.promise);
});
describe('when email address is valid', function() {
it('should call the changePassword method on the AuthService', function() {
ctrl.submit(true);
scope.$digest();
expect(ctrl.submitted).toBe(true);
expect(AuthService.changePassword).toHaveBeenCalled();
});
});
});
});
Some questions that might help make the JSFiddle more realistic to your situation: What versions of angular and Jasmine are you using? - How are you defining the AuthService (presumably using angular.factory)?
My controller:
angularMoonApp.controller('SourceController', ['$scope', '$rootScope', '$routeParams', 'fileService', function ($scope, $rootScope, $routeParams, fileService) {
$scope.init = function() {
$rootScope.currentItem = 'source';
fileService.getContents($routeParams.path).then(function(response) {
$scope.contents = response.data;
$scope.fileContents = null;
if(_.isArray($scope.contents)) {
// We have a listing of files
$scope.breadcrumbPath = response.data[0].path.split('/');
} else {
// We have one file
$scope.breadcrumbPath = response.data.path.split('/');
$scope.breadcrumbPath.push('');
$scope.fileContents = atob(response.data.content);
fileService.getCommits(response.data.path).then(function(response) {
$scope.commits = response.data;
});
}
});
}
$scope.init();
}]);
My unit test:
(function() {
describe('SourceController', function() {
var $scope, $rootScope, $httpBackend, $routeParams, $q, createController, fileService, deferred;
beforeEach(module('angularMoon'));
beforeEach(inject(function($injector) {
$httpBackend = $injector.get('$httpBackend');
$rootScope = $injector.get('$rootScope');
$routeParams = $injector.get('$routeParams');
$scope = $rootScope.$new();
$q = $injector.get('$q');
deferred = $q.defer();
fileService = $injector.get('fileService');
var $controller = $injector.get('$controller');
createController = function() {
return $controller('SourceController', {
'$scope': $scope,
'$routeParams': $routeParams,
'fileService': fileService
});
};
}));
it("should set the current menu item to 'source'", function() {
createController();
$scope.init();
expect($rootScope.currentItem).toBe('source');
});
it("should get test the getContents call of the fileService", function() {
spyOn(fileService, 'getContents').andCallThrough();
createController();
$scope.init();
expect(fileService.getContents).toHaveBeenCalled();
});
it("should return an object with multiple files", function() {
var multipleFiles = [{path: '.DS_Store'}, {path: '.bowerrc'}];
deferred.resolve(multipleFiles);
spyOn(fileService, 'getContents').andReturn(deferred.promise);
createController();
$scope.init();
expect($scope.contents).toBe(multipleFiles);
expect($scope.breadcrumbPath).toBe('');
});
});
})();
The last test fails with:
Expected undefined to be [ { path : '.DS_Store' }, { path : '.bowerrc' } ].
Expected undefined to be ''.
Why is the $scope undefined here?
Your controller is expecting you to inject in $rootScope which you are not doing in your unit test.
You have:
createController = function() {
return $controller('SourceController', {
'$scope': $scope,
'$routeParams': $routeParams,
'fileService': fileService
});
But but should have:
createController = function() {
return $controller('SourceController', {
'$scope': $scope,
'$rootScope': $rootScope,
'$routeParams': $routeParams,
'fileService': fileService
});
Also, you will want to call this code:
createController();
$scope.init();
before you resolve your promise:
deferred.resolve(multipleFiles);
The scope is not undefined. What is undefined is $scope.contents and $scope.breadcrumbPath.
And that's because promise callbacks are always being called asynchronously. You need to call
$scope.$apply()
before verifying your expectations.