如何單元測試使用卡瑪 - 茉莉Angular2

Question

我試圖用德語和英語的選擇使用NG2-翻譯網頁翻譯NG2-翻譯。

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


    }) 
}); 

翻譯正在發生，{{ 'PAGE.GENERAL' |翻譯}}得到正確翻譯。因此，在規範，getTranslation（TranslateService的）被取出由JSON檔案數據（en.json & de.json）。我在TranslateServiceMock中嘲笑這項服務。我如何測試這個？任何幫助？

Answer 1

您正在測試的NavbarComponent，而不是翻譯服務。所以你想要的是檢查導航欄鏈接的內容，而不是來自服務的響應。

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

但是，如果你需要得到服務實例的句柄：

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

你可以找到所有的this documented here.