Unit testing an AngularJS service with angular-translate calls

Question

I've tried numerous different ways of writing a unit test for an AngularJS service that calls angular-translate, and I just can't get it to work out. Any advice would be appreciated. Here's my most promising example:

(function() {
    var app = angular.module("theApp", ["pascalprecht.translate"]);

    var theService = function($translate) {
        var theFunction = function(data) {
            return $translate("FOO", { input: data.in }).then(function(trans) {
                data.out = trans;
            });
        };

        return {
            theFunction: theFunction
        };
    };

    app.factory("theService", ["$translate", theService]);
}());

describe("theService", function() {
    beforeEach(module("theApp", function($translateProvider, $provide) {
        $translateProvider.useLoader('customLoader');
        $provide.service('customLoader', function($q) {
            return function() {
                var deferred = $q.defer();
                deferred.resolve({
                    "FOO": "foo {{input}}"
                });
                return deferred.promise;
            };
        });
    }));

    it("function translates input", inject(function($rootScope, theService) {
        var data = { in: "bar", out: "fail" };
        theService.theFunction(data);
        $rootScope.$apply();
        expect(data.out).toBe("foo bar");
    }));
});

A JSFiddle can be found here: http://jsfiddle.net/danBhentschel/q71r874t/

Answer 1

Okay. I guess I figured it out on my own. I started out with the test found here:

https://github.com/angular-translate/angular-translate/blob/master/test/unit/service/translate.spec.js#L409

And I was able to slowly morph this passing test into what I wanted to do:

(function() {
    var app = angular.module("theApp", ["pascalprecht.translate"]);

    var theService = function($translate) {
        var theFunction = function(data) {
            return $translate("FOO", { input: data.in }).then(function(trans) {
                data.out = trans;
            });
        };

        return {
            theFunction: theFunction
        };
    };

    app.factory("theService", ["$translate", theService]);
}());

describe("theService", function() {
    var $rootScope;

    beforeEach(module("theApp", function($translateProvider, $provide) {
        $translateProvider.useLoader("customLoader");
        $provide.service("customLoader", function($q) {
            return function() {
                var deferred = $q.defer();
                deferred.resolve({
                    "FOO": "foo {{input}}"
                });
                return deferred.promise;
            };
        });
    }));

    beforeEach(inject(function ($translate, _$rootScope_) {
        $rootScope = _$rootScope_;
        $translate.use("en_US");
        $rootScope.$apply();
    }));

    it("function translates input", inject(function(theService) {
        var data = { in: "bar", out: "fail" };
        theService.theFunction(data);
        $rootScope.$apply();
        expect(data.out).toBe("foo bar");
    }));
});

A JSFiddle with the solution can be found here: http://jsfiddle.net/danBhentschel/yLt3so14/

Please feel free to point out any stupid mistakes I made. I'm still kinda new at this.