0

I am using angular-translate in my custom directive template, for example:

 <!-- directive template -->
 <button>{{"ers.diagramComponent.resizeOriginalButton" | translate}</button>

My json that maps to this translate value:

{
 "ers.diagramComponent.resizeOriginalButton": "Original"
}

I was originally getting this error: 

Error: [$injector:unpr] Unknown provider: translateFilterProvider <- translateFilter

I corrected that by adding:

 <!-- This is at the top level, runs before all tests -->
 describe("Directive", function () {

    beforeEach(angular.mock.module("directive"));

    var mockFilter = function (value: any) {
         return value;
    };

    beforeEach(function () {
        angular.mock.module(function ($provide:any) {
            $provide.value("translateFilter", mockFilter);
        });
    });
 });

Found the above here: How to mock angular translate filter in unit tests for directives

I am trying to now get that translate value to match in my karma/jasmine tests. My failing test looks something like this:

 var actualSizeHtml = diagramDirective.find("button").html();
 expect(actualSizeHtml).toEqual("Original");

My failing test:

Expected 'ers.diagramComponent.resizeOriginalButton' to equal 'Original'.

So basically I can't figure out how to translate "ers.diagramComponent.resizeOriginalButton" so that it equals "Original", which is what the test is looking for.

Here is my config for setting up the $translateProvider in the components, the resources folder holds the json for my key/value pairs:

angular.module("app",["pascalprecht.translate"]).config(["tmhDynamicLocaleProvider", function(tmhDynamicLocaleProvider) {
    $translateProvider.useStaticFilesLoader({
       prefix: "resources/locale-",
       suffix: ".json"
    });

    $translateProvider.preferredLanguage("en-us");
    $translateProvider.useSanitizeValueStrategy("escape");
}]);

But that configuration has nothing to do with my tests.

Community
  • 1
  • 1
bschmitty
  • 1,118
  • 3
  • 16
  • 46

1 Answers1

0

It seems that your tests know nothing about "pascalprecht.translate" module, which contains translate filter. You need to add "pascalprecht.translate" module as dependency to "directive" module or do somethig like this:

describe("Directive", function () {

    beforeEach(angular.mock.module("directive", "pascalprecht.translate"));

    var mockFilter = function (value: any) {
         return value;
    };

    beforeEach(function () {
        angular.mock.module(function ($provide:any) {
            $provide.value("translateFilter", mockFilter);
        });
    });
 });

Also, you can write just 

module("directive", "pascalprecht.translate")

instead of

angular.mock.module("directive", "pascalprecht.translate")
Dmytro K.
  • 169
  • 3
  • 5
  • Do you have a module with your translates? Like this: [link](https://github.com/jasper-fu/life_counting_down/blob/552859aeacfd1133a729330068f193adca500e49/app/scripts/translations.js). If you have, than you need to inject module with translations too. It would be nice to see your application structure to understand what the problem is. – Dmytro K. Jan 31 '17 at 22:51
  • I added my configuration above. That configuration is separate from my tests and doesn't apply to my tests at all. – bschmitty Jan 31 '17 at 23:54
  • Am I not able to just instantiate the functionality to be able to use the translate filter in the beforeEach function above? So that the "translate" service actually translates the html string to my key/value pair...i.e. "Original"? – bschmitty Feb 01 '17 at 00:32