AngularJs controller test: unexpected request : GET - angularjs

Question

I am trying to write my first test for controller by mocking the service layer using karma-jasmine and httpBackend. But I am getting this error.
Error: Unexpected request: GET./webresources/campaign/getCampaignDetails/undefined
Expected GET ./webresources/campaign/getCampaignDetails/CMP1000004568
Thanks in advance for any help :)
Service:
(function() {
'use strict';
angular.module('tbApp').factory('Campaign', CampaignFactory);
CampaignFactory.inject = ['$http'];
function CampaignFactory($http) {
//base url for all rest service calls
var baseUrl = WS_PATH + '/webresources/campaign';
var Campaign = {
getCampaignDetails: getCampaignDetails,
};
return Campaign;
function getCampaignDetails(campaignId) {
return $http.get(baseUrl + '/getCampaignDetails/' + campaignId).then(getCampaignDetailsComplete);
function getCampaignDetailsComplete(response) {
return response.data;
}
}
}
})();
Controller:
(function () {
'use strict';
angular.module('tbApp').controller('campaignEditCtrl', campaignEditCtrl);
campaignEditCtrl.inject = ['$routeParams', 'Campaign', 'User', '$location', 'Asset', '$window', '$scope', '$compile', 'ImageLibrary', 'Lists'];
function campaignEditCtrl($routeParams, Campaign, User, $location, Asset, $window, $scope, $compile, ImageLibrary, Lists) {
var vm = this;
vm.campaignData = [];
vm.getCampaignDetails = getCampaignDetails;
initialise();
/**
* Initialises the campaign properties page
*/
function initialise() {
// Registes a click listener to hide action menu
$window.addEventListener('click', function (event) {
if (event.which !== 3) {
$scope.$apply(function () {
vm.selectedActionItem = '';
});
}
});
fromPage=true;
fromPage1=true;
vm.user = User.info;
vm.campaignId = $routeParams.campId;
//set default value to prevent filter error
vm.campaignData.imageName = '///////';
getCampaignDetails();
getAllImageData();
}
/**
* Load the campaign details
*/
function getCampaignDetails() {
vm.loadingCampaignDetails = true;
Campaign.getCampaignDetails(vm.campaignId).then(getCampaignDetailsComplete);
function getCampaignDetailsComplete(data) {
vm.campaignData = data;
}
}
}})();
controllerSpec:
describe('campaignEditCtrl as vm', function() {
var scope, httpBackend, controller, vm, createController, campaignId;
var baseUrl = './webresources/campaign';
beforeEach(module("tbApp"));
beforeEach(inject(function($rootScope, $httpBackend, $controller) {
httpBackend = $httpBackend;
scope = $rootScope.$new();
controller = $controller;
campaignId= "CMP1000004568";
//service = Campaign;
createController = function() {
return $controller('campaignEditCtrl', {
'$scope': scope
});
};
httpBackend.when("GET", baseUrl+"/getCampaignDetails/"+campaignId).respond([{}, {}, {}]);
}));
/*afterEach(function() {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});*/
it('should run the Test to get the campaign data from the backend', function() {
console.log("here"+campaignId);
vm=createController();
httpBackend.expectGET(baseUrl+"/getCampaignDetails/"+campaignId);
scope.$apply(function() {
scope.runTest();
});
//expect(vm.campaignData.imageName).toEqual('///////');
httpBackend.flush();
expect(vm.campaignData.length).toBe(3);
});
});
Output:
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 7)]: Connected on socket jAWt7tfOMUkrmCjM0d_n with id 71764124
INFO [Chrome 41.0.2272 (Windows 7)]: Connected on socket Fu0mS3U91St4gSQ10d_o with id 78282639
WARN [web-server]: 404: /webresources/user/checkSession
PhantomJS 1.9.8 (Windows 7) LOG: 'WARNING: Tried to load angular more than once.'
LOG: 'hereCMP1000004568'
PhantomJS 1.9.8 (Windows 7) campaignEditCtrl as vm should run the Test to get the campaign data from the backend FAILED
Error: Unexpected request: GET ./webresources/campaign/getCampaignDetails/undefined
Expected GET ./webresources/campaign/getCampaignDetails/CMP1000004568
at $httpBackend (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/angular-mocks.js:1181)
at sendReq (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:8404)
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:8123
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11659
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11659
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11745
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12788
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12600
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12892
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/test/js/campaignEditSpec.js:42
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/node_modules/karma-jasmine/lib/boot.js:117
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/node_modules/karma-jasmine/lib/adapter.js:171
at http://localhost:9876/karma.js:185
at http://localhost:9876/context.html:157
PhantomJS 1.9.8 (Windows 7): Executed 2 of 2 (1 FAILED) (0.008 secs / 0.024 secs)
LOG: 'WARNING: Tried to load angular more than once.'
Chrome 41.0.2272 (Windows 7) LOG: 'hereCMP1000004568'
Chrome 41.0.2272 (Windows 7) campaignEditCtrl as vm should run the Test to get the campaign data from the backend FAILED
Error: Unexpected request: GET ./webresources/campaign/getCampaignDetails/undefined
Expected GET ./webresources/campaign/getCampaignDetails/CMP1000004568
at $httpBackend (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/angular-mocks.js:1180:9)
at sendReq (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:8403:9)
at serverRequest (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:8123:16)
at wrappedCallback (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11659:8
at wrappedCallback (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11659:8
at D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:11745:26
at Scope.$eval (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12788:28)
at Scope.$digest (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12600:31)
at Scope.$apply (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/main/webapp/js/libraries/uncompressed/angular.js:12892:24)
at Object.<anonymous> (D:/Tb_test/Campaign_Builder_Maven/campaign-builder-webapp/src/test/js/campaignEditSpec.js:40:9)
PhantomJS 1.9.8 (Windows 7): Executed 2 of 2 (1 FAILED) (0.008 secs / 0.024 secs)
Chrome 41.0.2272 (Windows 7): Executed 2 of 2 (1 FAILED) (0.051 secs / 0.047 secs)
TOTAL: 2 FAILED, 2 SUCCESS

Answer 1

We can see in the karma output that the test is failing because the URL is wrong. Instead of a campaign id, you're getting undefined.
Chrome 41.0.2272 (Windows 7) campaignEditCtrl as vm should run the Test to get the campaign data from the backend FAILED
Error: Unexpected request: GET ./webresources/campaign/getCampaignDetails/undefined
Expected GET ./webresources/campaign/getCampaignDetails/CMP1000004568
It looks like you're trying to test your getCampaignDetails() function, which passes in vm.campaignId as an argument to your service call. However, in your test you don't set vm.campaignId to anything before calling your function.
In your test setup, I would try changing your code to this:
scope = $rootScope.$new();
controller = $controller;
campaignId= "CMP1000004568";
//service = Campaign;
createController = function() {
var controller = $controller('campaignEditCtrl', {
'$scope': scope
});
scope.vm.campaignId = campaignId;
return controller;
};
...and see if that fixes it.
What's going on here is that your getCampaignDetails() function's behavior is dependent on the state of your controller. Your controller has an initialize() function that brings your controller to a state where the getCampaignDetails() can succeed. In your test, however, you don't perform similar initialization.