Question

在我的指令模板中，我需要使用角度平移过滤器：

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

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

未知提供者：translateFilterProvider＆lt; - 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

这对我有用。但是当然你应该将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);
    }));

Answer 3

这是ES6方式：

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

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

Answer 4

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

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

如何在指令的单元测试中模拟角度转换过滤器

4 个答案: