分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – ngx-translate：在单元测试中翻译字符串，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如果它是静态测试,我可以获得值,但每当我试图获得翻译的值(使用Ngx-translatE)时,它都是空的.

<div id="header-title">
    <h1>{{ 'MENU_titlE' | translate | uppercase }}</h1>
</div>

这工作并返回测试

<div id="header-title">
    <h1>Test</h1>
</div>

spec.ts

it('should translate a String using the key value',() => {
    fixture = TESTBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySELEctor('#header-title h1').innerHTML);
});

导入翻译模块

beforeEach(async(() => {
        TESTBed.configureTesTingModule({
            imports: [RouterTesTingModule,TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,useFactory: httpLoaderFactory,deps: [httpClient]
                    }
                }),httpClientModule
            ],declarations: [NavComponent]
        }).compileComponents();

        injector = getTESTBed();
        translate = injector.get(TranslateservicE);
    }));

—–固定—–但不确定这是否是正确的方法

let fixture: ComponentFixture<NavComponent>;

it('should translate a String using the key value',() => {
    fixture.detectChanges() // fixture = TESTBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySELEctor('#header-title h1').innerHTML);
});

解决方法

找到了在单元测试中翻译密钥的解决方案

首先,检查textContent是否等于翻译键.然后为该键设置翻译并再次检查它是否已翻译：

it('should translate a String using the key value',async(() => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySELEctor('#header-title h1').textContent).toEqual('MENU_titlE');
    translate.setTranslation('en',{ MENU_titlE: 'reporTing' });
    translate.use('en');
    fixture.detectChanges();
    expect(compiled.querySELEctor('#header-title h1').textContent).toEqual('REPORTinG');
}));