AngularJs controller test: unexpected request : GET

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

score 0 · Answer 1 · answered Mar 29 '15 at 14:34

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.

Hi There, Thanks for your reply. I made changes to test as per your answer, but i am getting TypeError: 'undefined' is not an object (evaluating 'scope.vm.campaignId = campaignId'). — user1061117, Mar 29 '15 at 17:41
Can you put your code in a jsfiddle, so that we can 'fiddle' with it? — Dogs, Mar 29 '15 at 19:13

AngularJs controller test: unexpected request : GET

1 Answers1