jasmine test function that returns a promise

Question

I have the following function implementation

function getRepo(url) {
    var repos = {};

    if (repos.hasOwnProperty(url)) {
        return repos[url];
    }

    return $.get(url)
        .then(repoRetrieved)
        .fail(failureHandler);

    function repoRetrieved(data) {

        return repos[url] = data;
    }

    function failureHandler(err, xhr) {
        throw new Error(xhr.responseText);
    }
}

And i wrote the following tests:

describe('"getRepo" method', function() {
    var getDeffered;
    var $;

     beforeEach(function() {
         getDeffered = Q.defer();
         $ = jasmine.createSpyObj('$', ['get']);
         $.get.and.returnValue(getDeffered.promise);
     });

     it('should return a promise', function(){
         expect(getRepo('someURL')).toEqual(getDeffered.promise);
     });

});

And this test fails. I think because i call the then method.

It does not fail if function implementation is:

function getRepo(url) {
    return $.get(url);
}

this is the message jasmine throws when using Q.defer()

Expected { promiseDispatch : Function, valueOf : Function, inspect : Function }
to equal { promiseDispatch : Function, valueOf : Function, inspect : Function }.

And this is the message if i use jQuery Deferred:

Expected { state : Function, always : Function, then : Function, promise : Function, pipe : Function, done : Function, fail : Function, progress : Function } 
to equal { state : Function, always : Function, then : Function, promise : Function, pipe : Function, done : Function, fail : Function, progress : Function }.

jQuery Deferred test implementation:

describe('"getRepo" method', function() {
    var getDeffered;
    var $;

    beforeEach(function() {
        getDeffered = real$.Deferred();
        $ = jasmine.createSpyObj('$', ['get']);
        $.get.and.returnValue(getDeffered.promise());
    });

    it('should return a promise', function(){
        expect(getRepo('someURL')).toEqual(getDeffered.promise());
    });

});

Answer 1

Instead of testing the returned object being a promise, you can test the resolved value directly, which gives a more accurate result:

describe('"getRepo" method', function() {
    var originalGet;
    beforeAll(function() {
        originalGet = $.get;
    });
    beforeEach(function() {
        $.get = originalGet; // Restore original function
    });

    it('should update the data[] array when resolved', function(done) {
    // This is an asynchronous test, so we need to pass done    ^^^^
        var expectedResult = 'test data';
        $.get = function() { 
            var dfd = $.Deferred();
            dfd.resolve(expectedResult);
            return dfd.promise();
        };
        getRepo('someURL').then(function(repos) {
            var actualResult = repos['someUrl'];
            expect(actualResult).toEqual(expectedResult);
            done(); // This is an asynchronous test. We must mark the test as done.
        });
    });
});

Please note that jQuery's Promise implementation is pretty bad. It's best if you use native Promises, or a library like Bluebird.

Answer 2

You are creating a local $ variable, then assigning a spy object to it. Which is not the same $ that getRepo uses.

You should remove the local variable var $; and mock the original $.get .

Try this:

describe('"getRepo" method', function() {
    var testPromise;

    beforeEach(function() {
        testPromise = real$.Deferred().promise();
        spyOn($, 'get').andCallFake(function() {
            return testPromise;
        });

    });

    it('should return a promise', function(){
        expect(getRepo('someURL')).toEqual(testPromise);
    });

});