ng2-translate problem in unit test Jasmine

[AhmedHadjTaieb]

Reproduction of the problem
I am using karma with Jasmine for unit testing my component of Angular 2 but when I open karma server in testing and open pages tested ng2-translate don't charging attributes references in json.
I find this problem just in unit test but when I start my project in dev mode all attributes have good charging from json.

My code in the pictures :

My environment:

• ng2-translate version: 5.0.0

• Angular version: 2.4.8

• Angular/cli version: 1.0.0-rc.0

• karma version: 1.5.0

• jasmine version: 2.5.38

• Browser: Chrome

Without Testing :

With Testing in Karma :

[ocombe]

Did you call .use() somewhere in your testing app? (like in a component that's you're testing)
if not then that's why it's not loading the json

[AhmedHadjTaieb]

@ocombe Yes, I do this in the first component but not in the same component testing because it will be redundance code when I call other component use ng2-translate , also I think if user change language in the first page and change the route to another page (component) the language will be changed or it's not logical... I search for another solution when the testing component work with here own ng2-translate just for testing...I hope you interstrand me.

[mmarimuthu]

were you able to resolve the issue ? if so, please explain.

[AhmedHadjTaieb]

@mmarimuthu sorry but problem not resolved 😢 ... If you have any other solution tell me 😃

[bankimatglobant]

Please let me know if anyone able to resolve the problem.

[IevhenIkonnykov]

Hello guys. Perhaps it is too late and not what you really want, but I had a similar problem. I needed to test a component that uses translation, but the TranslateService is used in a parent component. To test my component I had to substitute TranslateHttpLoader by my own like the following:

1. Inside TestBed.configureTestingModule:

imports: [
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: TranslateCustomLoader
          }
        })
      ]

2. TranslateCustomLoader itself:

import {TranslateLoader} from "@ngx-translate/core";
import {Observable} from "rxjs";

declare let readJSON: any;

export class TranslateCustomLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    if (lang=="ru"){
      let ru = readJSON('assets/i18n/ru.json');
      return Observable.of(ru);
    }
    let en = readJSON('assets/i18n/en.json');
    return Observable.of(en);
  }
}

3. readJSON function (file read-json.js):

var readJSON = function (url) {
  url = readJSON.base + url;

  var xhr = new XMLHttpRequest();
  var json = null;

  xhr.open("GET", url, false);

  xhr.onload = function (e) {
    if (xhr.status === 200) {
      json = JSON.parse(xhr.responseText);
    }

    else {
      console.error('readJSON', url, xhr.statusText);
    }
  };

  xhr.onerror = function (e) {
    console.error('readJSON', url, xhr.statusText);
  };

  xhr.send(null);
  return json;
};

readJSON.base = '';

try {
  if (exports) {
    exports.readJSON = readJSON;
  }
}

catch (error) {
  //exports not available so not loaded by require
}

4. Make appropriate changes in karma.conf.js (include file with readJSON function and *.json files with translations):

files: [
      './src/assets/scripts/read-json.js',
      {pattern: './src/test.ts', watched: false},
      {pattern: './src/assets/i18n/*.json', included: false}
    ]

5. Inside of descibe declare a service:

let translateService: TranslateService;

and inject it before each test:

beforeEach(inject([TranslateService], (service) => {
    translateService = service;
    translateService.use('en');
  }));

this forces TranslateService to load translations and also you can change language in your test.

I hope it will be useful for someone. Good luck!

[linux-nerd]

@IevhenIkonnykov You are a savior. The solution worked for me!!
I am getting one Warning while executing the unit test cases -

WARN [watcher]: All files matched by "F:\WS\poc\src\assets/**" were excluded or matched by prior matchers.

How to supress that?

[IevhenIkonnykov]

@linux-nerd It seems like you have different matchers that cover the same files. I am not sure, but perhaps it would be right to check you matchers or make them more precise. To be honest I do not have a real solution for your problem. When you fix it would be great to share your solution. Actually I do not have anything like that in my tests. Good luck.

[bobrosoft]

Just run into testing of the component which uses ngx-translate. I don't think it matters for unit tests to have correct translation displayed in the component, you're usually testing functionality, not translation itself (which makes no sense almost and can lead to broken tests over time when translation changes). So using only bare TranslateModule.forRoot() in TestBed imports is pretty fine imho.

[xmeng1]

@IevhenIkonnykov thanks for your solution, it works. By the way, just be careful the path of the file.

export class TranslateCustomLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    if (lang === 'zh-CN') {
      const zhCN = readJSON('../../assets/i18n/zh-CN.json');
      return Observable.of(zhCN);
    }
    const en = readJSON('../../assets/i18n/EN.json');
    return Observable.of(en);
  }
}

this path should be the relative path to file with the class defined.

[IevhenIkonnykov]

Just checked my tests in Angular 5.2.6 and they work as before. Perhaps there is another problem that you experience.