ng2-translate in unit test returns keys instead of translations

Question

When attempting to test a service method that uses a translation (which works fine outside of the test) I am receiving the key I pass in back from TranslateService instead of the translation.

Service being tested (simplified for easiest error recreation):

// The proper imports are here.

@Injectable()
export class SiteHeaderService {
  private _titleText: BehaviorSubject<string> = new BehaviorSubject("");
  public readonly titleText: Observable<string> = this._titleText.asObservable();

  constructor(private translateService: TranslateService) {}

  public updateTitleTextValue(text: string) {
    this._titleText.next(text);
  }

  public setSettingsPageTitle() {
    const title = this.translateService.instant("settings-page.page-name") || "";
    this.updateTitleTextValue(title);
  }
}

The test itself:

import { TestBed, inject } from "@angular/core/testing";

import { SiteHeaderService } from "../site-header.service";

import { Http } from "@angular/http";
import { TranslateLoader, TranslateModule, TranslateStaticLoader } from "ng2-translate";

describe("SiteHeaderService", () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'base/i18n', '.json'),
        deps: [ Http ]
      }) ],
      providers: [ SiteHeaderService ]
    });
  });

  it("should update the _titleText subject with the given value", inject([SiteHeaderService], (service: SiteHeaderService) => {
    service.updateTitleTextValue("Firefly was canceled too soon!");
    service.titleText.subscribe( title => { expect(title).toEqual("Firefly was canceled too soon!"); } )
  }));  // Passes

  it("should update all subjects to their 'settings page' state", inject([SiteHeaderService], (service: SiteHeaderService) => {
    service.setSettingsPageTitle();
    service.titleText.subscribe( title => { expect(title).toEqual("Settings"); } )
  }));  // Fails: Expected 'settings-page.page-name' to equal 'Settings'.

});

Hopefully I did't miss any brace or semi-colon in the shortened code above, assuming I did not if you run this test the first one will pass, and the second one will return the failure:

Expected 'settings-page.page-name' to equal 'Settings'.

Are you sure the translation key is correct ('settings-page.page-name'), as in, it matches the translation file? Paste somewhere the key-value pair. — Rui Marques, Aug 30 '17 at 12:29
It does indeed, the UI loads as expected, it's only the test that has an issue. (If I pasted something it would be a very simplistic json as I'm not pasting in actual code here). — Ryan Crews, Sep 04 '17 at 20:22

score -2 · Answer 1 · answered Dec 04 '17 at 15:10

-2

You should set the language you are using for translations. I had similar issue.

translate.use('en');

solved my issue.

answered Dec 04 '17 at 15:10

user3131880

52
7

For whatever reason it still gives me back keys, but in many ways I've started to like that fact as I typically don't actually care what the exact text is since it changes whenever the business decides to change it and it is separate from the logical aspect of the tests. – Ryan Crews Jan 29 '18 at 20:17

ng2-translate in unit test returns keys instead of translations

1 Answers1