How to mock angular translate filter in unit tests for directives

问题:

In my directive templates, I need to use the angular translate filter as such:

                  {{'Data Source' | translate}}      

Then in my unit test for this directive, I get the error:

Unknown provider: translateFilterProvider

I've tried injecting $filter and getting $translate by $translate = $filter('translate'); which doesn't solve the problem - this is really for testing the filter

I can inject the module pascalprecht.translate, but that is heavy handed. How do I best mock the filter?

回答1:

Below is a simple example of how you can mock the filter.

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

回答2:

This is working for me. But of course you should set mockTraslateFilter value to function bewfore you will use it in another funciton.

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

even shorter, if you use ES6:

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

回答3:

This is the ES6 way:

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

This does not mock the $translate.instant method. For this you could assign the function to a variable and then assign the angular.identity method to the instantproperty.

文章来源: How to mock angular translate filter in unit tests for directives