AngularJS Unit Test Controller with a promise

Question

I have the following code defined in my controller

(function() {
    'use strict';

    angular
    .module('bolt')
    .controller('PackdownController', PackdownController);

    PackdownController.$inject = ['$location', '$timeout', 'packdownService', 'modelTransformer', 'Packdown'];

    function PackdownController($location, $timeout, packdownService, modelTransformer, Packdown) {
        var vm = this;  

        vm.totalItemCount = 0;
        vm.completedItemCount = 0;
        vm.toDoItems = [];
        vm.completedItems = [];

        activatePackdown();

        function activatePackdown() {
            packdownService.GetAllTasks().then(function(data) {
                if(data !== undefined && data !== null) {
                    if(data.error.state) {
                            showError('Error retrieving tasks', 'Please try again. If the problem persists, contact your supervisor', 'Close', toggleErrorModal);
                    }
                    else {               
                        vm.totalItemCount = tasks.openItems + tasks.closeItems;
                        vm.completedItemCount = tasks.closeItems;
                        angular.forEach(tasks.bayTasks, function(value, key) {
                            if(value.status.description !== 'COMPLETED_THIS_CYCLE') {
                                var task = {
                                        deptNbr: value.department.number,
                                        bayName: value.aisle + '-' + value.bay,
                                        status: {
                                            code: value.status.code,
                                            description: value.status.description
                                        }
                                };
                                this.push(task);
                            }
                        }, vm.toDoItems);
                        angular.forEach(tasks.bayTasks, function(value, key) {
                            if(value.status.description === 'COMPLETED_THIS_CYCLE') {
                                var task = {
                                        deptNbr: value.department.number,
                                        bayName: value.aisle + '-' + value.bay,
                                    completedBy: value.completedSystemUserId,
                                        completedOn:  new Date(value.completedTimeStamp)
                                };
                                this.push(task);
                            }
                        }, vm.completedItems);
                    }
                }

            });


        }

    }
})();

activatePackdown is a private function, so I can't test it directly, but I can test the value(s) of public properties once the controller is created. However, since that function calls a service method (that returns a promise), I don't know how to test inside the .then statement. I have the following for my unit test:

describe('activatePackdown', function(){            
    it('should call GetAllTasks and then set completed/total counts', function(done) {
        var spy = sinon.spy(this.packdownService, 'GetAllTasks');

        var ctlr = $controller('PackdownController');
        expect(spy).toHaveBeenCalled();
    });
});

the .toHaveBeenCalled passes just fine, but everything I've tried to do to test the state of properties in the .then. For instance, the value of vm.totalItemCount. I know I don't actually want the GetAllTasks method to run, so I created the spy using sinon.spy, but I'm at a point now where I don't know what to do next. I've tried several different suggestions I've found on varying blogs, but nothing seemed to work. Any and all help is greatly appreciated

Frederick Mfinanga · Accepted Answer · 2016-04-05 14:07:52Z

1

Using jasmine, I'd mock inject $q and $controller;

var deferred = $q.defer();
spyOn(Object, 'method').and.returnValue(deferred.promise);
controller.method(); //Calling your controller method

Then to test your success in then

 $scope.$apply(function () {
    deferred.resolve(<insert expected object>);
 });

To test your then when there's an error

$scope.$apply(function () {
   deferred.reject();
});

answered Apr 5, 2016 at 14:07

Frederick Mfinanga

1,1552 gold badges11 silver badges29 bronze badges

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

3 Comments

Shaggy13spe Over a year ago

Thanks for trying to help, however, since the controller isn't using $scope, that throws an error. Notice I am using an IIFE and using vm = this, as suggested by John Papa. all methods/properties are attached to vm, not $scope.

Frederick Mfinanga Over a year ago

I follow john papa's style guide too. this is root scope am talking about, sorry i failed to mention. inject rootscope and do something like this: $scope = $rootScope.$new();

Shaggy13spe Over a year ago

Ah yes, must be in a post-lunch coma. anyway, got it working. forgot that i had to inject $rootScope in the tests. Anyway, thanks got it working.

Shaggy13spe · Accepted Answer · 2017-03-03 12:32:39Z

0

just for future reference, here's what my working test now looks like

it('should call GetAllTasks and then set completed/total counts', function() {
     var deferred = this.$q.defer();
     var stub = sinon.stub(this.packdownService, 'GetAllTasks').returns(deferred.promise);
     deferred.resolve(response);
     var ctlr = $controller('PackdownController');

     this.$timeout.flush();           
     expect(ctlr.totalItemCount).toEqual(4);
     this.$timeout.verifyNoPendingTasks();
});

edited Mar 3, 2017 at 12:32

answered Apr 5, 2016 at 17:15

Shaggy13spe

73310 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS Unit Test Controller with a promise

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related