web-dev-qa-db-ja.com

ディレクティブの単体テストでangular変換フィルターをモックする方法

私のディレクティブテンプレートでは、angular変換フィルターを次のように使用する必要があります。

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

次に、このディレクティブの単体テストで、次のエラーが発生します。

不明なプロバイダー：translateFilterProvider <-translateFilter

_$filter_を挿入し、$translate = $filter('translate');によって_$translate_を取得しようとしましたが、問題は解決しません。これは、実際にはフィルターをテストするためのものです。

モジュール_pascalprecht.translate_を注入することはできますが、それは手間がかかります。フィルタをモックするのに最適な方法は？

angularjsunit-testingangular-translateangular-filters
20
jokomo

以下は、フィルターをモックする方法の簡単な例です。

var mockTranslateFilter;

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

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

私のために働いた簡単な解決策は、テストファイルに次の行を追加することです。

beforeEach(angular.mock.module('pascalprecht.translate'));
0
Vamshi Krishna

これは私のために働いています。ただし、もちろん、別の関数で使用する前に、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);
    }));
0
zahar_g

これはES6の方法です。

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

これは$ translate.instantメソッドを模倣しません。このために、関数を変数に割り当ててから、angular.identityメソッドをinstantpropertyに割り当てることができます。

0
sbaechler