CODEWITHSUNDEEP
angularjsunit-testingangular-translateangular-filters
jokomo
jokomo

Reputation: 751

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:

    <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?

Upvotes: 20

Views: 11651

Answers (4)

Vamshi Krishna
Vamshi Krishna

Reputation: 157

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

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

Upvotes: 0

sbaechler
sbaechler

Reputation: 1429

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.

Upvotes: 0

Zakhar G
Zakhar G

Reputation: 569

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

Upvotes: 0

jokomo
jokomo

Reputation: 751

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

Upvotes: 51

Related Questions