How to mock a provider

Question

My Angular 1.3 application is using the angular-translate library. In my Karma tests I'm attempting to mock the $translate provider with a Mock object I have created.

The mock object is called MockTranslate and it belongs to the myMocks module. I'm not including the source for MockTranslate in the question as it's not relevant to the question.

The subject of my test is a controller and I can quite easily mock $translate using the following:

module('myMocks');
inject(function($controller, MockTranslate) {                                                                                              
  $controller("MyController", {                                                                                                           
    $translate: MockTranslate.create(translations);                                                                                        
  });                                                                                                                                      
});

The above mocking works, however my preference would be to mock the provider using the angular.mock.module with something like:

module('myMocks');
module("myModule", function($provide) {                                                                                                    
  $provide.provider("$translate", function(MockTranslate) {                                                                              
    return MockTranslate.create(translations);                                                                                      
  });                                                                                                                                      
});

But I get the following error when I run my tests:

Error: [$injector:modulerr] Failed to instantiate module function ($provide) due to: Error: [$injector:unpr] Unknown provider: MockTranslate

How do I mock a provider using angular.mock.module?

Answer 1

If I understood the task correctly then here is a working example:

angular.module('translateApp', [])
    .controller('translateCtrl', function ($scope, $translate) {
        $scope.translate = function(message) {
            return $translate.translate(message);
        };
    })
    .provider({
        $translate: function() {
            this.$get = function () {
                return {
                    translate: function (msg) {
                        return 'OriginalTranslate: ' + msg;
                    }
                };
            };
        }
    });

describe('Translate Controller Test', function() {
    var mockScope;
    var mockTranslate;

    beforeEach(module('translateApp', function($provide) {
        $provide.provider('MockTranslate', function() {
            this.$get = function () {
                return {
                    translate: function (msg) {
                        return 'MockTranslate: ' + msg;
                    }
                };
            }
        });

        $provide.provider('$translate', function() {
            this.$get = function (MockTranslate) {
                return {
                    translate: function (msg) {
                        return MockTranslate.translate(msg);
                    }
                };
            }
        });
    }));

    beforeEach(inject(function($controller, $rootScope, $translate) {
        mockScope = $rootScope.$new();
        mockTranslate = $translate;

        $controller('translateCtrl', {
            $scope: mockScope,
            $translate: mockTranslate
        });
    }));

    it('Translates messages', function () {
        expect(mockScope.translate('cool message')).toEqual('MockTranslate: cool message');
    });
});