This is one of the functions in my controller
function sendMeetingInvitation(companyId, meetingId) {
meetingService.sendInvitations(companyId, meetingId)
.success(function() {
$state.go('company.meeting.view', {}, {
reload: true
});
})
.error(function() {
//more code for error handling
});
}
Below is the test case I'm using to test when we call the sendMeetingInvitation(), whether it should invoke the to the success() block of the service call of meetingService.sendInvitations
describe('EditMeetingCtrl.sendMeetingInvitation()', function() {
var $rootScope, scope, $controller, $q, companyService, meetingService;
var mockedHttpPromise = {
success: function() {}
};
beforeEach(angular.mock.module('MyApp'));
beforeEach(angular.mock.inject(function(_$httpBackend_, _companyService_, _meetingService_) {
$httpBackend = _$httpBackend_;
companyService = _companyService_;
meetingService = _meetingService_;
}));
beforeEach(inject(function($rootScope, $controller, _meetingService_) {
scope = $rootScope.$new();
createController = function() {
return $controller('EditMeetingCtrl', {
$scope: scope,
meeting: {},
meetingService: _meetingService_
});
};
var controller = new createController();
}));
it("should should send invitations", function() {
spyOn(meetingService, 'sendInvitations').and.returnValue(mockedHttpPromise);
scope.sendMeetingInvitations(123456, 123456);
expect(meetingService.sendInvitations).toHaveBeenCalledWith(123456, 123456);
});
});
I get this error which is not really helpful .
PhantomJS 1.9.8 (Windows 8) In EditMeetingCtrl EditMeetingCtrl.sendMeetingInvitation() should should send invitations FAILED
TypeError: 'undefined' is not an object (near '...})...')
What am I doing here wrong? I tried my mockedHttpPromise to following . but same result
var mockedHttpPromise = {
success: function() {},
error: function() {}
};
The function sendInvitations expects to return a promise, so, what you need to do is to create a defer and return it, like this:
-First of all you need to inject $q: $q = $injector.get('$q');
-Create a defer: deferred = $q.defer();
Your function mockedHttpPromise, should look like:
function mockedHttpPromise() {
deferred = $q.defer();
return deferred.promise;
}
And inside your test:
it("should should send invitations", function() {
spyOn(meetingService, 'sendInvitations').and.returnValue(mockedHttpPromise);
scope.sendMeetingInvitations(123456, 123456);
deferred.resolve({});
scope.$apply();
expect(meetingService.sendInvitations).toHaveBeenCalledWith(123456, 123456);
});
And to test error block, change deferred.resolve to deferred.reject
Related
I am trying to do unit test of my angular app with karma. I am getting some error. Am i missing something? A
This my controller
(function () {
"use strict"
angular
.module("myApp")
.controller("userCtrl",['$scope', '$state', 'userService', 'appSettings','md5','currentUser','$rootScope',
function ($scope, $state, userService, appSettings,md5,currentUser, $rootScope) {
$scope.login = function() {
$scope.loading = true;
if($scope.password != null){
var user ={
username:$scope.username,
password:md5.createHash($scope.password)
}
var getData = userService.login(user);
getData.then(function (response) {
console.log(response);
$scope.loading = false;
currentUser.setProfile(user.username, response.data.sessionId);
$state.go('videos');
}, function (response) {
console.log(response.data);
});
}else{
$scope.msg = "Password field is empty!"
}
}
}])
}());
This is my test codes
'use strict';
describe('userCtrl', function() {
beforeEach(module('myApp'));
var scope, userCtrl, apiService,q, deferred, currentUser;
describe('$scope.login', function(){
beforeEach(function(){
apiService = {
login: function () {
deferred = q.defer();
return deferred.promise;
};
};
});
beforeEach(inject(function($controller, $rootScope, $q, _currentUser_){
var user ={name:'ali',password:'password'};
scope = $rootScope.$new();
q = $q;
// The injector unwraps the underscores (_) from around the parameter names when matching
userCtrl = $controller('userCtrl', {
$scope:scope,
userService:apiService
});
//userService = _userService_;
currentUser = _currentUser_;
}));
it('should call user service login', function() {
spyOn(apiService, 'login').and.callThrough();
scope.login();
deferred.resolve(user);
expect(apiService.login).toHaveBeenCalled();
});
it('checks the password field', function() {
scope.login();
expect(scope.msg).toEqual('Password field is empty!');
});
});
});
And i am getting this error
enter image description here
If you have to test controller then use to spyon for service method and in case of service then use HttpBackend
describe('Testing a Controller that uses a Promise', function() {
var $scope;
var $q;
var deferred;
beforeEach(module('search'));
beforeEach(inject(function($controller, _$rootScope_, _$q_, searchService) {
$q = _$q_;
$scope = _$rootScope_.$new();
// We use the $q service to create a mock instance of defer
deferred = _$q_.defer();
// Use a Jasmine Spy to return the deferred promise
spyOn(searchService, 'search').and.returnValue(deferred.promise);
// Init the controller, passing our spy service instance
$controller('SearchController', {
$scope: $scope,
searchService: searchService
});
}));
it('should resolve promise', function() {
// Setup the data we wish to return for the .then function in the controller
deferred.resolve([{
id: 1
}, {
id: 2
}]);
// We have to call apply for this to work
$scope.$apply();
// Since we called apply, not we can perform our assertions
expect($scope.results).not.toBe(undefined);
expect($scope.error).toBe(undefined);
});
});
This for same using spyon for service method then use $appy method to make it work.
This is the function in the controller:
var vm = this;
vm.getData = getData;
function getData(val) {
return $http.get('/get-data', {
params: {
query: val
}
}).then(function(response) {
return response.data;
});
}
and this is my (stripped down) test file:
describe('Controller: MyCtrl', function() {
'use strict';
var MyCtrl;
var rootScope;
var scope;
var httpMock;
beforeEach(function() {
module('MyModule');
inject(function($controller, $rootScope, $httpBackend) {
rootScope = $rootScope;
scope = $rootScope.$new();
httpMock = $httpBackend;
MyCtrl = $controller('MyCtrl as vm', {
$rootScope: rootScope,
$scope: scope,
$http: httpMock,
});
});
});
describe('vm.getData()', function() {
it('returns the required data', function() {
httpMock.when('GET', '/get-data?query=test-val').respond(200, {data: 'test-data'});
httpMock.flush();
expect(scope.vm.getData('test-val')).toEqual('test-data');
});
});
});
I would like to test that the result if calling getData() return the correct data.
Currently I'm getting the error $http.get is not a function. Setting a breakpoint in my function shows that http is stubbed with $httpBackend though.
I think there is something fundamental I'm not grasping - any pointers would be greatly appreciated.
You shouldn't have to create the controller with:
$http: $httpBackend
to mock the backend. $httpBackend will mock the request itself already.
Further the test and assertion is done in the wrong order:
httpMock.when('GET', '/get-data?query=test-val').respond(200, {data: 'test-data'});
MyCtrl.getData('test-val').then(function(_result_){ //perform the request
result = _result_; //save the result of the promise
});
httpMock.flush(); //execute the request
expect(result).toBe('test-data'); //assert that the result is as expected
describe('Controller:insightSettingsController', function() {
'use strict';
var insightSettingsCtrl;
var settingsService;
var UtilsService;
var scope;
var updateMethodDeferred;
var httpBackend;
var deferred;
var q;
var spy;
beforeEach(module('ui.router',proname.components.insightSettings.module.name));
beforeEach(function() {
var mockUtilsService = {};
module(function(_$provide_) {
_$provide_.value('UtilsService', mockUtilsService);
});
inject(function($q) {
deferred = $q.defer();
mockUtilsService.getConfigurations = function() {};
spyOn(mockUtilsService, 'getConfigurations')
.and.returnValue(deferred.promise);
});
});
beforeEach(inject(function(
_$controller_, _$httpBackend_, _$rootScope_, _settingsService_,
_UtilsService_, _$q_) {
scope = _$rootScope_.$new();
spy = jasmine.createSpy();
settingsService = _settingsService_;
UtilsService = _UtilsService_;
httpBackend = _$httpBackend_;
insightSettingsCtrl = function() {
return _$controller_(
dbmcm.components.settings.insightSettingsController,
{$scope: scope, UtilsService: UtilsService});
};
}));
describe(
'Check Existing Function , parameters, Initialization of function',
function() {
it('should call UtilsService.getConfigurations() once',
function() {
insightSettingsCtrl();
deferred.resolve();
scope.$digest();
expect(UtilsService.getConfigurations).toHaveBeenCalled();
});
});
});
Hi, I am writing angular test cases for my separate module.Unfortunately, my module above breaks down my test cases ,getting error debug.js:44 Uncaught Type Error: Cannot read property 'get Configurations' of undefined. I am firing getConfigurations function at the time of initialization of controller please have a look below
constructor: function(UtilsService) {
UtilsService.getConfigurations().then(function(response) {
this.utilsConfig_ = response;
}.bind(this));
}
I think Jasmine's spy only checks if the function has been called, without firing the actual implementation. That's why getConfigurations().then throws an error.
for this I applied .and.callThrough() in my test cases
it('should call UtilsService.getConfigurations() once',
function() {
spyOn(UtilsService, 'getConfigurations').and.callThrough();
insightSettingsCtrl();
deferred.resolve();
scope.$digest();
expect(UtilsService.getConfigurations).toHaveBeenCalled();
});
});
After that I am getting debug.js:44 Uncaught Error: getConfigurations has already been spied upon
Please correct me where I am doing wrong.
Thanks in advance
Either you mock it or inject it if possible.
You are doing both for UtilsService.
I am assuming you injecting UtilsService.
So,remove the following code :
module(function(_$provide_) {
_$provide_.value('UtilsService', mockUtilsService);
});
inject(function($q) {
deferred = $q.defer();
mockUtilsService.getConfigurations = function() {};
spyOn(mockUtilsService, 'getConfigurations')
.and.returnValue(deferred.promise);
})
So Im trying to figure out how to write unit tests for my angular controller. I am using karma as my runner. I was able to write 1 successful test but every time I try to write another test it yells at me about unexpected calls and such.
Here is my controller im trying to test.
(function (angular) {
'use strict';
var ngModule = angular.module('myApp.dashboardCtrl', []);
ngModule.controller('dashboardCtrl', function ($scope, $http) {
//"Global Variables"
var vm = this;
vm.success = false;
vm.repos = [];
//"Global Functions"
vm.addRepository = addRepository;
vm.listRepos = listRepos;
//Anything that needs to be instantiated on page load goes in the init
function init() {
listRepos();
}
init();
// Add a repository
function addRepository(repoUrl) {
$http.post("/api/repo/" + encodeURIComponent(repoUrl)).then(function (){
vm.success = true;
vm.addedRepo = vm.repoUrl;
vm.repoUrl = '';
listRepos();
});
}
//Lists all repos
function listRepos() {
$http.get('/api/repo').then( function (response){
vm.repos = response.data;
});
}
});
}(window.angular));
So I have a test written for listRepos(). It goes as follows
describe('dashboardCtrl', function() {
var scope, httpBackend, createController;
// Set up the module
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $httpBackend, $controller) {
httpBackend = $httpBackend;
scope = $rootScope.$new();
createController = function() {
return $controller('dashboardCtrl', {
'$scope': scope
});
};
}));
afterEach(function() {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
it('should call listRepos and return all repos from the database', function() {
var controller = createController();
var expectedResponse = [{id: 12345, url: "https://github.com/myuser/myrepo.git"}];
httpBackend.expect('GET', '/api/repo')
.respond(expectedResponse);
httpBackend.flush();
scope.$apply(function() {
scope.listRepos;
});
expect(controller.repos).toEqual(expectedResponse);
});
This works and the test passes. Now my problem is I want to write another test to test the other function that calls a new api endpoint.
This is the test im trying to write for addRepository.
it('should addRepository to the database', function() {
var controller = createController();
var givenURL = "https://github.com/myuser/myURLtoMyRepo.git";
httpBackend.expect('POST', '/api/repo/' + encodeURIComponent(givenURL)).respond('success');
httpBackend.flush();
scope.$apply(function() {
scope.addRepository(givenURL);
});
expect(controller.success).toBe(true);
expect(controller.listRepos).toHaveBeenCalled();
});
The error I get when I add this test to the spec is:
Error: Unexpected request: GET /api/repo
Expected POST /api/repo/https%3A%2F%2Fgithub.com%2Fmyuser%2FmyURLtoMyRepo.git
at $httpBackend
Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.8/$rootScope/inprog?p0=%24digest
The example I am working with is this one here
Any suggestions or tips is greatly appreciated!
UPDATE:
So changed my function to return the promise from the $http.post,
I rewrote my 2nd test and also wrapped my first test in a describe block describing the function its trying to test.
With the following:
describe('addRepository', function () {
it('should addRepository to the database', function () {
var controller = createController();
var givenURL = "https://github.com/myuser/myURLtoMyRepo.git";
httpBackend.expect('POST', '/api/repo/' + encodeURIComponent(givenURL)).respond('success');
scope.$apply(function () {
scope.addRepository(givenURL);
});
httpBackend.flush();
expect(controller.success).toBe(true);
});
it('should call listRepos', function() {
var controller = createController();
httpBackend.expect('GET', '/api/repo').respond('success');
controller.controller().then(function (result) {
expect(controller.listRepos).toHaveBeenCalled();
});
httpBackend.flush();
});
});
I still get the error:
Error: Unexpected request: GET /api/repo
Expected POST /api/repo/https%3A%2F%2Fgithub.com%2Fmyuser%2FmyURLtoMyRepo.git
at $httpBackend
Error: [$rootScope:inprog] $digest already in progress
but also
TypeError: 'undefined' is not a function (evaluating 'controller.controller()')
Error: Unflushed requests: 1
which shows 2 tests failed.
The flush should come after the call to the function. I'd also change the function to return the promise from the $http.post:
// Add a repository
function addRepository(repoUrl) {
return $http.post("/api/repo/" + encodeURIComponent(repoUrl)).then(function (){
vm.success = true;
vm.addedRepo = vm.repoUrl;
vm.repoUrl = '';
listRepos();
});
}
And then in the test you can call it and test the success part:
EDIT
I changed the controller.controller() to what you have.
it('should call listRepos', function() {
// Your setup
ctrl.addRepository().then(function(result) {
expect(ctrl.listRepos).toHaveBeenCalled();
});
});
EDIT 2
I emulated as best i could your code and the tests I write for the code:
(function () {
'use strict';
angular
.module('myApp')
.controller('DashboardController',DashboardController);
DashboardController.$inject = ['$http'];
function DashboardController($http) {
var vm = this;
vm.success = false;
vm.repos = [];
vm.addRepository = addRepository;
vm.listRepos = listRepos;
init();
// Anything that needs to be instantiated on page load goes in the init
function init() {
vm.listRepos();
}
// Add a repository
function addRepository(repoUrl) {
return $http.post('http://jsonplaceholder.typicode.com/posts/1.json').then(function (){
vm.success = true;
vm.addedRepo = vm.repoUrl;
vm.repoUrl = '';
vm.listRepos();
});
}
// Lists all repos
function listRepos() {
return $http.get('http://jsonplaceholder.typicode.com/posts/1').then( function (response){
vm.repos = response.data;
});
}
};
}());
Here I'm using an online JSONPlaceholder API to simulate HTTP calls as I, obviously, can't hit what you're pointing at. And for the test (which all pass):
(function() {
'use strict';
fdescribe('DashBoardController', function() {
var $rootScope, scope, ctrl, $httpBackend;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$httpBackend_,$controller) {
$rootScope = _$rootScope_;
scope = $rootScope.$new();
$httpBackend =_$httpBackend_;
ctrl = $controller('DashBoardController',{
$scope: scope
});
}));
beforeEach(function() {
// Setup spies
spyOn(ctrl,'listRepos');
});
describe('controller', function() {
it('should be defined', function() {
expect(ctrl).toBeDefined();
});
it('should initialize variables', function() {
expect(ctrl.success).toBe(false);
expect(ctrl.repos.length).toBe(0);
});
});
describe('init', function() {
it('should call listRepos', function() {
$httpBackend.expectGET('http://jsonplaceholder.typicode.com/posts/1')
.respond({success: '202'});
$httpBackend.expectPOST('http://jsonplaceholder.typicode.com/posts/1.json')
.respond({success: '202'});
ctrl.addRepository().then(function(result) {
expect(ctrl.success).toBe(true);
expect(ctrl.repoUrl).toBe('');
expect(ctrl.listRepos).toHaveBeenCalled();
});
$httpBackend.flush();
});
});
});
}());
The following test passes whether my expect statement is
expect(propertyFactory.readProperty).should.have.been.called;
or
expect(propertyFactory.readProperty).should.have.not.been.called;
I've tried this with or without the sinon stub.
describe('pf.propertyModule', function () {
var controller;
var propertyFactory;
beforeEach(module('pf.core'));
beforeEach(module('pf.propertyModule'));
beforeEach(inject(function(_propertyFactory_) {
propertyFactory = _propertyFactory_;
/*
sinon.stub(propertyFactory, 'readProperty', function() {
return {
data: {
property: 'xyz'
}
}
});*/
}));
describe('readPropertyCtrl', function () {
it('should have a passing first test', function () {
expect(propertyFactory.readProperty).should.have.been.called;
});
});
});
UPDATE: Ok, so I got past the initial "non-error" by ensuring "sinon-chai" was installed, but now I'm getting the output: thrown: [Function] } is not a spy or a call to a spy!
UPDATE: Ok, so I got the previous error working by calling sinon.spy(). However, now I'm wondering how one would go about mocking a method that is expected to return a promise. I'm getting the error " TypeError: 'undefined' is not an object (evaluating 'propertyFactory.readProperty({id: $stateParams.id}).then')
"
Updated code:
describe('pf.propertyModule', function () {
var ctrl;
var scope;
var propertyFactory;
beforeEach(module('pf.core'));
beforeEach(module('pf.propertyModule'));
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
propertyFactory = {
readProperty: sinon.spy()
};
ctrl = $controller('readPropertyCtrl as vm', {
$scope: scope,
propertyFactory: propertyFactory
});
}));
describe('readPropertyCtrl', function () {
it('should have a passing first test', function () {
expect(scope.vm).to.be.defined;
expect(propertyFactory.readProperty).should.have.been.called;
});
});
});
Code to test:
propertyFactory.readProperty({id: $stateParams.id}).then(getPropertySuccess);
function getPropertySuccess(response) {
vm.loadedProperty = response.data.property;
}
Updated Code:
describe('pf.propertyModule', function () {
var ctrl;
var scope;
var propertyFactory;
beforeEach(module('pf.core'));
beforeEach(module('pf.propertyModule'));
beforeEach(inject(function($rootScope, $controller, $q, _propertyFactory_) {
scope = $rootScope.$new();
propertyFactory = _propertyFactory_;
var deferred = $q.defer();
var promise = deferred.promise;
sinon.stub(propertyFactory, "readProperty").returns(promise);
deferred.resolve({property: 'xyz'});
ctrl = $controller('readPropertyCtrl as vm', {
$scope: scope,
propertyFactory: propertyFactory
});
}));
describe('readPropertyCtrl', function () {
it('should have a passing first test', function () {
expect(scope.vm).to.be.defined;
expect(propertyFactory.readProperty).should.have.been.called;
});
});
});
This attempt is returning thrown: [Function] } is not a spy or a call to a spy!