How to mock angular translate filter in unit tests for directives

Question

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

Answer 1

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.

Answer 2

The simple solution which worked for me is to add this line in your test file:

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

Answer 3

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;
  };
});

Answer 4

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);
    }));