How to mock angular translate filter in unit tests

Question

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

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

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

Unknown provider: translateFilterProvider <- translateFilter

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?

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

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

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