Angular2'de karma-jasmine kullanarak birim testi ng2-translate nasıl yapılır

Question

ng2-translate kullanarak sayfayı Almanca ve İngilizce seçeneğiyle çevirmeye çalışıyorum.

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'); 


    }) 
}); 

Çeviri oluyor ve {{ 'PAGE.GENERAL' | çeviri}} düzgün bir şekilde çevriliyor. Bu nedenle, spesifikasyonda, TranslateSrans'ın getTranslation() öğesi Json dosyalarından veri alır (en.json & de.json). Bu hizmeti TranslateServiceMock'ta alay ediyorum. Bunu nasıl test ederim? Herhangi bir yardım?

Answer 1

Çeviri hizmetini değil NavbarComponent'i test ediyorsunuz. İstediğiniz şey, navbar bağlantısının içeriğini kontrol etmektir, servisten gelen yanıtı değil.

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'); 

Ama, hizmet örneği ele almak gerekirse:

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

Sen this documented here.

tüm bulabilirsiniz