Unit testing Angular views using translateStaticFilesLoader

Dear all,

I would like to unit test my view which contains translate filters.

The following loads the view and displays the key of my translation, but not its actual real value.

  it('should load the view', inject(function($rootScope, _$templateCache_, _$compile_, $translate, $translateStaticFilesLoader, $httpBackend, $translationCache) {
    $httpBackend.when('GET', 'locale-fr.json').respond({
      "vehicule": "Véhicule"
    });
    $httpBackend.when('GET', 'locale-de.json').respond({
      "vehicule": "Fahrzeug"
    });
    $httpBackend.expectGET('locale-fr.json');
    $translateStaticFilesLoader({
      key: 'fr',
      prefix: 'locale-',
      suffix: '.json'
    });
    $httpBackend.flush();

    var tpl = _$templateCache_.get("/detail.tpl.html");
    var scope = $rootScope.$new();
    var view = _$compile_(angular.element(tpl))(scope);
    scope.$digest();
    console.log(view.find('th'));
  }));

My view contains:

<th>{{ 'vehicule' | translate }}</th>

The expected ouput of the console should be Véhicule but it is vehicule.

Would you have any idea on how to provide my keys to the view?

[knalli]

@sovattha Well, you can reduce the complexity of this case to the thing want to test: your template. Instead of retesting angular-translate’s async loading process, I would recommend

• a static set of translations
• no XHR mock tooling: no $httpBackend

So, using copy-paste of your code of the op:

describe('', function () {
  beforeEach(module('pascalprecht.translate', function ($translateProvider) {
    $translateProvider.translations('fr', {
      "vehicule": "Véhicule"
    });
    $translateProvider.translations('de', {
      "vehicule": "Fahrzeug"
    });
    $translateProvider.preferredLanguage('fr');
  }));

  it('should load the view', inject(function($rootScope, _$templateCache_, _$compile_, $translate, $translationCache) {
    var tpl = _$templateCache_.get("/detail.tpl.html");
    var scope = $rootScope.$new();
    var view = _$compile_(angular.element(tpl))(scope);
    scope.$digest();
    console.log(view.find('th'));
  }));
});

[sovattha]

Thank you knalli, yes in a way, you are right. I try to test too much things in the same test. I will follow your guideline. Thanks!