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

user4110 Published in June 18, 2018, 7:33 am

I have been reading into this scenario for the past several hours and it seems nobody knows how to do this.

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 alot 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('tmh.dynamicLocale'), function () {

  beforeEach(module('pascalprecht.translate', function ($translateProvider) { 
    $translateProvider.translations('en', {
         "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);
    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

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

  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.

   { 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.

I would like to find a solution for this as well as a good example to help other developers who I am sure are having trouble for full testing because of this.

I will continue to look on my end and any help is greatly appreciated. Thanks.

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 incase 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();
      return deferred.promise;

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO