将模拟提供程序注入角度单元测试

Question

我试图弄清楚如何模拟单元测试的角度提供程序。 在以下代码段中，我有一个“翻译”提供程序，用于确定默认情况下视图中将显示哪种语言。 我想在测试中注入该提供商的其他版本，以确保我的应用根据提供商的设置显示正确的内容。 我现在正在做的事情显然似乎没有用。 在此先感谢您的帮助。

顺便说一句，如果您想知道为什么使用提供程序来代替诸如服务或简单值之类的其他提供程序，那么这是一个人为的示例，它提炼了我在大型应用程序中遇到的问题。 我需要向应用程序的config方法中注入一些内容，这意味着我需要模拟提供程序。

 var app = angular.module('app', []); app.config(function($provide) { $provide.provider('translate', function() { return { $get: function() { return { language: 'en' }; } }; }); }); app.controller('ctl', function($scope, translate) { if (translate.language === 'en') { $scope.greeting = "Welcome to the application."; } else { $scope.greeting = "Velkommen til appen."; } }); // ---SPECS------------------------- describe('App', function() { beforeEach(angular.mock.module('app')); describe('by default', function() { beforeEach(angular.mock.inject( function(_$compile_, _$rootScope_) { const viewHtml = $('#view'); $compile = _$compile_; $rootScope = _$rootScope_; $rootScope.isOn = false; elm = $(viewHtml); $compile(elm)($rootScope); $rootScope.$digest(); })); it('shows English', function() { expect(elm.text()).toMatch(/Welcome/); }); }); describe('without English specified', function() { beforeEach(angular.mock.module('app', function ($provide) { $provide.provider('translate', function () { return { $get: function () { return { preferredLanguage: 'no' }; } }; }); })); beforeEach(angular.mock.inject( function(_$compile_, _$rootScope_) { const viewHtml = $('#view'); $compile = _$compile_; $rootScope = _$rootScope_; $rootScope.isOn = false; elm = $(viewHtml); $compile(elm)($rootScope); $rootScope.$digest(); })); it('shows Norwegian', function() { expect(elm.text()).toMatch(/Velkommen/); }); }); }); // --- Runner ------------------------- (function() { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var htmlReporter = new jasmine.HtmlReporter(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter = function(spec) { return htmlReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload = function() { if (currentWindowOnload) { currentWindowOnload(); } execJasmine(); }; function execJasmine() { jasmineEnv.execute(); } })(); 

 <link href="http://jasmine.github.io/1.3/lib/jasmine.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.angularjs.org/1.4.9/angular.js"></script> <script src="http://code.angularjs.org/1.4.9/angular-mocks.js"></script> <script src="http://jasmine.github.io/1.3/lib/jasmine.js"></script> <script src="http://jasmine.github.io/1.3/lib/jasmine-html.js"></script> <div ng-app="app"> <div id="view" ng-controller="ctl">{{greeting}}</div> </div> 

Answer 1

您可以这样做：-

  beforeEach(module('app', function ($provide) {
         $provide.provider('translate', function() {
          return {
            $get: function() {
              return {
                language: 'fr'
              };
            }
          };
        });
    }));

您还可以将上面的代码放入util方法中，该方法将把语言代码作为参数，因此不会在任何地方传播上面的代码。