Translation service in component test

I am trying to test a component in which all the labels are, of course, localized.
I know the best way to write a test is mock the dependencies but in this case the dependency (one of them) is a translation service which I think I would like to inject (not mock) in my test. This service is bootstrapped in the app so I managed to inject it into my test.

translation-service.ts

import { Injectable } from 'angular2/core';
import { TranslateService } from 'ng2-translate';

@Injectable()
export class TranslationService {

    constructor( private _translate: TranslateService ) {
        //
     }

     instant( key: string ) {
         return this._translate.instant( key );
     }

     use( lang: string ) {
         this._translate.use( lang );
     }

and my test:

describe('Login form', () => {
    beforeEachProviders(() => [
        ROUTER_PROVIDERS,
        HTTP_PROVIDERS,
        provide(Router, { useClass: MockRouter }),
        TranslateService,
        TranslationService,
        provide(LoginService, {useClass: MockLoginService}),
        provide(TranslateLoader, {
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
            deps: [Http]
        }),
        ModuleLoaderService
    ]);

    it('should check translated labels', injectAsync([TestComponentBuilder], (tcb) => {
        return tcb.createAsync(LoginComponent).then((fixture) => {
            fixture.detectChanges();
            let compiled = fixture.debugElement.nativeElement;
            console.log('cccccc', compiled);
            expect(true).toBe(true);
        });
    }));
});

Problem 1: Karma cannot find the locale file to load

http://localhost:9876/assets/i18n/en.json Failed to load resource: the server responded with a status of 404 (Not Found)

Problem 2: Even if I would load that file , I am not sure if my component will get those labels.

I have seen a few ideas in her (Stack) but they are all Angular 1 which I am not familiar with, at all (and new to Angular 2) .

Thanks for any opinion !

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

For your first question:

It seems to me that loading from ‘assets/i18n’ does not work because the karma server usually adds a ‘base’ prefix on the front.

I assume the correct path would be ‘base/assets/i18n’ or ‘base/distfolder/assets/i18n’