Testing a Function in angular

Question

I am trying to write a test to verify that a function is called when the page is loaded. I am trying to spyon it but its saying that it does not exist.

Could someone please give me some help on how to properly spy on it?

Here is the angular code:

(function () {
angular
    .module('uotc')
    .controller('reportGroupArchiveCtrl', ReportGroupArchiveCtrl);

ReportGroupArchiveCtrl.$inject = ['$scope', '$http', '$stateParams', '$q'];

function ReportGroupArchiveCtrl($scope, $http, $stateParams, $q) {
    $scope.reportType = $stateParams.reportType;
    $scope.templateTypeId = $stateParams.templateTypeId;
    $scope.group = $stateParams.group;

    //Initialize the page
    activate();

    function activate() {
        //Call the API to get the generated reports for this group
        $http.get('api/url/params....)
            .then(getGeneratedReportsComplete)
            .catch(apiCallFailed);
    }

    function getGeneratedReportsComplete(data, status, headers, config) {
        //do stuff
    };
    function apiCallFailed(e) {
        return null;
    }
}
})();

Here is the test:

describe('Controller', function () {
var stateparams, controller, scope;

beforeEach(angular.mock.module('uotc'));

beforeEach(angular.mock.inject(function (_$controller_, _$rootScope_) {
    stateparams = { reportType: 'Vendor', templateTypeId: 2, group: 'VENDOR_1' };
    scope = _$rootScope_.$new();
    controller = _$controller_('reportGroupArchiveCtrl',{
        $scope: scope,
        $stateParams:stateparams
    });
    spyOn(controller, 'getGeneratedReportsComplete')

}));

describe('is loaded', ()=> {
    beforeEach(inject(function($injector) {
        $httpBackend = $injector.get('$httpBackend');

        $httpBackend
            .when('GET', 'api/url/params)
            .respond(200, '123')
        $httpBackend.flush();

    }));
    it('calls the generated reports API', ()=> {
        expect(controller.getGeneratedReportsComplete()).toHaveBeenCalled();
    })
})

});

@deltree Function declarations in JavaScript are hoisted to the top, so that should be fine. The actual problem is that it's a local. — Thomas
– Thomas, Commented Jul 5, 2016 at 15:35

Thomas · Accepted Answer · 2016-07-05 15:33:05Z

2

This is wrong:

    expect(controller.getGeneratedReportsComplete()).toHaveBeenCalled();

This is better:

    expect(controller.getGeneratedReportsComplete).toHaveBeenCalled();

You pass the function itself to expect; you shouldn't call it.

The other problem is that getGeneratedReportsComplete is declared as a local variable inside the constructor, so it's not accessible outside that, and you cannot spy on it. Instead, define it on the this object:

this.getGeneratedReportsComplete = (data, status, headers, config) => {
    //do stuff
};

Of course you need to call it as this.getGeneratedReportsComplete as well.

answered Jul 5, 2016 at 15:33

Thomas

183k56 gold badges381 silver badges509 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

craigtb Over a year ago

Hey - Thanks for the response. I did this and not im not even getting into my getGeneratedReportsComplete function. Any ideas? $http.get('....').then(this.getGeneratedReportsComplete) .catch(apiCallFailed); ... this.getGeneratedReportsComplete = function (data, status, headers, config) { //stuff }

Thomas Over a year ago

You need to assign it before you use it: this.getGeneratedResponseComplete = ...; and only then do $http.get(...).

craigtb Over a year ago

so when i put the this.getGeneratedResponseComplete function inside the activate() method it calls the method. But the spy still does not see the method. "Error: getGeneratedReportsComplete() method does not exist"

Collectives™ on Stack Overflow

Testing a Function in angular

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related