Question

我正在尝试使用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');


    })
});

翻译正在进行， {{'PAGE.GENERAL'|翻译}} 正在正确翻译。因此在规范中，TranslateService的getTranslation（）从Json文件（en.json＆amp; 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.

如何使用Angular2中的karma-jasmine对ng2-translate进行单元测试

1 个答案: