Testing AngularJS Services using $q within Jasmine

Question

Angulars build in $q promise implementation makes it hard for me to create tests in my Jasmine testing environment. I build a simple service which only purpose is to open an IndexedDB database:

var myApp = angular.module('myApp', []);

myApp.service('idb', function ($q) {
    var dbName = 'TestDb';

    this.open = function () {
        var deferred = $q.defer();

        var request = indexedDB.open(dbName, 1);

        request.onsuccess = function () {
            deferred.resolve();
        };
        request.onerror = function () {
            deferred.reject();
        }; 

        return deferred.promise;
    };
});

Here is my test in Jasmine:

describe('indexed db test', function () {
    var idbOpened = false;
    var idb, $rootScope;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_idb_, _$rootScope_) {
        idb = _idb_;
        $rootScope = _$rootScope_;
    }));

    beforeEach(function (done) {
        idb.open().then(

        function () {
            idbOpened = true;
        },

        function () {
            idbOpened = false;
        })['finally'](done);

        $rootScope.$digest();
    });

    it('checks if indexeddb is opened', function () {
        expect(idbOpened).toBeTruthy();
    });
});

You can find a jsfiddle here

The test fails with a timeout because the asynchronous callback for finally is not invoked.

I understand I have to call $rootScope.$digest() after the promise is resolved because Angular puts the promise.resolve callbacks on the evalAsync queue.

What I don't understand is how I can do this in my Testing environment. Obviously how I'm calling it is not the way to go.

Community · Accepted Answer · 2017-05-23 12:07:31Z

0

As I mentioned here https://stackoverflow.com/a/29155447/2599875, and basically what works for me was the method $rootScope.$apply() at the end of the callback of each async call.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Mar 19, 2015 at 21:48

mariowise

2,3272 gold badges22 silver badges35 bronze badges

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

Comments

Damilola · Accepted Answer · 2015-03-27 16:17:17Z

I refactored your code like so, and it worked

//--- CODE --------------------------

(function (angular) {
    var myApp = angular.module('myApp', []);

    myApp.service('idb', function ($q, $rootScope) {
        var dbName = 'TestDb';

        this.open = function () {
            var deferred = $q.defer();

            var request = indexedDB.open(dbName, 1);

            request.onsuccess = function () {
                console.log("db opened");
                deferred.resolve();
                $rootScope.$digest();
            };
            request.onerror = function () {
                deferred.reject();
            };

            return deferred.promise;
        };
    });
})(angular);

// --- SPECS -------------------------

describe('indexed db test', function () {
    var idbOpened = false;
    var idb, $rootScope;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_idb_, _$rootScope_) {
        idb = _idb_;
        $rootScope = _$rootScope_;
    }));

    beforeEach(function (done) {
        idb.open().then(

        function () {
            idbOpened = true;
        },

        function () {
            idbOpened = false;
        })['finally'](done);

        $rootScope.$digest();
    });

    it('checks if indexeddb is opened', function () {
        expect(idbOpened).toBeTruthy();
    });
});

Collectives™ on Stack Overflow

Testing AngularJS Services using $q within Jasmine

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related