How to unit test ng2-translate using karma-jasmine in Angular2

Question

I'm trying to translate the page with German and English option using ng2-translate.

navbar.component.html

<div id="sidebar-wrapper">
    <div class="side-wrap-div">
        <div class="list-group sidebar-nav">
            <li class="list-group-item borderBottomMenu active" >
                <a href="#">{{ 'PAGE.GENERAL' | translate}}</a>
                <span class="marker-logo"></span>
                <span class="logo allgemein-logo-click" ></span>
            </li>
        </div>
    </div>
</div>

navbar.component.spec.ts

import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";
import { SidenavComponent } from "../sidenav/sidenav.component";
import {TranslateService, TranslateModule} from "ng2-translate";


class TranslateServiceMock {
    private lang: string;
    public getTranslation() : string {
        return this.lang;
    }
}
describe('Navbar Component Test', () => {

    let comp:    SidenavComponent;
    let fixture: ComponentFixture<SidenavComponent>;
        
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ SidenavComponent ], // declare the test component

            providers: [ {provide: TranslateService, useClass: TranslateServiceMock} ]
        })
            .compileComponents();
        fixture = TestBed.createComponent(SidenavComponent);

        comp = fixture.componentInstance;

    }));

it('should have a taskview header', () => {
        fixture.detectChanges();

        expect("How to test the getTranslation() here????" ).toContain('General');


    })
});

Translation is happening and {{ 'PAGE.GENERAL' | translate}} is getting translated properly. So in the spec, getTranslation() of TranslateService is fetching the data from Json files (en.json & de.json). I'm mocking this service in TranslateServiceMock. How do I test this? Any help?

Rui Marques Rui Marques · Accepted Answer · 2017-08-30T12:20:39

You are testing the NavbarComponent, not the translation service. So what you want is to check the content of the navbar link, not the response from the service.

import { By } from '@angular/platform-browser'; 
// ...

// By.css: this example or some selection that gets the element you want
const element = fixture.debugElement.query(By.css('.list-group-item > a')); 

// note: you should use ".toEqual('General')" if you want an exact match.
expect(element.nativeElement.textContent).toContain('General');

But, if you need to get a handle on the service instance:

const translateService = fixture.debugElement.injector.get(TranslateService);

You can find all of this documented here.

How to unit test ng2-translate using karma-jasmine in Angular2

1 Answers