angularjs – 如何模拟提供者

前端之家收集整理的这篇文章主要介绍了angularjs – 如何模拟提供者前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的Angular 1.3应用程序正在使用 angular-translate library.在我的Karma测试中,我试图使用我创建的Mock对象来模拟$translate提供程序.

模拟对象称为MockTranslate,它属于myMocks模块.我没有在问题中包含MockTranslate的来源,因为它与问题无关.

我测试的主题是一个控制器,我可以很容易地使用以下方法模拟$translate:

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

上面的模拟工作,但我更喜欢使用angular.mock.module模拟提供程序,如下所示:

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

但是当我运行测试时出现以下错误

错误:[$injector:modulerr]由于以下原因无法实例化模块函数($provide):错误:[$injector:unpr]未知提供者:MockTranslate

如何使用angular.mock.module模拟提供程序?

如果我正确地理解了这个任务,那么这是一个有效的例子:
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');
    });
});
原文链接:https://www.f2er.com/angularjs/141524.html

猜你在找的Angularjs相关文章