How to call a basic javascript function from jasmine test spec? - angularjs

I'm trying to write test cases for a javascript method but my jasmine is not able to call the js method. It is giving me error that the function is not defined.
Below is Controller Code
(function () {
"use strict";
angular.module('rbApp').controller('PQRCtrl', PQRCtrl);
PQRCtrl.$inject = ['$scope', '$state', 'baseURL', 'PQRCtrlFactory', '$cookieStore'];
function PQRCtrl($scope, $state, baseURL, PQRCtrlFactory, $cookieStore) {
var funcB= function(){
console.log("This line should called from jasmine ")
}
}
}());
My jasmine spec
describe('PQRCtrl Controller Test Suite', function() {
var mockPQRCtrl,mockrootScope, mockscope, mockstate,mockcookies, mockstateparams, mockgetSourcePostsService, mockPQRCtrlFactory;
var baseURL = "****";
beforeEach(module('rbApp'));
beforeEach(module("ui.router"));
beforeEach(module("ngRoute"));
beforeEach(module("ngCookies"));
beforeEach(module("ui.bootstrap"));
beforeEach(module("toggle-switch"));
beforeEach(module("ngFileUpload"));
beforeEach(module("ngDraggable"));
beforeEach(module("angular-loading-bar"));
beforeEach(module("ngAnimate"));
beforeEach(module("ngGrid"));
beforeEach(module("kendo.directives"));
beforeEach(module('ui.bootstrap'));
beforeEach(inject(function($injector, _$rootScope_, _$controller_, _$httpBackend_, _$stateParams_, _$state_,_$cookieStore_,_PQRCtrlFactory_){
var userData = {'token' : 'abc'};
mockrootScope = _$rootScope_;
mockstateparams = _$stateParams_;
mockscope = mockrootScope.$new();
mockstate = _$state_;
mockcookies = _$cookieStore_;
mockPQRCtrlFactory = _PQRCtrlFactory_;
mockcookies.put('userInfo', userData);
var userInfo = mockcookies.get('userInfo');
var token = userInfo.token;
mockPQRCtrlFactory = _$controller_('PQRCtrl',
{
'$scope': mockscope,
'$state': mockstate,
'baseURL' : baseURL,
'PQRCtrlFactory': mockPQRCtrlFactory ,
'$cookieStore' : mockcookies
});
}));
it("Test: PQRCtrl Controller exists or not", function() {
expect(mockPQRCtrl).toBeDefined();
});
it("Test: funcB() Success", function() {
funcB(); // its not calling my actual function in the controller
// it is saying that its not defined
})
});

Your funcB is defined inside the controller PQRCtrl. Put it outside:
(function () {
"use strict";
var funcB;
angular.module('rbApp').controller('PQRCtrl', PQRCtrl);
PQRCtrl.$inject = ['$scope', '$state', 'baseURL', 'PQRCtrlFactory', '$cookieStore'];
function PQRCtrl($scope, $state, baseURL, PQRCtrlFactory, $cookieStore) {
funcB = function(){
console.log("This line should called from jasmine ")
}
}

Related

unable to access the $scope and $rootscope inside the success of http call

Using Jasmine and chutzpah unable to access the $scope and $rootscope inside the success of http call.
In the jasmine code the var test = $rootScope.langCode is coming as 'undefined'. Which is inside the success callback of $http from factory.
Following are the controller code need to be tested.
app.controller('catalogCtrl', ['$scope', '$rootScope', '$window', 'catalogService', '$routeParams', '$location', '$timeout', '$filter', function ($scope, $rootScope, $window, catalogService, $routeParams, $location, $timeout, $filter) {
$scope.init = function (callback, params) {
catalogService.labeldata().then(function successCallback(response) {
$rootScope.langCode = "test";
}, function errorCallback(response) {
console.log(JSON.parse(JSON.stringify(response)));
$rootScope.langCode = "test1";
});
};
}]);
Following is the Factory where am doing the http call
app.factory('catalogService', ['$http', function ($http) {
return {
labeldata: function () {
return $http({
method: 'GET',
url: "/Content/Index/"
});
}
}
}]);
Jasmine code to test catalogCtrl
describe('catalogCtrl', function () {
var httpBackend, $rootScope, $scope, createController, authRequestHandler, myservice, $controller, $q;
beforeEach(module('catalogModule'));
beforeEach(function () {
module('catalogModule');
inject(function (_$controller_, _$rootScope_, $injector, _$q_) {
// inject removes the underscores and finds the $controller Provider
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
// Injecting Service references and HttpBackend Object :-
httpBackend = $injector.get('$httpBackend');
$q = _$q_;
myserv = $injector.get('catalogService');
});
});
it('Catalog Content', function () {
var $scope = {}; var $rtScope = {};
// $controller takes an object containing a reference to the $scope
var controller = $controller('catalogCtrl', { $scope: $scope, $rtScope: $rootScope });
// the assertion checks the expected result
var obj = { "COUNTRYCODE": "au", "KEY": "MERCHANDISE", "LANGCODE": "en", "VALUE": "Merchandise" };
var arr = [obj];
var returnData = {};
returnData.data = arr;
//returnData = arr;
//httpBackend.expectGET("/Content/Index/").respond(returnData);
httpBackend.when('GET', "/Content/Index/").respond(returnData);
var returnedData;
myserv.labeldata().then(function (returnData) {
// check that returned result contains
returnedData = result;
expect(returnedData).toEqual({ bar: 'foo' });
});
$scope.init();
var test = $rootScope.langCode;
});
});

Method undefined in Angular JS service unit test

I am writing unit tests for my existing AngularJS app. There are just four methods in this service. I was able to getFollowUpList to work, but refresh() is not working and it is a very simple method.
The refresh method should simply set deferredGetFollowUpList = null and return true in my test.
There error I'm getting is: TypeError: Cannot read property 'then' of undefined, so my refresh method is undefined. Why is this the case? Thanks
Service
(function () {
"use strict";
angular
.module("all.patient.details")
.factory("followUpListService", ["$rootScope", "$http", "userContext", "$q", "$uibModal", "htmlBaseUrl", FollowUpListService]);
function FollowUpListService($rootScope, $http, userContext, $q, $uibModal, htmlBaseUrl) {
var deferredGetFollowUpList = null;
return {
getFollowUpList: getFollowUpList,
displayModal: displayModal,
refresh: refresh,
save: save
}
function refresh() {
deferredGetFollowUpList = null;
}
}
})();
Unit Test
describe("followUpListService", function () {
beforeEach(module("all.patient.details"));
var followUpListService = {};
var $httpBackend;
var htmlBaseUrlMock;
var returnedFollowUpListData;
var deferredGetFollowUpList;
var $rootScope;
var $q;
var $uibModal;
beforeEach(function () {
htmlBaseUrlMock = { format: function () { } };
module(function ($provide) {
$provide.value("htmlBaseUrl", htmlBaseUrlMock);
});
inject(function (_$rootScope_, _$httpBackend_, _$q_, _$uibModal_, _followUpListService_) {
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
$q = _$q_;
$uibModal = _$uibModal_;
followUpListService = _followUpListService_;
});
});
afterEach(function () {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it("calls refresh()", function () {
followUpListService.refresh()
.then(function (data) {
deferredGetFollowUpList = data;
});
expect(deferredGetFollowUpList).toBe(null);
});
As deferredGetFollowUpList is service level variable, Can you write your test as -
followUpListService.deferredGetFollowUpList = data; //Any Mock Data
followUpListService.refresh();
expect(followUpListService.deferredGetFollowUpList).toBe(null);

Jasmine test to test if the controller is defined

New to Jasmine tests for angular. I am trying to test if the controller I defined is defined or not to begin with but I am getting error saying Expected undefined to be defined.
Here is my main code:
// controller logic MatchController.js
(function () {
'use strict';
angular.module('app.match')
.controller('MatchController', MatchController);
MatchController.$inject = ['APP_CONFIG', '$authUser', '$http', '$rootScope', '$state', '$stateParams', 'SearchService', 'ConfirmMatchService', 'MusicOpsService', 'ContentOpsService', 'MatchstickService', 'MatchService', 'Restangular'];
function MatchController(APP_CONFIG, $authUser, $http, $rootScope, $state, $stateParams, searchService, confirmMatchService, musicOpsService, contentOpsService, matchstickService, matchService, Restangular) {
var vm = this;
.
.
.
}
})();
Here is the test file
// MatchController.spec.js
(function(){
'use strict';
describe('Match Controller Tests', function(){
var module, MatchTestController;
beforeEach(function() {
module = angular.module('app.match');
});
beforeEach(inject(function ($controller) {
MatchTestController = $controller('MatchController', {});
}));
describe("Match controller to be defined", function() {
it("should be created successfully", function () {
expect(MatchTestController).toBeDefined();
});
});
});
})();
I keep getting the error:
TypeError: 'undefined' is not a function (evaluating 'angular.controller('MatchController')')
undefined
at /Users/rgoti/match-ui/match-ui/public/src/app/match/match.controller.spec.js:16
at invoke (/Users/rgoti/match-ui/match-ui/public/bower_components/angular/angular.js:4219)
at workFn (/Users/rgoti/match-ui/match-ui/public/bower_components/angular-mocks/angular-mocks.js:2475)
Expected undefined to be defined.
at /Users/rgoti/match-ui/match-ui/public/src/app/match/match.controller.spec.js:22
Not sure what I am doing wrong here.
You should inject all the dependencies in the controller first before mocking it.
Try this:
// MatchController.spec.js
(function(){
'use strict';
describe('controller: MatchController', function(){
var module, MatchController, APP_CONFIG, $authUser, $http, $rootScope, $state, $stateParams, SearchService, ConfirmMatchService, MusicOpsService, ContentOpsService, MatchstickService, MatchService, Restangular;
beforeEach(function() {
module = angular.module('app.match');
});
beforeEach(inject(function ($controller, _APP_CONFIG_, _$authUser_, _$http_, _$rootScope_, _$state_, _$stateParams_, _SearchService_, _ConfirmMatchService_, _MusicOpsService_, _ContentOpsService_, _MatchstickService_, _MatchService_, _Restangular_) {
APP_CONFIG = _APP_CONFIG_;
$authUser = _$authUser_;
$http = _$http_;
$rootScope = _$rootScope_;
$state = _$state_;
$stateParams = _$stateParams_;
SearchService = _SearchService_;
ConfirmMatchService = _ConfirmMatchService_;
MusicOpsService = _MusicOpsService_;
ContentOpsService = _ContentOpsService_;
MatchstickService = _MatchstickService_;
MatchService = _MatchService_;
Restangular = _Restangular_;
MatchController = $controller('MatchController', {
APP_CONFIG: _APP_CONFIG_,
$authUser: _$authUser_,
$http: _$http_,
$rootScope: _$rootScope_,
$state: _$state_,
$stateParams: _$stateParams_,
SearchService: _SearchService_,
ConfirmMatchService: _ConfirmMatchService_,
MusicOpsService: _MusicOpsService_,
ContentOpsService: _ContentOpsService_,
MatchstickService: _MatchstickService_,
MatchService: _MatchService_,
Restangular: _Restangular_
});
}));
describe("Match controller to be defined", function() {
it("should be created successfully", function () {
expect(MatchController).toBeDefined();
});
});
});
})();

Provider mock error: Expected a spy, but got Function

I'm very new to jasmine and I got some issue trying to mock a provider.
I have a provider that looks like :
angular.module('myApp')
.factory('MyService', function ($resource) {
return {
actionResource : function(projectId, actionId){
var url = 'blablabla';
if(actionId){
url += "/"+actionId;
}
return $resource(url, {}, {
'create': {
method: 'POST'
}
});
},
};
});
I have a controller using this factory
angular.module('myApp')
.controller('myCtrl', function ($scope, MyService, $state) {
$scope.addAction = function(){
MyService.actionResource($scope.projectId).create($scope.action,
function(){
$state.go('somewhere', {});
});
};
});
and I'd really like to test this controller, at the moment I'm doing something like :
'use strict';
describe('[test] [controller] - myCtrl', function() {
beforeEach(angular.mock.module('myApp'));
//mock creation
beforeEach(
module(function($provide) {
$provide.factory('MyService', function() {
var actionResource = function(projectId, actionId){
var create = function(){return {}};
return {create:create};
}
return {actionResource:actionResource}
}
)})
);
var $httpBackend, $rootScope, myController, mockMyService;
var scope = {};
beforeEach(angular.mock.inject(function($injector, $rootScope, MyService) {
var $controller = $injector.get('$controller');
scope=$rootScope.$new();
mockMyService = MyService;
spyOn(mockPilotageService, 'actionResource').and.callThrough();
spyOn(mockPilotageService.actionResource(), 'create');
createController = function() {
return $controller("myCtrl", {$scope:scope, myService:mockMyService});
};
}));
it('myCtrl - addAction() calls actionRessource.create() method', function() {
createController();
scope.addAction();
expect(mockMyService).toBeDefined();
expect(mockMyService.actionResource).toHaveBeenCalled();
expect(mockMyService.actionResource().create).toHaveBeenCalled();
});
});
and I'm getting this error :
Error: Expected a spy, but got Function.
at /Users/*****/myController.spec.js:86
So it's able to spy on mockMyService.actionResource but not on mockMyService.actionResource().create. I can't understand why
any help would be more than welcome
thanks

Karma unit test -Calling controller's function but not able to inject Service Object

If my unit test is calling function which is in controller and that function is having a service call to fetch the details. Will it call service(StationService)?
My Karma unit test is not able to inject StationService and not able to call service.
My Code.
/// controller
var policyControllers = angular.module('policyControllers', []);
policyControllers.controller('StationListController', ['$translate', '$scope','$rootScope','$state', 'StationService', 'StationListExportService', function ($translate, $scope, $rootScope, $state, StationService, StationListExportService) {
...
$scope.getFilterDetails = function(StationService, filterDetails ){
StationService.get(filterDetails).$promise.then(function (filteredDetails) {
console.log(" Web services Result - ", JSON.stringify(filteredDetails));
},function(error) {
console.log(" Error ");
});
};
///Service
var policyServices = angular.module('policyServices', ['ngResource']);
policyServices.factory('StationService', ['$resource', function($resource) {
return $resource(policyConfig.mock? 'modules/policymanager/services/mock/stations.json': 'http://10.132.240.25:7640/policy/api/v1/stationpolicy/stations',{},{
get:{method: 'POST',isArray: false, url:'modules/policymanager/services/mock/stations.json'}
});
}]);
/// Unit test
describe('station filter', function(){
var scope;
var ctrl;
var translate, scope, rootScope, state;
var StationService, StationListExportService;
beforeEach(module('policyServices'));
beforeEach(module('policyControllers'));
beforeEach(inject(function(_StationService_, _StationListExportService_, $rootScope, $controller, $translate, $state) {
StationService = _StationService_;
StationListExportService = _StationListExportService_;
translate = $translate;
rootScope = $rootScope;
state = $state;
scope = $rootScope.$new();
ctrl = $controller('StationListController', {$scope: scope});
}));
it('Stations Inject test case', inject(['StationService',function(StationService){
var data = {"recency":"","countries":[],"policies":[],"stations":[{"stationName":"Test"}],"status":"ready","regions":[]};
scope.getFilterDetails(StationService, data);
/// Getting StationService is undifiened
}]));
Try using only one application say policyServices and use the same to define the controller as well. In addition to it try defining your service before you use them in your controller.
var policyServices = angular.module('policyServices', ['ngResource']);
policyServices.factory('StationService', ['$resource', function($resource)
{
return $resource(policyConfig.mock? 'modules/policymanager/services/mock/stations.json': 'http://10.132.240.25:7640/policy/api/v1/stationpolicy/stations',{},{
get:{method: 'POST',isArray: false, url:'modules/policymanager/services/mock/stations.json'}
});
}]);
policyServices.controller('StationListController', ['$translate', '$scope','$rootScope','$state', 'StationService', 'StationListExportService', function ($translate, $scope, $rootScope, $state, StationService, StationListExportService) {
...
$scope.getFilterDetails = function(StationService, filterDetails ){
StationService.get(filterDetails).$promise.then(function (filteredDetails) {
console.log(" Web services Result - ", JSON.stringify(filteredDetails));
},function(error) {
console.log(" Error ");
});
};

Resources