angularjs - 如何在指令的单元测试中模拟角度翻译过滤器

Question

在我的指令模板中，我需要像这样使用角度翻译过滤器：

    <label for="data-source-btn">
      <span id="data-source-btn-span"></span>
      {{'Data Source' | translate}}
    </label>

然后在我对该指令的单元测试中，我得到了错误：

未知提供者： translateFilterProvider <- translateFilter

我尝试过注入$filter并$translate通过$translate = $filter('translate');它不能解决问题 - 这真的是为了测试过滤器

我可以注入模块pascalprecht.translate，但这很重手。我如何最好地模拟过滤器？

Answer 1

下面是一个如何模拟过滤器的简单示例。

var mockTranslateFilter;

beforeEach(function() {
  module(function($provide) {
    $provide.value('translateFilter', mockTranslateFilter);
  });

  mockTranslateFilter = function(value) {
    return value;
  };
});

Answer 2

对我有用的简单解决方案是在您的测试文件中添加这一行：

beforeEach(angular.mock.module('pascalprecht.translate'));

Answer 3

这是 ES6 的方式：

beforeEach(angular.mock.module('myModule'), ($provide) => {
    $provide.value('$translate', t => ({ then: cb => cb(t) }));
}));   

这不会模拟 $translate.instant 方法。为此，您可以将函数分配给变量，然后将 angular.identity 方法分配给instant属性。

Answer 4

这对我有用。但当然，您应该先将 mockTraslateFilter 值设置为函数，然后才能在另一个函数中使用它。

var mockTranslateFilter;

beforeEach(function() {
  mockTranslateFilter = function(value) {
    return value;
  };
  module(function($provide) {
    $provide.value('translateFilter', mockTranslateFilter);
  });
});

更短，如果你使用 ES6：

    beforeEach(angular.mock.module(progressBarComponent, ($provide) =>      {
        $provide.value('translateFilter', (v) => v);
    }));