將模擬提供程序注入角度單元測試

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方法中，該方法將把語言代碼作為參數，因此不會在任何地方傳播上面的代碼。