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:

    <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

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