Home Angular 1.X Jasmine Testing: Use translater in a compiled template, directive or component
Reply: 0

Angular 1.X Jasmine Testing: Use translater in a compiled template, directive or component

user12926
1#
user12926 Published in September 21, 2018, 8:44 am

Expectation: When testing a template or the outputted directive / component the translations such as <h1>{{home.title | translate}}</h1> should be translated to show the actual text <h1>Home Page</h1>.

Now after a lot of digging I have been able to make it work by manually putting the translations I need in my test.

Example: Current test uses manual translation setup in test, The key here is $translateProvider.translations.

(function() {
'use strict';

describe('home component', function() {
  var rootscope, compile, directiveElement;
  beforeEach(module('Templates'));
  beforeEach(module('myApp'));

  beforeEach(module('tmh.dynamicLocale'), function () {
    tmhDynamicLocaleProvider.localeLocationPattern('base/angular/i18n/angular-locale_{{locale}}.js');
  });

  beforeEach(module('pascalprecht.translate', function ($translateProvider) { 
    $translateProvider.translations('en', {
      "home":{
         "title": "Home page"
      }
    });
  }));

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    rootscope = _$rootScope_.$new();
    compile = _$compile_;
  }));

  function getCompiledElement(){
    var element = angular.element('<home-component></home-component');
    var compiledElement = compile(element)(rootscope);
    rootscope.$digest();
    return compiledElement;
  }

  describe('home', function () {
    it('should have template defined', function () {
     directiveElement = getCompiledElement();
     console.log('my component compiled', directiveElement);
    });
  });
 });
 })();

Output generated is correct:

Home page

Now this above compiles my component and shows the text as translated correctly instead of seeing the curly braces and the keys. Now in a realistic application it is not great to have to manually take the translations you need and put them in, as well as translations may change and you may forget to update your test.

I would like my tests to use the actual static json translation files

resources
  | locale-en_US.json

I have tried using the below code however with it being asyncronous it does not load by the times the tests are going. I need a way to either wait until the files are loaded or a different way to load the files into the $translateProvider.

$translateProvider.useStaticFilesLoader({
  prefix: 'app/resources/locale-', // path to translations files
  suffix: '.json'
});   

I also tried loading the language json files through karma.conf.js as shown below.

Files[
   ...
   { pattern: 'app/resources/angular-i18n/*.js', included: true, served: true },
   {pattern: 'app/resources/*.json', included: true, served: true},
 ]

I know there has to be a way this can work however I have not found a solution yet. Some say their solution works however I have tried using different plugins and still seems to not work.

UPDATE: Custom-Loader

I am reading into creating a custom loader for the $translateProvider. I am not sure how to build it to handle the way I want so it can be used for testing properly but in case others are looking into this then this may be a spot to look at.

$provide.factory('customLoader', function ($q) {
    return function () {
      var deferred = $q.defer();
      deferred.resolve({});
      return deferred.promise;
    };
  });

  $translateProvider.useLoader('customLoader');
share|improve this question
  • The reason why you didn't find is likely because this isn't conventional scenario. This is usually done in e2e tests against real DOM and real data. It doesn't make sense to test component unit like that. – estus Feb 13 at 20:57
  • Our project under goes many testing phases. One is test coverage has to always increase or our builds will fail as part of our managers decision. The point of these tests is to ensure with the data passed that the components, directives are being built and behaving correctly. The want tests of the HTML on our end and this is the only way for a decent test in its compiled form. Our translations files are all static, they want the logged out components so they can verify under scenarios that the translations are correct as part of content-writer review. Not my decision. – L1ghtk3ira Feb 13 at 21:01
  • Wether this is also conventional is irelevant as it changes from project to project and requirements. – L1ghtk3ira Feb 13 at 21:03
  • The thing you're describing is what Protractor e2e tests are for. Doing that in Karma and unit tests will make them hackier, slower and less efficient. A cleaner approach would be to mock translate pipe and make output values from JSON files, similarly to how third-party translator does it, while real pascalprecht.translate is never included. – estus Feb 13 at 21:15
  • Protractor is good yes however they want the usit tests to test individual components as well as their functionality. Can you provide an example of your idea? – L1ghtk3ira Feb 13 at 21:19

2 Answers 2

active oldest votes
up vote 0 down vote
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315397 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO