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

【问题标题】：Injecting a mock provider into an angular unit test将模拟提供程序注入角度单元测试
【发布时间】：2016-01-29 11:37:07
【问题描述】：

我正在尝试弄清楚如何模拟 Angular 提供程序以进行单元测试。在下面的 sn-p 中，我有一个“翻译”提供程序，用于确定默认情况下将在视图中显示哪种语言。我想将此提供程序的不同版本注入我的测试，以确保我的应用程序根据提供程序的设置显示正确的内容。我现在正在做的事情显然似乎不起作用。提前感谢您的帮助。

顺便说一句，如果您想知道为什么使用提供程序而不是其他东西（如服务或简单值），这是一个人为的示例，它提炼了我在大型应用程序中遇到的问题。我需要在应用程序的 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>

【问题讨论】：

标签： javascript angularjs unit-testing

【解决方案1】：

你可以这样做：-

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

你也可以把上面的代码放在一个util方法中，它将语言代码作为参数，这样你就不用到处传播上面的代码了。

【讨论】：